iWeb Tip #12 – Music (MP3s) in iWeb

62
3762

MP3's in iWebEver want to have a simple song or audio file play on your website? Well this tip is all about playing audio files in iWeb.  There are many great audio players out there that can help us get mp3s streaming to our iWebsite.  Google, Yahoo, Odeo, Premium Beat all offer some great audio players.  Some that are single players, some that are multiplayers, some that are playlist players.  So here’s a great little tip that will help you get them all on your website whether it be for entertainment, background music for your site, a song or sound file you’d like to share, etc.  So here’s how to do it:

View Demo »

iWeb Player |   Google Player |   Yahoo Player |   Odeo Player |   Premium Beat Players

Using the Built in QuickTime to play Audio:

First of all iWeb does have built in support to play music or any audio file by default by simply dragging in an audio file. By doing that you get a QuickTime looking playbar, they even give you the option to add a picture (album art) to the player if you choose. It looks like this:

But if you don’t drag an image  into the box, it will disappear leaving only the playback controls, which is sometimes all you want.  iWeb also gives you some options for music in the QuickTime inspector.  It gives you the option to 1) Autoplay 2) Loop Song 3) Show controller or not.

I know some of you have asked about playing music on your site for just background music, well this is one way you can do it.  Simply drag a song in, have it auto play upon opening, and leave the controller so people can stop the music if they’d like, presto your set.

Google Player:

If you want a playback player there are many options and Google is one of those choices.  The thing I like about this player is that it’s simple and it has no branding on it.

To use this MP3 player on your website or blog, copy-paste the following code into an html snippet and replace the MP3_FILE_URL with the link to your MP3 file.

[iWeb-Code=’Google Audio’]

In other words, find your MP3 you want to stream to your site, and throw it on your iDisk or on your own server.  If your doing it on your iDisk go to iDisk>Web>Sites>Then make a folder here called “mp3” and put your MP3s in there.  Then your link to replace in the red will be https://web.me.com/username/mp3/mymp3file.mp3 and that’s it. If your using your own server, it would be similar.  Make a “mp3” folder on your server, then drop your MP3s in to that folder and your link will be https://www.mysite.com/mp3/mymp3file.mp3

Note: I would recommend naming your mp3 files with no spaces to make the URL easier.

Advanced Tip: You’ll notice that the Google player is coming from googles site.  If you don’t want to rely on Googles site to provide the player.  You can download it Here » (courtesy of me ;-) Your Welcome).  Then just put that player in the same mp3 folder you made and change the google link in the code to link to your downloaded player and your set!

Yahoo Player:

The new Yahoo player works a bit different, put the mp3 files in the mp3 folder on your server (like we did with the Google Player) and add this code to an HTML snippet and replace the link in red.

<font face=verdana>
<a href="https://www.yoursite.com/mp3/song1.mp3">Song 1</a>
<a href="https://www.yoursite.com/mp3/song2.mp3">Song 2</a>
<a href="https://www.yoursite.com/mp3/song3.mp3">Song 3</a>
</font>
<script type="text/javascript" src="https://mediaplayer.yahoo.com/js"></script>



Note: You can resize the widget how you’d like so that they would be in a column or a row.  Has a very Mobile iTunes Store feel to the player.

Odeo Player:

Same idea as before.  Add code to a snippet and replace the red with the link to your mp3 URL.

<embed type="application/x-shockwave-flash" src="https://www.odeo.com/flash/audio_player_standard_gray.swf" width="400" height="52" allowScriptAccess="always" wmode="transparent" flashvars="audio_duration=DURATION&external_url=MP3_FILE_URL" />

Note: This player can be downloaded to put on your own server so you don’t have to rely on Odeo’s server.  Here’s the player to download and put on your own server, then just change the odeo link in the code to your own server linking to the odeaplayer.swf

Premium Beat Players:

These players work the same way, but you’ll do one extra step.  This one you have to have the player on your own server.  So you’ll first download the player (provided below), then put the player on your server/iDisk in “mp3” folder or perhaps even make one more folder in the mp3 folder just for these players, paste code into html snippet, change links to your player .swf, .js. & .mp3 files and your set.  Here are the players

HTML Snippet Code:

<script type="text/javascript" src="https://web.me.com/username/mp3/playermini/swfobject.js"></script>

<div id="flashPlayer">

Text will be replaced.

</div>

<script type="text/javascript">

var so = new SWFObject("https://web.me.com/usernmae/mp3/playermini/playerMini.swf", "mymovie", "75", "30", "7", "#FFFFFF");

so.addVariable("autoPlay", "no");

so.addVariable("soundPath", "https://web.me.com/username/mp3/mymp3file.mp3");

so.write("flashPlayer");

</script>



Note: If your using your own server the links will look like this instead.

https://www.mysite.com/mp3/playermini/swfobject.js

https://www.mysite.com/mp3/playermini/playermini.swf

Also note that you don’t have to have the files in these exact locations you can put them where you want just make sure your URL points to the exact place.  You can also change the “no” to “yes” in the autoplay part of the code.

