Audio Test Page

Embedding audio with the Object tag

Last update March 2011

This page explores the options for embedding sound in a web page using the object tag to pass strict validation and work on all browsers (solving world poverty may be easier?).

** Internet Exploder 6 users: you may get an active X warning message for each embedded WMP (4 on this page) - to avoid this on your site use javascript to 'document.write' it onto the page or embed it via an external document. **

** Opera 9.5 users: you will not be able to see the quicktime players because they have released it with only limited quicktime plugin compatibility **

Notes:

  1. I have not included codebase tags to download plugins but I have included an alternative direct link (alt: ...) to redirect to the file if the browser cannot handle the object.
  2. This embeds a player that doesn't start playing until the user clicks on play - personally I dislike sites that blast you with music the instant you arrive
  3. I have embedded the source code next to the example text (view the page source) except for the javascript example (2a) where the javascript code is in the HEAD section. Apologies for any discrepancies.

1. Ideal standards compliant generic version

This is the format that should work on all browsers with a simple object tag with MIME type "audio/mpeg" or "audio/x-mpeg" plus a few 'param's. Note the player size is set for media player - quicktime expands to fit horizontally but not vertically.

NB. This only works in IE if the MIME type for "audio/mpeg" points to WMP in the system registry, if it is set for Quicktime then a blank box will be displayed. IE works if the MIME type is "audio/mpg" but this is a non-standard MIME type and other browsers revert to the 'alt'ternative link.

Firefox 3.5 : Quicktime
Safari 3: Quicktime
Opera 9.27: Quicktime / Opera 9.5+: White box with "Plug-in content"
IE 6 : Blank box or Media Player - works on some not on others depending on MIME type settings.
IE 7,8: Media Player
Chrome: Quicktime

alt : mp3/lssopirates.mp3
<object data="mp3/lssopirates.mp3" type="audio/mpeg"  height="46" width="300" >
 <param name="src" value="mp3/lssopirates.mp3" />
 <param name="autoplay" value="false" />               //Quicktime
 <param name="autostart" value="0" />                  //WMP
  alt : <a href="mp3/lssopirates.mp3">mp3/lssopirates.mp3</a>
</object>

2. Media Player for all (with no class ids!)

This was found by accident, it is the above with MIME type "audio/x-ms-wma". Although a WMA file is specified the MP3 file is played correctly.
The MIME type is proprietory MS so it may not work on some non-MS platforms. Although all modern browsers should be able to handle a WMA file some may be confused by the incorrect file type? I thought it was the answer until Chrome came along and messed it up!

This works on my XP/IE6 PC because it forces IE to use media player but version 1 above doesn't work!

Firefox 3.5 : Media Player (* version 2 requires the user to install the wmp 11 plugin)
Safari 3: Media Player (v6!)
Opera 9.27: Media Player
IE 6,7,8 : Media Player
Chrome: Media Player displays but cannot find the file to play it!?

alt : mp3/lssopirates.mp3
<object data="mp3/lssopirates.mp3" type="audio/x-ms-wma"  height="46" width="300" >
 <param name="src" value="mp3/lssopirates.mp3" />
 <param name="autostart" value="0" />            
  alt : <a href="mp3/lssopirates.mp3">mp3/lssopirates.mp3</a>
</object>

2a Javascript combination of 1 and 2

This uses javascript to write the media player into a DIV and chooses the MIME type depending on the browser ("audio/mpeg" for all except IE which uses "audio/x-ms-wma").

Pros:
a) Standards compliant;
b) No windows specific code (CLASSID...);
c) No extra plugins required for Firefox (as in 2 above);
d) No ActiveX warnings because the JS writes the code;
e) Common code can be used across many pages with a 'one-line' javascript call to insert the player and a file description.

Firefox 3 : Quicktime
Safari 3: Quicktime
Opera 9.27: Quicktime / Opera 9.5+: White box with "Plug-in content"
IE 6,7,8 : Media Player
Chrome: Quicktime

function browser()
{
	var b = navigator.userAgent;
	if (b.indexOf("Opera")!= -1)          b = "op";
	else if (b.indexOf("Firefox")!= -1)   b = "ff";
	else if (b.indexOf("MSIE")!= -1)      b = "ie";
	else if (b.indexOf("Netscape")!= -1)  b = "ns";
	else if (b.indexOf("Safari")!= -1)    b = "sa";
	else 	  ;  //	Not known, return userAgent string and ENDIF
	return b;
} // end function browser()

