iWeb Tip #12 – Music (MP3s) in iWeb
Ever 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:
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
- Mini Player—Download Player »
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.
- Single Player—Download Player »
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>
- MultiMenu Player—Download Player »
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>
- Multi Player (Playlist Player)—Download Player »
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 ;-))
these are really cool tools but when I install them I would like them to auto play with the option of turning it off. How do you set these in the code? I tested all three and they are set up that you have to click on them in order to play: ie google player, yahoo and odeo.
First i wanna tell you that i love what you do here and i love all the tips and tricks!! so much help for us newbies … iWeb, html, etc…
i wanted to ask you whether m4a type files are compatible with the multi track flash player … i have a few mp3s uploaded on my site now but it’d be so nice to be able to load music from my iTunes list which are all m4a files i believe …
look forward to hearing back from you
James
Kim Great Question!!!! You can do that with the Google Player and the Odeo Player.
For the Google player simply add “&autoPlay=true” after the mp3 url in the code (of course without the quotes) and it will autoplay on your site.
For the Odeo Player, do the same thing, but use slightly different code. Just add “&auto_play=true” to the end of your mp3 var url.
Great question.
James, unfortunately these are MP3 Players not m4a players. BUT, you CAN convert those audio files to MP3’s in iTunes ;-)
Use one of the following options:
1) Choose iTunes from the menu bar and go to Preferences. Go the General tab and you’ll see a section that says “Import Settings”, then change it to say Import Using MP3 encoder. Then click OK, then OK again to get out of the iTunes Prefs. Now choose your song in iTunes and go under the Advanced button in the iTunes menu bar and you’ll see an option that says “Create MP3 Version”. It’ll create a copy of your song in an MP3 format. Now your set and can upload that to your site and stream it to the www via iWeb. ;-)
2) This option is if your songs are in the old DRM protected AAC/M4A format that iTunes used to use. To “unprotect” them you can do one of two things.
The first option is to burn the song(s) to a CD then re-rip them into iTunes as an unprotected MP3 file. The other option is to add the song into iMovie, as it does accept protected files. If your using iMovie 8 throw in your song and add enough video/photo so your whole song is played then you can export using Quicktime Advanced settings and export the audio only and it will then be unprotected. If your using the older iMovie HD 7, Throw you protected song on the audio track and then put just one photo of anything on the video track, then you can do the same thing and export using expert settings and export only the audio out (it says something like “Export Audio to AIFF”, or something like that, I’m writing all this from memory, if you can’t find it then let me know and I’m sure I could open up the iMovie’s and find the option real quick, but that should get you in the right direction). The iMovie way is a nice way if you don’t want to have to burn a CD.
Hope that helps
hi, i’m trying to insert the embed code for the multiList player and I’m using Google sites. the insert html in gsites wont accept the code!
is there any work around or is the player bad for google sites?
Hi, thanks for your help here. I tried the menu and multi ones and they are playing my tracks but it doesnt display a playlist that users can see what the song is called etc. Is this even meant to be there?
regards,
Ryan
HI
not clear to me where the mp3 name changes..
i.e… my song is called ‘rain’
so on google option – do i put
http://web.me.com/myusername/mp3/rain.mp3”
or
http://web.me.com/myusername/rain.mp3”
Can someone help me….
Ive tried a few times…no success.
Please explain in slow clear terms how i can make this work…
(thanks for you patience)
Hi,
Thank you for your awesome tips. You really know how to explain things clearly!
Could you please explain what would be the best way to make a table (list) with many MP3’s on one page e.g. where only the “Title” would be the clickable url.
What player would fit best for that? And what’s the easiest way to keep dozens of titles (links) in a nice outlined table?
Title speaker reference
Thank you in advance!!!
Bart
if you’re having problems getting the files names to work on your idisk, make sure that you allow sharing on the file first. I was banging my head against the wall with this one for like an hour.
The file name should NOT be web.me.com/user/mp3/file.mp3
it should look more like….
files.me.com/username/song.mp3
Hey Mates,
There seems to be an small error in the code for the multi menu player that you are supposed to copy and paste to your snippet.
If you were lazy (efficient) like me you just changed what you needed to in the code. After a few minutes of troubleshooting, I discovered that the folder you download is titled “multimenuplayer” and the folder that he links to is called “playermultimenu”.
So this:
Should be this:
As a suggestion to the site, please fix this in the code that most people will copy and paste into their snippet.
As another note, I noticed that I needed to use my non-password protected public folder. To link to the files. I’m sure what Chris said would work as well.
So my links looked like this:
Hope this helps!
Cheers
i’m excited to see your site, i learned a lot of tricks to get around in iweb…however i’m curious as to if it’s possible to have the player play on all the pages non stop without it stopping if they click to go to a different page?
I’d like an answer to that question too!
In my knowledge I believe it would work, unless you make your link pop windows “target=”_blank””
Thanks a lot for the tips of Iweb, I’ve tried using Google player embedded in my webpage, according your guide, I successfully add autoPlay in it, there is only one question remain: how can it loop the song? Google simply told you to add “&loop=true” in the code, I add it just right behind the “&autoPlay=true”, but it wont work. Can you lookup for it?
hiya,
thanks a lot for this and i really like the work you guys are doing here. i am very new to all this website stuff and am falling at the first hurdle – please help. i wanted to design my website before posting it live as i am not sure where i will be hosting it, i have tried MMe before and found it painfully slow so will be looking into my options. my question is where would i store my mp3s if i don’t have a server ready? I want to set up a number of pages all with different Mp3 files attached probably using the yahoo tool but i don’t know what to write in the script box so it will just work when i press the publish button.Is this possible? any help would be great,
ta
Hi, I do that but when i click play, nothing happens! Explain me PLEASE!
i did the MultiMenu Player
Note for the Google Player:
Change the original code to:
http://www.google.com/reader/ui/3523697345-audio-player.swf?
It will work for IE8 and Safari browsers
Hi, This is great but is it possible to get a player or a code that plays the music on the site and continues to play when clicking on another page on the site… this would be phenomenal!
I know now how to add the music to the website , would like to know how I can keep the music playing when going to other pages…please help.
I am also trying to put music on my website to ring constantly as you open different pages. I have tested with XSPFSource:( http://musicplayer.sourceforge.net/)but not get it to work.
If anyone knows a way to do it would be helpful
I’ve read the comments from Chris and Neil (March 2010) and I think my issues with the Premium Beat players not working properly are related to their issues as well (?). After inserting the code into the HTML snippet a text box appears with “Text will be replaced” or sometimes I get a blank white box–even after publishing the site. I’m using Network Solutions to redirect my web.me.com site so that I can have a simpler/streamlined domain name. Does this have anything to do with why the players are not showing up? Is there something else that needs to be typed into the code that reflects the Network Solutions site? Any help is appreciated!
Trying to use the Google player with iWeb.
I created a folder on the server (in my godaddy space).
I transferred a sample .mp3 along with googleplayer.swf.
Published the webpage and transferred it to the site.
It shows up in Firefox with the player but, doesn’t play.
If I use Safari, it shows up with a Godaddy sales icon on top of it (clicking it still won’t play).
What to do?
thanks
Wow!! I love what you are doing! I need to relook at screen toaster! Informative and interesting post!!!keep it up..
Hi, I am using the Odeo player, but is it possible to have it automatically start playing?
I know now how to add the music to the website , would like to know how I can keep the music playing when going to other pages…please help.
Remarkable details for upload files for getting me personally get started. Most definitely i’ll keep this specific website link and return to this.