Jump to main contentmickwood.com - Website Hosting & Design for Christian Organisations
welcome

How to add streaming MP3's to your Web site

First of all, let's define what 'streaming' actually is. Webopedia defines streaming as 'a technique for transferring data such that it can be processed as a steady and continuous stream. With streaming, the client browser or plug-in can start displaying the data before the entire file has been transmitted.'

In other words, you can watch a movie or listen to a song before the complete file has downloaded. Whilst you are watching or listening to the beginning of the song / movie the remaining data is being transferred (or downloaded) in the background.

It's fairly straightforward to create a streaming MP3. There are 5 steps in the process.

  1. Create your MP3
  2. Create 2 directories
  3. Create a playlist
  4. Create your Web page, complete with relevant link
  5. Upload files to your server

1 - Create the MP3

First of all let me say that I am no expert in the intricacies of encoding sound or video. I find that actually creating the MP3 is the hardest part of the streaming process. Saying that, there is nothing like trial and error, and lots of testing!

I use a freeware Open Source program called CDEX to encode my MP3's. CDEX allows you to encode using a variety of settings. I have read various recommended settings ranging from 16kbps, 11025hz, mono to 32kbps, 44100hz and stereo. The secret is to ensure that the file will download smoothly on your target customers' machine. Obviously the bigger the file the longer the download time and the greater the chance of users experiencing 'buffer-delays'.

Based on my own experiments I recommend using mono every time - stereo doubles file sizes without really improving the sound quality (at least to my untrained ears). Experiment with the other settings - somewhere between 16kbps and 24kbps, 11025hz and 22050hz should do the trick.

2 - Create 2 directories

I recommend that you create 2 directories in your Web site. In my site the directories (or folders) are created at the root level and are called 'playlist' and 'audio'. Of course you can name them something else and they don't have to be at your site root.

3 - Create a playlist

The playlist is basically a simple text file (use Notepad or BBEdit) which includes the full path to each MP3 file you wish to stream. For example, I have a selection of my daughter Alex's music streaming from this site. Each file reference MUST be on a separate line. The playlist file for my daughter's songs is as follows.

http://www.mickwood.com/audio/seeking.mp3
http://www.mickwood.com/audio/perfect_plan.mp3
http://www.mickwood.com/audio/called.mp3
http://www.mickwood.com/audio/eagles.mp3
http://www.mickwood.com/audio/intimacy.mp3
http://www.mickwood.com/audio/more.mp3
http://www.mickwood.com/audio/sorry.mp3
http://www.mickwood.com/audio/sparrow.mp3
http://www.mickwood.com/audio/yours.mp3
http://www.mickwood.com/audio/waiting_praying.mp3

The trick is to save the playlist file in your playlist folder with the extension .m3u. My daughter is called Alexandra so my playlist is saved as alex.m3u

The m3u extension tells your MP3 player to buffer the first part of the song, start playing the song when the buffer is reached, and then continue to download the rest of the song in the background until the whole song has been downloaded. The amount of the buffer is dependent on the size of the file and the users' connection speed.

4 - Create your Web page, complete with relevant link

You can create a new page or use an existing Web page to test if everything is OK. You must remember to link to the playlist file, NOT the actual MP3's. Your link should look something like this.

<a href="http://www.mickwood.com/playlist/alex.m3u">Listen to Alex's new songs</a>

5 - Upload files to your server

You need to upload the m3u file to the playlist folder, your MP3's to the audio folder and your Web page to anywhere in your site. It doesn't actually matter where the Web page is in your site because the link and the playlist contain absolute URL's rather than relative links. If you prefer to use relative URL's you should double-check that the links are accurate.

Now open up your Web browser and test your link. Your MP3 should stream nicely.

Potential Problems

If your MP3's don't stream correctly you should carefully check all your links. Remember that links are case-sensitive. Is every song in your playlist on a separate line? If you are sure that everything is coded correctly and you still cannot get your MP3's to stream then you probably have a 'mime-type' problem.

Mime-types indicate the sort of content which may be delivered from your Web server. Many Web hosts provide their clients with a Personal Control Panel which includes the facility to add mime-types. It's probably a good idea to speak with your Web host anyway and ask them to add the following mime-types.

Mime-Types
Mime-Type File Extension
audio/MP3 .mp3
audio/m3u .mpu
audio/x-mpeg .mp3
audio/x-mpegurl .m3u
audio/x-mpegurl .mp3url

If you are still having problems I suggest you post full details on the Dreamweaver Newsgroup. Happy streaming!

PS. Why don't you have a listen to Alex's songs - she wrote 9 of the songs herself before she was aged 16.

Back to Article Index

Tutorial Index


Resources

Dreamweaver Tutorials

Dreamweaver FAQ

Dreamweaver MX Zone

The Patty Site


welcome | name | hosting | design | content | promote | update | showcase | support
about us | general | articles | accessibility | sitemap | enquiries | feedback | training | consultancy

Welcome Showcase Support Update Promote Content Design Hosting Name