|
|
|
|
|
|
|
|
How to stream music or audio from your website
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). Working Examples:
Other Working Examples: 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. Instructions for creating the playlist file:
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. Instructions for inserting the Media Player object/embed 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="true"> <param name="showControls" value="true"> <param name="Volume" value="-300"> <embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" src="http://www.domain.com/music/music.m3u" name="MediaPlayer1" width=280 height=46 autostart=1 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 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. |
|
|