function load(media,desc)
{  
 document.write('<div id="play" name="play" height="150" width="300" style="align:center"></div>');
 var player = document.getElementById('play'); 

 var mimetype = (browser()=="ie" ?  'audio/x-ms-wma' : 'audio/mpeg')
 player.innerHTML = '<object type="'+mimetype+'" data="'+media+'" width="300" height="46">'
 + '<param name="src" value="'+media+'">'
 + '<param name="autoplay" value="false">'
 + '<param name="volume" value="100">'
 + '<param name="autoStart" value="0">'
 + 'alt : <a href="'+media+'">'+media+'</a>'
 + '</object>'
 + '<div style="align:center; font-style:italic">' +desc +'</div>';
} // end function load(media)

Code Notes:
a) The browser function could be shorter but this code is useful for other functions I use.
b) Alternatives: (1) put a toggle link below the player ("click here if you can't see a player" sort of link) which swaps between the 2 options (helps Opera 9.5 users) or (2) force Opera users to use the WMA mime type like IE users: (browser()=="ie" || browser()="op") ? ...


3. Media player for IE, otherwise generic player (usually quicktime)

This specifies windows media player for IE, otherwise it uses standard MIME type (usually quicktime) with exclusion comments for IE because IE4/5/6 can't cope with nested object tag properly.

Firefox 3.5 : Quicktime
Safari 3: Quicktime
Opera 9.27: Quicktime (in the 1st object container) / Opera 9.5+: White box with "Plug-in content"
IE 6,7,8 : Media Player
Chrome: Quicktime

alt : mp3/lssopirates.mp3
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"  height="46" width="300">
 <param name="src" value="mp3/lssopirates.mp3" />
 <param name="autoStart" value="false" />
 <param name="controller" value="true" />
 <!--[if !IE]> <-->
  <object type="audio/x-mpeg" data="mp3/lssopirates.mp3" height="16" width="200">
  <param name="controller" value="true" />
  <param name="autoplay" value="false" />
   alt : <a href="mp3/lssopirates.mp3">mp3/lssopirates.mp3</a>
  </object>
 <!--> <![endif]--> 
</object>

4. IE forced to use quicktime, otherwise generic player (usually quicktime)

This forces IE to use Quicktime using 'classid', otherwise it uses standard MIME type (usually Quicktime) again with with exclusion comments for IE because IE4/5/6 can't cope with nested object tag properly.

NB. If you don't want active X warnings and you don't want to use a 'work-around' (javascript or external document) then this is the best option.

Firefox 3.5 : Quicktime
Safari 3: Quicktime
Opera 9.27: Quicktime / Opera 9.5+: White box with "Plug-in content"
IE 6,7,8 : Quicktime
Chrome: Quicktime

alt : mp3/lssopirates.mp3
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"  height="16" width="200">
 <param name="src" value="mp3/lssopirates.mp3" />
 <param name="autoplay" value="false" />
 <param name="controller" value="true" />
 <!--[if !IE]> <-->
  <object type="audio/x-mpeg" data="mp3/lssopirates.mp3" height="16" width="200">
  <param name="controller" value="true" />
  <param name="autoplay" value="false" />
   alt : <a href="mp3/lssopirates.mp3">mp3/lssopirates.mp3</a>
  </object>
 <!--> <![endif]--> 
</object>

5. External flash plugin

Here I am testing the Google media player which is a flash plugin.

Firefox 3.5 : no player
Safari 3: -
Opera 9.27: - / Opera 9.5+: -
IE 6,7,8 : OK
Chrome: player there but not visible - can't locate sound

</p>
<object data="flashmoviename.swf" type="application/x-shockwave-flash" width="400" height="27">
<param name="src" value="http://www.google.com/reader/ui/3523697345-audio-player.swf" />
<param name="flashvars" value="audioUrl=http://flsso.org.uk/mp3/lssopirates.mp3" />
</object>

Player should be above here.

6. Flash players you can download

These are flash modules you can download and put on your website

Pros:
You have the flash module so it can't diasappear or change name (like the Google one did)
Looks the same on all browsers.
It's free with no adverts.

Testing mini player

See website - you need to download the player_mp3_mini.swf file and put it on your site.

<object type="application/x-shockwave-flash" data="player_mp3_mini.swf" width="200" height="20">
    <param name="movie" value="player_mp3_mini.swf" />
    <param name="bgcolor" value="#000000" />
    <param name="FlashVars" value="mp3=mp3/lssopirates.mp3" />
</object>


Testing Maxi Player

See website for details - this player has lots of controls and options - add extra ones as per the 'showvolume=1' added below using ampersands.
- you need to download the player_mp3_maxi.swf file and put it on your site.

<object type="application/x-shockwave-flash" data="player_mp3_maxi.swf" width="200" height="20">
    <param name="movie" value="player_mp3_maxi.swf" />
    <param name="bgcolor" value="#ffffff" />
    <param name="FlashVars" value="mp3=mp3/lssopirates.mp3&showvolume=1"  />
		
</object>

Please note I have taken this page directly off my old site (written in HTML) and it may not function correctly yet!