OGG Files Causing Errors in HTML5 Audio Player in Firefox

Posted by & filed under Front-End Development.

About a year ago I created an HTML5 Audio Player with Flash Fallback that several developers have used in their sites. It’s not the most robust player, but what it lacks in features it makes up for in simplicity. It plays audio files natively in modern browsers and uses a simple Flash player to backfill audio tag functionality in antiquated browsers. The UI is styled with CSS regardless of whether the browser plays audio natively or via Flash and implementing the plugin is simple enough for novice developers.

Given the simplicity of the player, I was surprised when I recently received an email from someone asking me to help determine why my HTML5 Audio Player wouldn’t work for him in Firefox. He had seemingly configured everything correctly and the player worked in every other popular browser, but he still couldn’t get the player to work in Firefox. As it turns out 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. I had just been lucky that all the servers I used up until this point were already configured to serve the right MIME Types.

If you want more info about this, check this page on the Mozilla Developer Network.

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>