Using html audio with IE: MEDIA12899: AUDIO/VIDEO: Unknown MIME type

Question

Html is following:

<audio id="audioCap" preload="auto" type="audio/wav"></audio>

Js:

$('#audioCap')[0].play();

And setting "src" as follows:

$('#audioCap').attr('src', 'http://blabla/captcha/captcha.wav?' + response);

Where response is an id.

This works well with all browsers except IE versions (9-11) which should also work. I'm getting MEDIA12899: AUDIO/VIDEO: Unknown MIME type. I did some research and found out that it should be a server configuration problem. I captured the network data with the debug tools and checked the response headers. Content-Type is shown as audio/wav which is true. I don't know what else could cause this error.

Answer 1

Unfortunately, its because Internet Explorer doesn't support wav-Files.

In order to get cross-browser compatibility, you'll need to provide the same audio-file in several different formats.

Take a look at the table on this site:

https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats

In order to support IE, you need to add an mp3 or mp4-format.

To provide the correct format for the current Browser, you can use something like this:

var source= document.createElement('source');
if (audio.canPlayType('audio/mpeg;')) {
    source.type= 'audio/mpeg';
    source.src= 'audio/song.mp3';
} else {
    source.type= 'audio/wav';
    source.src= 'audio/song.wav';
}
audio.appendChild(source);

(Source: How can I add multiple sources to an HTML5 audio tag, programmatically?)

Edit: It's worth to note, that you have the same problems with audio, video and fonts.