How do I stream an MP3 file? PDF Print E-mail
Written by EJC Solutions   
Thursday, 26 January 2006

This tutorial was drafted from a tutorial found here.  It has been modified / adapted to work for users of EJC Solutions hosting.  In order to successfully stream the file and not force the user to download the whole MP3 first, you must have two items.

1. A m3u playlist created for the song/songs you wish to stream.

2. A web HTML page to insert the code to (You can use an exisiting page / blog, or create a whole page just to server this purpose). 

 

TIPS: Website files do not like spaces.  Make sure mp3/m3u files are named without spaces.  You can use underscores or capital letters to break up the words.  Webservers are also case sensitive to file names.

 

Preperation Items

1. Create a folder for all music on your domain(i.e. music).  Do this through an FTP client under your public_html folder or www folder, or through the file management utility in your control cpanel.  (http://www.yourdomain.com/music)

2. Turn indexing On for this folder so you can see all the contents of it with Internet Explorer or your favorite web browser.  This assumes you do not have a index.html, index.php, or index.htm page in the folder you want to have indexing turned on for.  Without an index page, normal folders will throw a forbidden error so people cannot see all the files in that folder. 

a. Login to your cpanel.

b. Under Site Management Tools, click Index Manager. 

c. Click on the "music" folder or whatever folder you want to enable Indexing for.

d. Choose either Simple or Fancy Indexing.  (Both work fine)

e. Test indexing by hitting the URL in your browser.  It will display a directory listing of all files in that folder.

 

STEP ONE: Create an M3U file as a playlist file for the song/songs.

 1. Save your music file to the same directory where you will be playing the music from, or reference a music directory of a remote URL where you know a music file already exists.

2. Open up a text editor such as Windows Notepad (Do not use Wordpad or Microsoft Word.

3. Type in the FULL path to the Web Address (URL) of your MP3 or WMA music file.

If it's an MP3 music file, type it in like this:
http://www.domain.com/music/song.mp3

Or, if it's a Windows Media Audio (.wma) file, type it in like this:
http://www.domain.com/music/song.wma

The above 2 examples assumes that http://www.domain.com is your domain, that the music folder is where your MP3 or WMA file is located, and that song.mp3 and song.wma are the names of your .mp3 and .wma files.

Save this text file with an .m3u (universal playlist) extension.
Example: music.m3u

You can also include several songs (tracks) in one .m3u playlist file if you want to.
Example of one .m3u playlist file containing several songs:
http://www.domain.com/music/song1.mp3
http://www.domain.com/music/song2.mp3
http://www.domain.com/music/song3.mp3
http://www.domain.com/music/song4.mp3


There is no limit to how may songs you can include in an individual playlist. In a playlist with more than one song, each song is buffered and streamed individually. Therefore, it makes no difference how many songs are referenced in one playlist file. Each song will play one after the other without user intervention. Also, in a playlist with more than one song, the site visitor can use the Media Player controls to skip forward or back a track (song) in the playlist, and also has the option of "previewing" a short clip or a series of short clips of each song in the playlist.

 

STEP TWO: Generate the HTML code.

 Once you have created your .m3u playlist, upload the file to the same directory where your music file is located.

1. Open any HTML document (web page) in your text editor, so that you can insert the object/embed Media Player control code into that HTML document.

2. Insert this cross-browser Media Player object/embed code into your web page :

Cross-browser Media Player object/embed code ...

<OBJECT ID="MediaPlayer1" CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab# Version=5,1,52,701" STANDBY="Loading Microsoft Windows® Media Player components..." TYPE="application/x-oleobject" width="280" height="46">

<param name="fileName" value="http://www.domain.com/music/music.m3u">

<param name="animationatStart" value="true">

<param name="transparentatStart" value="true">

<param name="autoStart" value="false">

<param name="showControls" value="true">

<param name="Volume" value="-300">

<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" xsrc="http://www.domain.com/music/music.m3u" name="MediaPlayer1" width=280 height=46 autostart=0 showcontrols=1 volume=-300>

</OBJECT>


All values indicated in blue in the above code can be changed if needed. Autostart settings determine if the music starts playing automatically or not. If you want it not to start automatically, and prefer the site visitor to press the play button to start/stop music, then change both those values to false and 0, respectively. BOTH values must be changed, to ensure that the music plays the same way in all major browsers. Volume settings are just that... sets the volume level. A value of -300 is about mid-range. You can change that too if you like. BOTH values must be changed to be the same values, to ensure that the volume level is the same in all major browsers.

Last Updated ( Friday, 27 January 2006 )
 
< Prev