2

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?

Emanuel Olsson
  • 183
  • 3
  • 16

4 Answers4

3

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

Community
  • 1
  • 1
Joe
  • 2,085
  • 1
  • 18
  • 28
  • This is the most promising answer so far - not just standard google search answers - which I ofcourse tried them all. Please reply how to tweak that shit! :) – Emanuel Olsson Jun 01 '13 at 20:01
  • Gimme some good input and the 50 is yours - the rest f the answers i got is plain rubbish – Emanuel Olsson Jun 02 '13 at 15:40
  • sorry for the delay, i looked at this a bit more - the issue we resolved was because of a MIME type declared by that projects web hosting company. edit coming in a few minites – Joe Jun 02 '13 at 20:30
1

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 .

Esteban
  • 3,108
  • 3
  • 32
  • 51
  • Well I already tried all of those test-sites with IE and there Iam able to play the .mp3's and as I already written I know IE supports .mp3. Already read the second article, will look into the first one now. – Emanuel Olsson Jun 02 '13 at 14:05
1

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?

Abhishek C Shelar
  • 60
  • 1
  • 1
    Really? I already have is set as audio/mpeg if you look at my code... Idk rly what youre trying to tell me since it is nothing new but my client is not using IE10 but earlier versions and it is not working for her, but did before. – Emanuel Olsson Jun 01 '13 at 19:59
  • I also added duplicate lines for type='audio/mp3' type='audio/mpeg' and simply type='mp3' Youre just trying to get free rep. – Emanuel Olsson Jun 02 '13 at 15:05
  • 1
    Why upvotes, when provided solution just doesn't work!? – Faisal Ashfaq Sep 07 '14 at 13:38
0

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.

Community
  • 1
  • 1
igz
  • 146
  • 6