Search code examples
jqueryhtmlgoogle-chromefirefoxogg

Having trouble with HTML5 audio on Firefox

Thanks in advance for taking the time to read my question.

I'm building an application where I am integrating HTML5 audio with jQuery. On Chrome, it plays! On Firefox, it doesn't..

I have both .mp3 and .ogg files and have writted the audio tag as follows:

<audio id="drop-sound">
    <source src="music/water-droplet-1.mp3" type="audio/mp3" />
    <source src="music/water-droplet-1.ogg" type="audio/ogg" />
</audio>

My jQuery then plays this as follows:

//drop sound
var audioDrop = $('#drop-sound')[0];

//play drop
audioDrop.play();

Any help would be appreciated!

Solution

  • I have a few ideas that might help you fix the problem.

    The first one is to change the audio tag to look like this. 

    <audio id="drop-sound">
  <source src="music/water-droplet-1.ogg" type="audio/ogg" />
  <source src="music/water-droplet-1.mp3" type="audio/mpeg" />
    Your browser does not support the audio element.
</audio>

    Use type audio/mpeg instead of audio/mp3

    The second is to change the javascript to be

    document.getElementById('drop-sound').play();

    This is faster then setting a variable and then telling it to play.

    The last thing is to check that your server is sending the correct MIME types. Here is a tutorial explaining this.