CODEWITHSUNDEEP
.htaccessinternet-explorercross-browsermp3html5-audio
Emanuel Olsson
Emanuel Olsson

Reputation: 193

HTML5 <audio> tag do not work/play in IE10

I have a page where I display some audio .ogg/.mp3-files for listening in the browser (it is purchased products that are being displayed on a "receipt"-page).

The files are super in Chrome, Opera, Safari and Firefox and I can play them, pause, restart and everything.

Today I use a quick fix and forces the browser if IE to simulate IE7 version and then it works, but is of course prtty ugly-looking. I can also skip the <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> and use compatibility view and get same result.

In IE10 Win7 (got latest version) this is displayed and I cannot even press the play-button: http://snag.gy/kANRy.jpg You can have a look for yourself at: http://energyshop.se/testry.php/

Also, myclient uses an older version of IE and its the same for her.

I can also add that if Ihit f12 and switch to compatibility view of IE10 the audio WILL be working and im able to listen to them - but not as soon as I unclick compatibility view.

This is the code used for the audio (TEST code) (and heres: http://pastebin.com/ENrPj8cx a full code version of my pdt.php):

<!DOCTYPE html>
<html>
<head>
<title>Tack för Ert köp!</title>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>

<link rel="stylesheet" type="text/css" href='/phpstyles.css' />

</head>
<body>
<?php


                                echo("<audio id='testry' controls preload='auto'>");
                                echo("<source src='/1.mp3' />");
                                echo("<source src='1.mp3' />");
                                echo("<source src='1.mp3' />");
                                echo("<source src='/1.mp3' type='audio/mpeg' />");
                                echo("<source src='1.mp3' type='audio/mpeg' />");
                                echo("<source src='/1.mp3' type='audio/mp3' />");
                                echo("<source src='1.mp3' type='audio/mp3' />");

                                echo("Your browser does not support the audio tag.");
                                echo("</audio>");



?>
</body>
</html>

and here is my .htaccess: http://pastebin.com/2mz8QwEV

Also, here is my head, meta and doctype for the page (its a pdt.php)

<!DOCTYPE html>
<html>
<head>
<title>Tack för Ert köp!</title>

<link rel="stylesheet" type="text/css" href='/phpstyles.css' />
<script src="http://api.html5media.info/1.1.5/html5media.min.js"></script>
</head>

I know IE9+ supports .mp3 and I have it updated so whats up? Anyone?

Upvotes: 2

Views: 9756

Answers (4)

igz
igz

Reputation: 146

I think this is due to your server not sending back the correct content type for the URLs you provide.

http://energyshop.se/testry.php/1.mp3 gives content type: Content-Type: text/html; charset=UTF-8

http://energyshop.se/1.mp3 gives content type: Content-Type: application/octet-stream

I see that you posted your .htaccess file at Why doesn't the audio tag work in IE?

You likely have the octet-stream type set to prompt downloads. Try setting it to "audio/mpeg" instead, and only set "/1.mp3" as the source on the audio tag.

Upvotes: 0

Joe
Joe

Reputation: 2105

ive seen a very similar issue to this one before. specifically dealing with .ogg and .mp3 file types in IE9 + html5 audio.

problem was resolved by tweaking the MIME type declarations in .htaccess file while the filetypes worked in other browsers just fine - IE9 alone was very picky about what it could work with...

going to investigate further - more info soon.

I am curious what is your hosting situation? (win / linux - self hosted / shared?) i initially assumed shared linux because of the php files as this was the most common scenario.

EDIT:

depending on the hosting situation - (you own the hardware / VPS / or are using shared hosting) some people have found their windows based hosting providers web.config files are in fact overwriting their mime type declarations but i was unable to verfiy as my hosting situation is linux based

after a bit of searching i found a few other documented cases of this issue and some other solutions involved:

for shared / hosted sites, this developer converted his mp3 files to .m4a which had working mime types within IE9

additionally if you are interested this Microsoft Developer Network article - details a bit of the reason why IE9 behaves this way

this stack question is similar to your issue on an Apache Tomcat server

Upvotes: 3

Abhishek C Shelar
Abhishek C Shelar

Reputation: 60

just to add for completeness, add to your audio element the attribute, type and set this as 'mp3' or 'audio/mpeg' not sure which, but at least then you know for sure the page is clearly informing the borwser the type of the resource you are linking to.

If that doesn't work there aren't other options in HTML to define such resources and I would then be looking at support from IE10 as the issue?

Upvotes: 1

Esteban
Esteban

Reputation: 3139

Please check which of this formats are supported on IE: http://textopia.org/androidsoundformats.html. You could be able to inspect with the built-in developer tools and see how it's achieved.

Here, Microsoft Offers a Guide to Using HTML5 Audio.

And here about Unlocking the power of HTML5 .

Upvotes: 1

Related Questions