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>

Solution 1

The solution is to properly convert the ogg file into mp3 or vice versa. The encoding was wrong when I just renamed the .ogg file to mp3, silly me. I used software called "Audacity" and "Switch" to accomplish this.

Solution 2

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

Solution 3

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" >

Solution 4

try using some Audio libraries to deal with HTML5 audios. Because libraries handle various problems regarding html5 audios. Some libraries provide automatic fallback for flash audio if the browser is not supporting HTML5 audio. One of the best library out there is http://www.schillmania.com/projects/soundmanager2/

View more solutions

Comments

[wazz]

have to agree with op's accepted answer. i used an online converter and i could not make any variation of html5 code work in ffox (objects worked). redid the conversion with audacity and all was well.

[SexyBeast]

I guess there is a first time for everything. Including seeing a negatively voted answers as the accpeted answer!

[sova]

I only voted down because this had nothing to do with my actual resolution to the issue. Turns out the Microsoft AAC decoder only works for set sample rates, and playback did not work on windows with firefox in 2020 because of the MSFT AAC decoder. I'm glad you resolved your particular issue.