I have some mp3 audios that I want to play cross-browser. My thinking was that I would use an HTML5 doctype, the html5shim javascript from Google and the html5 <audio> tag and all would be good, but my IEtester for IE8 is telling me that the tag is not supported. Any suggestions?
<!--[if IE ]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
...
<audio controls>
<source src="mp3s/conversation.mp3" type="audio/mpeg" title="A conversation with Mary" />
<source src="mp3s/conversation.ogg" type="audio/ogg" title="A conversation with Mary" />
Your browser does not support the audio element.
</audio>
Hi Murray
Are you using an IE compatibility mode declaration in the mark-up?
(e,g, - <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> )
If so then this removes the html5 shiv mark-up, and causes the, 'tag not supported' error, so it should be removed.
See - http://msdn.microsoft.com/en-us/library/cc288325%28v=vs.85%29.aspx
PZ
Paula - I am not using that markup. But perhaps the visitor has explicitly selected compatibility mode? Am I right in assuming that the html5shiv code should confer the ability for that <audio> tag to work in IE8?
Also, I have an offline comment that this markup causes all the audio files to download before they can be played, resulting in a big delay - is that correct?
Hi Murray
If the user has compatibility mode turned on, then the shiv will not work, The shiv itself does not allow html5 video/audio to work as these require the html5 api. But if you include a flash/quicktime, or other player fallback in the html5 audio definitions, then IE8 or below will play that file
e.g.
<audio controls preload="auto" autobuffer>
<source src="your_file.mp3" />
<source src="your_file.ogg" />
<!-- now include flash fall back here from Dw's insert media -->
</audio>
Strictly speaking one should check for the html5 audio being supported using minimizer, but as the browser only plays the first one it finds that is supported, I tend not to bother with this myself.
The downloading of all the audio, (and video) files is an old bug that has been fixed in all the html5 aware browsers, but for IE8 it does still occur in those that have not been updated, (IE7 or below obviously have no update to fix the problem).
In defense of IE, I will point out here that Safari on iOS devices does still download all image files that are included in all media-queries even when the media-query is not relevant to that device, so such problems are not just limited to IE when it comes to downloading unwanted files.
PZ
North America
Europe, Middle East and Africa
Asia Pacific