How to stream music or audio from your website
| Article by Nunzio Fartalone (Nunzio390) *Note: this article deals with streaming audio. For video, refer to these other articles: 1. How to stream video from your website in a separate window 2. Using IFRAMES for Embedded Video |
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).
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>
<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.
No comments:
Post a Comment