How to embed your playlist into your website

Yesterday, we learned how to create m3u playlists to stream your mp3 files over your server ondemand. Anytime users open the playlists, the mp3 files will be played for them. But what if you want to skip this step and have the media play directly from the website? It will require your users to have some time of player plugin, and most will. It is a good idea to still provide a download option with a direct link to the m3u file.

To setup an embedded player, type a code snippet such as this into your html file:

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


Replace “music-playlist.m3u” with the name of your playlist. Save the file and then try it out in your browser. Users should now be able to stream mp3 files directly from your website without downloading anything. Since this method still requires a player plugin, you might also consider a Flash player alternative. In the future, HTML 5 audio will also be an option.

Photo: Flickr

How to create a music playlist for your website

Question: How do I stream Mp3s to my website visitors using an m3u playlist?

Answer: Setting up an m3u playlist is very easy to do. Once you have it setup, visitors will be able to listen to your site’s Mp3s either by opening the m3u playlist in a music player or by playing it directly in their browsers (if you embed it in your code).

To begin, do the following:

1. Create an empty text file with .m3u extension (i.e. playlist.m3u)
2. Add a list of the mp3 files with the relative path on your server:

/music/song1.mp3
/music/song2.mp3

3. Add comments proceeded with the #. (optional)

Here is an example:

# Reaching for the Hashmarks by Hashy Hash
/music/reaching.mp3
# Hashmarks for Breakfast by Hashy Hash
/music/hashmarks.mp3

Tomorrow, I will explain how to embed the code in your website.