Add an MP3 Playlist To Your Website!

Here's a cool trick to play MP3s on a web page. The idea is that any time a surfer accesses the page, or performs a forced refresh (Ctrl+F5 in Internet Explorer), a different audio track is selected at random.

(Note: For those of you who know your way around M3U playlists and such, you may question the following methodology. Trust me when I report, after much testing, this was the only way I could get a MP3 to be consistently chosen at random.)

Overview—Let's say you've created a vacation page called Coastal Trip that contains both text and photos. For optimal organization, it's a good idea to create a subfolder, called Images, one level below the folder you've created for the CoastalTrip.html file. Similarly, it's a good idea to create another subfolder, named Music, in which to store the M3U playlists and their corresponding MP3 files. This is all done within your FTP utility software; the one I use is the free WS_FTP Lite. (Note that web page design applications such as Dreamweaver have FTP built-in.)

The Playlist—For each MP3 you want to include in your random playback, create a M3U playlist in any ASCII text editor. Notepad works just fine for this. Through experimentation, I discovered it's best to include the MP3's full URL (where it will reside on your Internet host server once you upload it), i.e., http://{your domain}/CoastalTrip/Music/{track_title}.mp3. A sample playlist, perhaps taking the name Hippolyte.M3U, looks like this (indentation for illustration only):

http://{your_domain}/CoastalTrip/Music/Hippolyte.mp3
Create additional M3U files, one for each MP3. To complete this phase, you should now FTP (upload) each M3U playlist and corresponding MP3 file to the Music subfolder on your Internet host site.

The Magic Code—Now you have to add some magic JavaScript code I lifted somewhere off the 'Net. Code it just as you see it here, inserting it immediately after the BODY tag in the HTML code of your CoastalTrip.html page.

<!--embed src=http://{your_domain}/CoastalTrip/Music/Unto_the_Burning_Circle.m3u autostart="true"type="audio/mpeg" / width="0" height="0" loop="true"-->

<script type="text/javascript">

var sound=
[
"./Music/Unto_the_Burning_Circle.m3u",
"./Music/Dancing_with_the_Lion.m3u",
"./Music/Hippolyte.m3u",
"./Music/Dance_of_the_Masks.m3u",
"./Music/Pearls_Tears.m3u",
];
var soundFile = escape( sound[ Math.floor( Math.random()*sound.length ) ] );
document.write ('<EMBED src= "' + soundFile + '" hidden=true type="audio/mpeg" autostart=true loop=true>')

</script>
Note: Regarding the ./Music/ portion of the M3U file paths, the ./ is a bit of programming shorthand that instructs the browser to look for something within a Music subfolder, one level below the present folder. So if your CoastalTrip.html page resides in the CoastalTrip folder, oddly enough, the browser will look in the path CoastalTrip/Music. Experience the results of my coding by making sure your sound is engaged and clicking here.

So there you have it. There are other ways to include music on a web page, but playing a random track is a horse of a different color. And there are other examples of random playback scripts on the 'Net, but this is the only one I found that actually worked. Enjoy!