CODEWITHSUNDEEP
jqueryhtmlgoogle-chromefirefoxogg
wilcode
wilcode

Reputation: 625

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!

Upvotes: 0

Views: 1069

Answers (1)

Blake Plumb
Blake Plumb

Reputation: 7199

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.

Upvotes: 1

Related Questions