Embedding Music On Your Website Made Easy Tutorial
So, we're going to be embedding music on to our site. It's going to be valid, it's going to put control into the users hands (i.e. music On or Off), and it's going to be really cool looking! Oh ya... and the equalizer bars bounce in rhythm to the tune of the music - that little feature is the only one of it's kind! Here it is in all it's glory on a site I just did for myself.
First and formost, go here and read my previous tut dubbed "Embedding Valid Flash With The Object Tag - Easy As Pie!" That will give you all the how's and why's. OK... are you back? Good, now we can get on to the good stuff - the music!
Downloads!
music.zip - On by Default With flash cookie (same as the one in the example).
music2.zip - Off by Default with No flash cookie (user preference is not honored).
It's real simple to set-up! Included in that zip file you have a equalizer.swf, equalizer.fla, tiny_songs.xml, and a nice madonna.mp3 song. Place the equalizer.swf, tiny_songs.xml, and madonna.mp3 in your "root" folder (top level). Don't be tempted to place them in their own sub folder - it will not work if you do that! The equalizer.fla file is only for those with a flash editor that want to change or edit the equalizer, and it is not needed to enable it to work. Just put it away somewhere for safe keeping. All customization of the color of the equalizer bars, the text color (Snd On/Snd Off), the link to the song (or songs), and the option for one set of equalizer bars or two, are done within the tiny_music.xml file. The tiny_music.xml file controls everything! Directly below is what it looks like. As your probably starting to see by now - this is very easy!
<player> <songs> <!-- Repeat this section for every song you want to add, you can add unlimited number of songs --> <song> <filename>madonna.mp3</filename> </song> <!-- End repeat for each song --> </songs> <!-- Color of the letters --> <color1>0x000000</color1> <!-- Color of the bars --> <color2>0xFF0000</color2> <!-- 1 set of equalizer bars or 2 --> <channels>2</channels> </player>
A little more explanation: Also, you may be tempted to use <param name="wmode" value="transparent">, well don't unless you absolutely have too! It's buggy, it slows down the equalizer (or flash movies in general), and in FX, Safari, Opera, & Chrome, your music will not start playing untill the equalizer is phisically on-screen! If your equalizer is positioned at the top of your layout - no biggy! But if it's at the bottom like mine - it's a biggy! So use <param name="bgcolor" value="#000000"> instead when ever possible and that alleviates that little problem.
If your like me, now's about the time where you say to yourself, "hey, I just noticed, the song starts over on each page as I navigate from page to page throughout my site". That's an unfortunate drawback to adding music to your site. Although, there are ways to remedy this! However, to me, none were worth the price of admission! Instead of making you Google for hours (or days like I did) I'll just give you all the different options you have to enable your music to play continuously throughout your site. Your options are as follows in no particular order.
1) Your home page window stays open at all times (this page holds the equalizer), and all other navigation happens (via JS) in a newly opened window (only one extra window). Drawbacks to this method are your forcing a new window on the user and possibly confusing them. And you can only have the equalizer on one page. The extra window I could of "maybe" excepted, but only having the equalizer on one page - well thats no good!
2) You build your site with frames. And no, contrary to what Google will tell you, an iframe will not work - iframes reload! Most sites you see with continuous music being played on their site are built using frames. Of course the obvious drawback is, your site is built with frames! Just Google frames - there are a hundred reasons why they're considered bad. To me it wasn't worth fubaring my beautiful code!
3) A popup window (via JS) holds your equalizer. This was possibly a viable solution for me as well, but then the equalizer isn't integrated all nicely into the site. It's sitting in a seperate window all on it's own. Drawbacks to this are, it's not nearly as "clean" looking!
4) And your final option (that I'm aware of at least) is to do it with PHP. This is your "best" option, if that is, you can figure out how to do it and put it all together. Here is the link to the forum thread (I'm "ewwatson") where the PHP solution was given (FYI "billyboys" post, 3rd from the bottom). I won't lie, this option, at least for the time being, was a little over my head. However, I "probably" could have made it work, but in doing so, I would of had to recode my whole website - I didn't want to do that! It was too perfect just the way it was!
And I'd like to give a special thanks to man named Adrian (AKA "krityx" at SitePoint), without which none of this (well some of it anyways) could have been possible! See, strait out of the box, the flash equalizer plays by default, and does not honor the users preference (i.e. music On or Off). Well, if a user comes to your site, and they're one of the many who don't like listening to music while they surf, and they keep having to turn the music "off" on each page they visit, I think it's obvious that they're going to become agitated very quickly and leave. Well thats no good! So Adrian was kind enough to help me out and edit the code in the .fla/.sfw files in order to make the nesesary changes. So now, thanks to him, user preference is honored, and everyone is happy! Yeah!
