EMBEDDING AN AUDIO FILE

See also:

• Embedding video file
• Embedding a flash file

Back to EMBEDDING MEDIA ON A WEB PAGE ...

Here I will show 2 solutions, both good, both valid. The recommended solution for getting rid of the "Click to activate this control" message in IE is lower on the page.

Here is the original code snippet that works in all browsers, except as noted above about MSIE.

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 then 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.

The Recommeneded 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. Notice how you will no longer get that message from MSIE to click to activate the control.

If you guessed that this is the same solution as for playing video in an embedded Windows Media Player, you've just won!

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.

• Embedding video file
• Embedding a flash file

Back to EMBEDDING MEDIA ON A WEB PAGE ...

Top