HTML Snippet Code:

<script type="text/javascript" src="https://web.me.com/myusername/mp3/playersingle/swfobject.js"></script>

<div id="flashPlayer">

This text will be replaced by the flash music player.

</div>

<script type="text/javascript">

var so = new SWFObject("https://web.me.com/myusername/mp3/playersingle/playerSingle.swf", "mymovie", "192", "67", "7", "#FFFFFF");

so.addVariable("autoPlay", "no");

so.addVariable("soundPath", "https://web.me.com/myusername/mp3/audio.mp3");

so.write("flashPlayer");

</script>



HTML Snippet Code:

<script type="text/javascript" src="https://web.me.com/yourusername/mp3/playermultimenu/swfobject.js"></script>

<div id="flashPlayer">

This text will be replaced by the flash music player.

</div>

<script type="text/javascript">

var so = new SWFObject("https://web.me.com/yourusername/mp3/playermultimenu/playerMultipleList.swf", "mymovie", "295", "200", "7", "#FFFFFF");

so.addVariable("autoPlay","no")

so.addVariable("playlistPath","https://web.me.com/yourusername/mp3/playermultimenu/playlist.xml")

so.write("flashPlayer");

</script>



This one works pretty much the same, but the big difference is that you tell the player where the mp3 files are by the .xml file.  So in the download you’ll see an .xml file, open in up with an html editor (Text Edit will do), I prefer Coda myself and just change the path to your mp3 file and change the name.  Here’s an example below.

<?xml version="1.0" encoding="UTF-8"?>

<xml>

<track>

<path>https://web.me.com/yourusername/mp3/audio.mp3</path>

<title>Track 1 - Od to Joy</title>

</track>

<track>

<path>https://web.me.com/yourusername/mp3/audio2.mp3</path>

<title>Track 2 - Fluffy Flutes</title>

</track>

<track>

<path>https://web.me.com/yourusername/mp3/audio3.mp3</path>

<title>Track 3 - Smooth Piano</title>

</track>

</xml>




HTML Snippet Code:

<script type="text/javascript" src="https://web.me.com/yourusername/mp3/playermultiple/swfobject.js"></script>

<div id="flashPlayer">

This text will be replaced by the flash music player.

</div>

<script type="text/javascript">

var so = new SWFObject("https://web.me.com/yourusername/mp3/playermultiple/playerMultiple.swf", "mymovie", "192", "95", "7", "#FFFFFF");

so.addVariable("overColor","#660000")

so.addVariable("autoPlay","no")

so.addVariable("playlistPath","https://web.me.com/yourusername/mp3/playermultiple/playlist.xml")

so.write("flashPlayer");

</script>

</script>




This one is the same as the multi-menu player where you will have to edit the xml file to point to your mp3s.  Again open up the .xml file in an html editor and change the path of the mp3 files and titles.  Save that, upload it to server, make sure code is pointing to the right spot and your set!

Again just to make clear, if your using your own server your link won’t be from the iDisk it will look like this:

https://www.mysite.com/mp3/playername/swfobject.js

https://www.mysite.com/mp3/playername/playermini.swf

https://www.mysite.com/mp3/playername/player.xml

Hopefully that’s all not to confusing.  It’s kindof fun to put music or audio files on your webpage and hopefully this gives you some great options that you can do that easily.  Remember not to put any mp3’s that are copyrighted and owned by another artist (there now I’m covered ;-))

Back to top

