Play HTML audio in Internet Explorer?

Question

I have this html and js which I'm using to play some audio:

HTML

<div id="audio-clips">
    <audio src="/audio/cha-ching.wav" type="audio/wav" id="audio-cha-ching">
</div>

JavaScript

var sfx = $("#audio-clips #audio-cha-ching")[0];
sfx.play();

This is failing in IE 8, due to it not recognising the "play" method. Is there a jQuery audio-playing method which works cross-browser, with the same code? I'd rather do that then try to fall back to some IE-specific solution (as browser-specific solutions are always brittle).

Answer 1

Encode your audio in mp4 format, instead of wav. This works for me in IE 11.

Answer 2

HTML5 support on IE started on IE9 :(.

By the way, I am not sure if WAV is played by IE(I would not say so): http://en.wikipedia.org/wiki/HTML5_Audio

Fallback solution for HTML and legacy browsers

Answer 3

The audio tag is available in Internet Explorer 9 and above. You can check this using Can I Use - Audio.

The wav format is supported by Firefox 3.6+, Safari 5+, Opera 10.5+ and Internet Explorer 9+ on the audio tag. You would need to add an MP3 source in addition to the wav source to get Chrome support.

To get backwards compatible support, you use the following - Flash element omitted for brevity.

<audio controls preload="auto" autobuffer> 
  <source src="sound.mp3" />
  <source src="sound.ogg" />
  <source src="sound.wav" />
  <!-- now include flash fall back -->
</audio>

Answer 4

I would strongly recommend using howler.js for playing audio files. It has great compatibility across browsers and devices. It uses HTML5 audio when available, and falls back to older technologies when necessary.