This article will show you how to stream MP3 or WMA music or audio on a web page using Windows Media Player object and embed controls (for cross-browser compatability). This will allow
large sound files to be streamed as they are played, and will work perfectly in all major browsers (eg: MSIE, Netscape/Mozilla, and Opera browsers).
Individual Track Streaming MP3
Example
| Track 1 = Bon Jovi - Mystery Train |
Click the PLAY button above
to start the stream
|
|
Multiple Track Streaming MP3
Example
| Track 1 = Lindsey Buckingham - Big Love |
| Track 2 = Pink Floyd - Comfortably Numb |
| Track 3 = Paul McCartney - Heart Of The Country |
Click the PLAY button above
to start the stream
|
Look at the Multiple Track Streaming Example (36 track playlist) on the main page of my site
to see another more detailed and practical example / application of the same streaming technique described in this article.
Another example where a variation of this streaming technique is used is within my Automated Jukebox
(22 songs). When the Automated Jukebox starts you can either allow the jukebox to automatically advance and play through each song in sequence
without user intervention, or you may jump to any song you like by clicking on the respective song link. Although not covered in this article (it's an entirely different script), lyrics for each song
that plays within the Automated Jukebox are displayed in an auto-scrolling iframe as well.
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 or JGsoft's EditPad
(as I use).
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.
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 ... |
|
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 you would rather have the site visitor press the play button to start/stop the music/audio,
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. |
O
OR:
To stream MP3's on a page you will need to have an MP3 player like WinAmp, Windows Media Player, or Real Audio Player. The MP3 will stream as it loads on the page and will allow for longer larger
sound files to be played.
1. Save your MP3 file to the same directory where you will be playing the sound from, or a sound directory which you know the URL for already,
2. Open up a notepad by clicking Start => Programs => Accessories => Notepad
3. Type in only the exact Address or URL of your MP3 file.
- Type it in as simple as this:
http://www. domain .com/ sound/music .mp3
where the domain is your domain, the sound folder is where you placed your MP3, and the music.mp3 is your mp3 file.
Save this file as music.m3u . Upload this file into the directory where you will place your sound.
4 . Open your page up in an editor such as Notepad that will allow you to edit the code on the page.
5. Insert the following code into the HTML code of your page for a clickable link to stream by using this:
Clickable player and doawnload this file 
by right clicking it and save to yur directory:
Or you can embed with this:
Or you can embed for both IE and Netscape with this:
classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715"
standby="Loading Microsoft Windows Media Player components..."
TYPE="application/x-oleobject" width="239" height="179">
pluginspage="http://www.microsoft.com/isapi/redir.dll?prd=windows&sbp=mediaplayer&ar=Media&sba=Plugin&"
SRC="http://Yourdomain.com/sound/music.m3u"
Name=MediaPlayer
ShowControls=0
Width=2
Height=2