HTML5 audio not working on Firefox

Question

Works fine on Chrome. Moreover, I'm using an ogg file so that's not the problem. I'm running on the latest version 9.0.1. HTML5 audio is supposed to be supported by both Chrome and Firefox.

<audio id="audio">
  <source src="audio/Your_Hand_In_Mine.ogg" type="audio/ogg" />
  <source src="audio/Your_Hand_In_Mine.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

Answer 1

Most servers (including those used by GoDaddy) by default don’t serve the appropriate MIME Types for OGG files. That being the case, you’ll need set the appropriate MIME Types for OGG files if you want HTML5 audio players to work correctly in Firefox. So for an Apache server, you would need to add the following to your .htaccess file:

AddType audio/ogg .oga
AddType video/ogg .ogv
AddType application/ogg .ogg

Evidently, other browsers will guess the MIME Type based on file extension if a MIME Type isn’t served.

If you want more info about this, check this page on the Mozilla Developer Network: https://developer.mozilla.org/en/Configuring_servers_for_Ogg_media

Answer 2

http://support.mozilla.org/en-US/questions/758978 I found this useful in my case, since I had the proper mime types and still no luck:

You can't play MP3 files with such a code in Firefox. See https://developer.mozilla.org/En/Media_formats_supported_by_the_audio_and_video_elements

<audio controls="controls"> 
<source src="http://www.kevinroseworld.com/Music/OkaVanga/OkaVanga/BajeLaCalle.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

You will have to use a normal object element to play that song in Firefox. You can look these as an example:

<object data="music.mp3" type="application/x-mplayer2" width="xxx" height="xxx"><param name="filename" value="music.mp3"></object>
<embed type="application/x-mplayer2" src="file.mp3" height="xxx" width="xxx" >