XSPF: Playing Music in HTML

Embedding audio in web pages

Do you want to play MP3 or WAV files on your website? Do you want to embed music files in a web page? It's not a simple as it should be. But there's hope. While there are several possible solutions, you want as many people to hear your music as possible regardless of their OS, browser, or the arcane details of their particular configuration.

The simplest way to to link to an MP3 or WAV file within your HTML: <a href="http://www.myURL.com/sound.mp3">play me</a> Simple bordering on simple-minded. It may or not work for all of your surfers.

It's a minor improvement to link to an icon, wich is a bit more compelling that mere text. People are more likely to click a pretty picture. Of course you have to come up with the artwork.

Both of these solutions are almost too good to be true. In the real world, you don't know which audio player is installed or what browser/OS combination you're dealing with. The best thing to do i to take control of the situation by specifying the music player yourself.

One easy option is the Odeo Flash player. It's free. No bells, no whistles. It does the job.

I like Yahoo!'s EasyListener. This free MP3 player is both easy to use and feature rich. Read more about EasyListener and then try it for yourself. While it's made to crawl a page and make a playlist of everything it finds there, I've substituted a specific URL that points to an MP3 file. EasyListener also understands RSS, XSPF, M3U, and ASX, assuming you do.

It took me awhile but I finally got XSPF to work. I suggest downloading Fabricio Zuardi's free XSPF player. It's Flash-based, wildly flexible, very powerful, and eats XML playlists. The XSPF format is something I suggest you get familiar with.

Here's the XSPF playlist used to configure the player:

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
  <trackList>
    <track>
      <title>1-2-3-4-5
      <location>http://www.jetcityorange.com/making-websites/12345.mp3
    </track>
    <track>
      <title>Say what?
      <location>http://www.jetcityorange.com/making-websites/SayWhat.mp3
    </track>
    <track>
      <title>Yeah...
      <location>http://www.jetcityorange.com/making-websites/Yeah.mp3
    </track>
    <track>
      <title>Tastes like chicken.
      <location>http://www.jetcityorange.com/making-websites/TastesLikeChicken.mp3
    </track>
  </trackList>
</playlist>

This Flash player is loaded with features and options. It's up to you to learn how to harness them. Lissa has a good how-to for the Flash MP3 Player. This page talks about another MP3 player you might like.

If any of you out there are willing to put together a little Flash player for me, I have a modest wish list.