62 comments

  1. Ryan 27 November, 2010 at 22:47 Reply

    Love your website! Has helped me immensely with my own site, thank you so much!

    Another mp3 player (one that I use) is by 1pixelout and can be found here: http://www.macloo.com/examples/audio_player/

    Random suggestion for a tip – some websites have a bit of text that is automatically hidden, but can be expanded with a click on a link (usually one that says, “expand”). Any way to do that on iWeb?

    Thanks again for all your help!!

  2. Daniel Chavez 25 March, 2011 at 14:44 Reply

    I was able to get my flash mp3 player to work and show up functioning in iWeb using the HTML snippets but when I publish my site doesn’t show up online. In fact, when I “view source” it doesn’t even show the code I entered. However, when I “select all” you can see that there is a placeholder for where the flash player should be. Have I entered code incorrectly or is there an issue with snippets I don’t know about?

    the link that that specific page is http://www.danielchavezonline.com/clients.html

    here’s the code I used. I used dewplayer but followed the same basic steps as with premium beats

    var flashvars = {
    mp3: “http://www.danielchavezonline.com/components/audio/happy-on-the-run.mp3”
    };
    var params = {
    wmode: “transparent”
    };
    swfobject.embedSWF(“http://www.danielchavezonline.com/components/audio/dewplayer.swf”, “dewplayer_content”, “200”, “20”, “9.0.0”, false, flashvars, params, attributes);

    • Daniel Chavez 25 March, 2011 at 15:02 Reply

      also, when I publish to a folder and then “visit site” it shows up fine and functions. when I upload that folder then to my server, the flash player doesn’t appear on the page. if you can help that would be amazing!

  3. Kevin 9 April, 2011 at 17:55 Reply

    Nice thanks thats helps me.

    Lol in your demo page you played the german Song: “freude schöner Götter Funken” are from German or why you share this.

    :-)

    Its cool because iam from Germany :-)

    What ever

    THX for this Tipp and i come back.

    ;-)

    ca

  4. Christian 26 April, 2011 at 08:56 Reply

    Great site…

    Using the MultiMenu Player and wanted to see if there’s an easy way to change the color of the player… The bright white doesn’t exactly match my web design. Just changing the color code in the HTML snippet doesn’t work. Any thoughts on how to do this other than editing the .swf file?

    Thanks!

  5. Fit Finance 16 July, 2011 at 02:52 Reply

    Our team of Forex Experts review and compare Forex brokers, training courses, signal services and more to give you independent unbiased advice for more.

  6. framing 17 July, 2011 at 20:58 Reply

    When I originally commented I clicked the -Notify me when new feedback are added- checkbox and now each time a remark is added I get four emails with the same comment. Is there any manner you may take away me from that service? Thanks!

  7. Peter 27 July, 2011 at 05:58 Reply

    Hi!

    Love your website and all the things you are doing. But I have a problem. I cant get the Google player to work.
    Regardless on how I do. Copied your code and put my own url. But it will not play. I cant even se a player at all.

    Regards Peter

  8. CPSC 17 August, 2011 at 17:26 Reply

    Please let me know if you’re looking for a article author for your blog. You have some really good articles and I believe I would be a good asset. If you ever want to take some of the load off, I’d really like to write some articles for your blog in exchange for a link back to mine. Please blast me an email if interested. Cheers!

  9. jerseys sale 26 August, 2011 at 07:08 Reply

    I used to be very pleased to seek out this net-site.I needed to thanks to your time for this wonderful read!! I undoubtedly having fun with each little bit of it and I’ve you bookmarked to take a look at new stuff you weblog post.

  10. fundsek 4 September, 2011 at 21:04 Reply

    Hey there, Now i’m 20 not to mention this is my personal beginning forum post on the site. Despite the fact that I have been reading through for a while. Just how is everyone feeling?

  11. Bazin 5 September, 2011 at 11:52 Reply

    *I am often to blogging and i really appreciate your content. The article has really peaks my interest. I am going to bookmark your site and keep checking for new information.

  12. kokopolols 6 September, 2011 at 15:25 Reply

    I have to voice my passion for your generosity supporting all those that really need help on in this subject matter. Your special commitment to passing the solution all through ended up being surprisingly functional and has frequently helped most people just like me to reach their aims. Your amazing insightful guide indicates so much a person like me and still more to my mates. Thanks a lot; from each one of us.

  13. katie 19 September, 2011 at 05:17 Reply

    Hi i have trying to upload the multi menu player and cannot get it to work. This is the first time I’ve used code but i have been meticulous with your instructions but still no joy. Can you perhaps make a video showing how to put the multi menu player on iweb and then how to upload it using a server rather than mobile me. I would greatly appreciate this.

  14. Jin 26 September, 2011 at 22:02 Reply

    Hi I’ve been trying to put music on my website. I’ve tried google player, yahoo player and odeo player all according to your insructions.

    The players all load up and display fine. But the music just won’t play. Even if I go directly to the link where my music is upload (www.mywebsite.com/mp3/music.mp3) it stil won’t play. I will click the play button and nothing happens

    Any suggestions?

  15. jason gillearn 23 October, 2011 at 10:51 Reply

    hi there,

    i’m trying the google player suggestion. i have mobileme and i’m doing everything you said, but it’s not working.
    i’m BUMMED! any other ideas.

    thank you very much,
    j

    • Saxmadness 29 October, 2011 at 16:29 Reply

      What I’m doing right now (I had the same problem), is to use Dropbox as a file repository (You can use FileDen.com or whatever file hosting service out there) to have Your MP3 published in the way “https://www.iwebunlimited.com/_embed/mp3/audio.mp3” does.
      Then change the url into the Google widget, pointing to the public link provided by Your hosting program of choice.
      That’s all.
      Cheers. Sam.

  16. pepperstone 18 December, 2011 at 13:33 Reply

    This is very interesting, You are an overly professional blogger. I have joined your rss feed and stay up for searching for more of your magnificent post. Also, I’ve shared your web site in my social networks

  17. Peter 30 December, 2011 at 10:57 Reply

    Sorry but how does this work! HAve tried the Premium Beat Palyer but it will not work. I have tried do follow your instruction but there got to be something wrong.

  18. music lessons 7 March, 2012 at 03:24 Reply

    Good website! I truly love how it is simple on my eyes and the data are well written. I am wondering how I might be notified when a new post has been made. I have subscribed to your feed which must do the trick! Have a great day!

  19. Edit Sound 9 March, 2012 at 09:43 Reply

    Hi there, You’ve performed a fantastic job. I’ll certainly digg it and personally suggest to my friends. I am confident they’ll be benefited from this website.

Leave a reply

Facebook
Twitter
YouTube