Create a Music Playlist

You may already know how to add music to your website, but do you know how to create a music playlist?

A music playlist is simply a list of songs. By using a playlist, your music player can play many songs one after the other. In other words, when the first song in your music playlist is finished, the second song will start playing. Then when that song is finished, the next song will play etc.

WordPress Playlist

If you use WordPress, you can create a playlist within a few clicks (here's how to create a playlist in WordPress.)

HTML Playlist

If you don't have that option, you'll probably need to resort to coding your playlist using HTML and/or JavaScript.

Here's an example of an HTML playlist.

To add a music playlist like this to your website you need to do 2 things:

1. Create an m3u file (your music playlist file)
2. Create your HTML file with your music code (this plays the music on the m3u file)

Here's an explanation of that.

1. Create a m3u File

   A m3u file is a file that contains a list of songs. Follow these steps to create your m3u file (i.e. your playlist file):

   1. Create a text file
   2. Add a list of the mp3 files you want on your playlist, placing each mp3 file name on a new line. The file names can be an absolute path to the file (eg, http://mysite.com/music/song.mpg), a relative path (eg, music/song.mp3), or a root-relative path (eg, /music/song.mp3). See HTML Links for an explanation on path types.
   3. Add any comments by preceeding them with a hash (#) symbol (this step is optional)
   4. Save the file with a .m3u extension. For example, call it music_playlist.m3u

   There it is — your music playlist file!

   Example m3u File

   Below is an example of an m3u file:

   #This is my m3u file - it contains a list of songs /music/title.mp3 /music/good_enough.mp3 /music/bonus.mp3

   Now all you need to do is add your playlist to your music code.

2. Add Your Playlist to your Music Code

   Place the following code within your HTML file and change the values to suit:

   Example Music Code

   This code is almost the same as the example at the top. The difference is that this code contains autostart="true", which means that the music playlist will start playing as soon as the page loads.

   Here's an example.

   <embed name="music_playlist" src="/music/music_playlist.m3u" width="300" height="90" loop="false" hidden="false" autostart="true"> </embed>

Other Options

The above example uses probably the simplest method of adding a playlist to a website or blog. It uses the <embed> tag to play a playlist file. This method can have its issues, as it requires the right browser plugin to be installed. Users without the correct browser plugin won't be able to view your playlist.

I would've preferred to use the <audio> tag, but it doesn't work well with .m3u files. However, you can combine the <audio> element with JavaScript to create a playlist. There are many examples of this on the web, such as this one and this one.

Another option is to use an app, such as Amazing Audio Player to build your playlist within a graphical interface, then publish it when you're done. These apps will automatically generate the HTML and JavaScript for the playlist.

Also, as mentioned, here's how to create a playlist in WordPress.