WWW FAQs: How do I play a list of several MP3 songs on a web page?

2005-06-26: Right now, the simplest and best answer is to use Flash. The Flash-based XSPF Web Music Player supports a sensible playlist file format called XSPF and works in over 95% of browsers, because almost all users have Flash installed.

See How do I embed sound and music in a page? for a tutorial on how to use the XSPF Web Music Player. That article covers how to make a playlist with four songs; you can add as many <track> elements as you like.

Alternate Method: For Those Who Hate Flash

Maybe you dislike Flash; maybe you just want to know what the alternatives are. Well, there's another approach - supported by other players such as Windows Media Player, RealPlayer and QuickTime Player. But be warned: it's limited, and there's no way to go beyond it. Want to display the current song title, for instance? You can't reliably do that across all browsers and platforms. So I strongly recommend you use the XSPF Web Music Player method instead.

Understood? OK, here's the alternative method. Just follow these steps to create an MP3 playlist and convince Windows, MacOS X, and Linux browsers to play the songs in sequence, in the background, for as long as your page is displayed or until the end of the last song, repeating if desired. See the end of this entry for technical notes... and be sure to read them first if you think you've spotted a mistake on my part!

Step One. Upload the MP3 files to your website. I'll assume your site is called www.example.com and the files are in a folder called example with the names a.mp3, b.mp3, c.mp3 and d.mp3.

Step Two. With plain old Windows Notepad or any other text editor, create a new text file called playlist.m3u. Place the following lines in the file:

http://www.example.com/example/a.mp3 http://www.example.com/example/b.mp3 http://www.example.com/example/c.mp3 http://www.example.com/example/d.mp3

Step Three. Save the playlist.m3u file and upload it to the example folder of your website, www.example.com.

Insert the embed element anywhere inside the body element of your page. If you choose to make the player visible, place the embed element at an appropriate location within the page.

Step Four. Use the <embed> element to insert an audio player in your web page, like this. The <embed> element should appear in the <body> element of the page. You can make the player invisible by setting the width and height attributes to zero, but you don't have to. You do have to leave the type attribute set to audio/mpeg or this technique will not work in Firefox for Windows, which is now a very common browser:

<embed src="http://www.example.com/example/playlist.m3u" autostart="true" type="audio/mpeg" loop="true"/>

Your .m3u file can be on any website. The src attribute of the embed element can contain any valid URL.

Step Five. Access your page. You should hear the four songs play in order and then repeat (because we set loop="true").

Technical Notes

How does it work? .m3u is a standard for "playlist" files. M3U files first appeared in the WinAMP MP3 player and are now supported by nearly everything under the sun. All you have to do is list the URL of one MP3 file on each line of the .m3u file. As an added bonus, the files will "stream," playing back as they download instead of forcing the user to wait. See how do I play streaming audio on my web page? for more details on how this works.

The URL in your .m3u file does not have to point to the website that the .m3u file came from. Your .mp3 file can "live" anywhere you like. Even if the .mp3 file is on the same site, the URL still does have to be a complete URL starting with http: and giving the full site name and path.

What about audio/mpeg? Shouldn't it be audio/mpegurl? In theory, yes! In practice, no, because Firefox for Windows doesn't recognize audio/mpegurl (or audio/x-mpegurl, or any other spelling or punctuation variation, trust me I tried). The user is told there is no plug-in, and the plug-in finder fails. With audio/mpeg, which strictly speaking should only be used for actual .mp3 files and other MPEG audio files, the file reaches the attention of the user's audio player, which does the right thing because all major MP3 players are smart enough to recognize a .m3u file when they open one. It's not pretty, but it really works. I tested this in my lab and was successful with:

Windows Internet Explorer with Windows Media Player
Windows Firefox with QuickTime Player
MacOS X Internet Explorer with QuickTime Player
MacOS X Firefox with QuickTime
MacOS X Safari with QuickTime
Fedora Core 3 Linux with the MPlayer Firefox Plug-In

So unless you're prepared to test your "more correct" solution on all of these and more, I suggest you do it this way. Or better yet, use the XSPF Web Music Player, which is supported by more users and gives you more capabilities.

Share |

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!