EMBEDDING AN AUDIO FILE - Played in WMP
- Embedding a video file (played in WMP)
- Embedding a flash file (swf) (any flash application)
- Embedding a Quicktime player (mov, qtl, mp4 files)
Here I will show 2 solutions, both good, both valid.
Here is the original code snippet that works in all browsers.
As an example I will use a Windows Media meta file - wax or asx. Since that is designed for streaming, it is more appropriate for embedding than the actual audio file itself. The width and height specified are commensurate with the player controls being shown. Unfortunately Firefox does not show the media information.
NB: This code is for a document with an XHTML doctype. For an HTML doctype or no doctype at all, ALL tags that are closed with a /> MUST be closed with only a >.
<object id="MediaPlayer" width="301" height="145" standby="Loading Windows Media Player components..." data="audio-file.wax" type="application/x-mplayer2" title="Title of this audio object"> <param name="filename" value="audio-file.wax" /> <param name="height" value="145" /> <param name="width" value="301" /> <param name="autoStart" value="1" /> <param name="autoPlay" value="1" /> <param name="AnimationatStart" value="0" /> <param name="showdisplay" value="1" /> <param name="TransparentAtStart" value="1" /> <param name="ShowControls" value="1" /> <param name="ShowStatusBar" value="1" /> <param name="bgcolor" value="#000000" /> <param name="loop" value="0" /> <em>Description of this audio object</em> </object>
Please note this little peculiarity: normally parameter values set to "true" or "false" are equivalent to setting them to "1" or "0" respectively. In Firefox, for some inexplicable reason, using
<param name="autoStart" value="0" />
<param name="autoPlay" value="0" />
works as intended (i.e. not to autostart or autoplay) whereas
<param name="autoStart" value="false" />
<param name="autoPlay" value="false" />
does not, thus it will still autostart/autoplay regardless of the value used. In fact this same "logic" or lack thereof appears to apply to all the other parameter values in Firefox, so I've opted to use the numeric values for all of them.
Incidentally it appears that it's not necessary to specify both autostart and autoplay and that autostart alone is sufficient. In the end, setting both autostart and autoplay to the same value seems to be the best option. Autoplay appears to be associated with Quicktime Player (thus probably not relevant for WMP).
An example of a lo-fi embedded streaming audio file (the original audio clip is here):
In the above example the assumption is that the necessary plugin is installed in the browser. That in itself is a challenge in all browsers other than IE, but that is a different problem. There exists a Windows Media Player for the MAC as well, so Windows Media files need not be avoided. They are excellent at lower bitrates (i.e .less than 128kbps) - thus can be streamed most adequately by using the pseudo-streaming techniques described before.
An update in May 2006 in the way Microsoft IE6 handled the object and embed tags brought about a very annoying phenomenon which required an additional click to activate the control (for any type of embedded object: Macromedia Flash, Windows Media Player, Real Player, Quicktime, Java applets, PDF files).
This problem has been corrected subsequently by MS, but the methods described here remain valid.
The definitive solution is WMPObject, an adaptation of the SWFObject script for embeded Flash, to work with WMP this time, and developed by Kovan Abdulla of www.imetasoft.com.
Two scripts are to be included in the head section of the web page: WMPObject.js and myWMPlayer.js. Both are available for download as a zip file here.
Right after closing this div, place another simple script which will serve to insert the WMP audio object.
If you guessed that this is the same solution as for playing video in an embedded Windows Media Player, you're right!
NB: These scripts are a work in progress. Please revisit this site in order to find the latest versions. Also please let me know of any limitations or bugs you may have found, whether concerning differnt operating systems or browsers than what I have been able to test myself.