WEBADO Webhosting

We'll Help You Get Your Own Place on the Web

Webhosting and Design in Canada - Webado
Webhosting and design in Canada - WEBADO, Web-Ah-Do, Web-I-Do see www.webado.com

EMBEDDING AN AUDIO FILE - Played in WMP

See also:

Back to EMBEDDING MEDIA ON A WEB PAGE ...

Here I will show 2 solutions, both good, both valid.

The WMP Solution Based on the Satay Method

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):

Song Leon's and Lilia's Theme by Melina Soochan

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.

Important Notice

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.

Several workarounds had been proposed, all of which I found unacceptable due to their very high complexity of implementation and the fact that they only work in javascript - plus all catered only to Flash.

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.


The WMPObject Solution

This solution is extraodinarily easy to use. It requires javascript for the Windows Media Player to be viewed, which is a reasonable requirement. In the absence of javascript, alternate content is served, which is highly recommended in any case.

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.

In the body of the page, in the place where you want the audio file to be displayed, open a <div id="my_audio_id"> (and provide the alternate content to be shown if javascript is not enabled.

Right after closing this div, place another simple script which will serve to insert the WMP audio object.

  
<div id="my_audio_id">
   <p>This content is what is displayed instead of the WMP object 
   itself. It can be text, an image, anything that's appropriate.
   It will all be replaced by the WMP object if javascript is enabled.
   It can be placed in a defined height div with scrollbars as well.
   </p>
</div>

  <script type="text/javascript">
<!--
// this script ultimately replaces the image in the 
// div id="my_audio_id" above by the WMP object
// let's get this audio played 
// We need to provide values for: 
//          myplayerid,myfile,width,height,showcontrols,	
//          showdisplay,showstatusbar,autoplay,autostart 
// the full audio player has width=301 and height=145 

// whatever div id you used above for the audio
   var myaudioid = "my_audio_id"; 
   
   var myfile = "sample-audio.wma";
   var width = 301;
   var height = 145;
	 var showcontrols=1;
	 var showdisplay=1;
	 var showstatusbar=1;
	 var autoplay=1;
	 
// autostart should be set to the same value as autoplay
     var autostart=1; 

 	 myWMPlayer(myaudioid,myfile,width,height,showcontrols,
                showdisplay,showstatusbar,autoplay,autostart); 
// --> 
</script> 

Here are some examples using WMPObject. The second example, for audio, has been coded this way.

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.

Back to EMBEDDING MEDIA ON A WEB PAGE ...

 

Top

Is my on-line support useful?

If you'd like to make a donation to let me continue to offer online help, I will gratefully accept it.

 
0.00  seconds run time

Modified on: 2014-02-07