2 Comments

Getting the HTML5 Audio Tag to Work in Firefox

HTML5 offers new tags that make it easier to embed content into your website, including audio & video. In a recent project, I wanted to embed an .mp3 file, but didn’t want to use Flash or javascript, so I looked into HTML5. To my pleasant surprise, I found the audio tag will “automagically” insert an audio player directly into the browser.

Chrome player:
Firefox player:
Safari player:

It’s pretty well supported in the “modern browsers” (see compatibility chart), but there are a couple glitches.


This is the basic audio tag that I could get to work in any browser:

1
2
<audio src="location-of-file.mp3" controls="controls">
</audio>

It didn’t work in Firefox at first, so I had to specify the .ogg (open source) format for that browser. Without line 2 in the code snippet below, it won’t work in Firefox 3.x (not tested in Firefox 5+). I used this handy little .mp3 to .ogg converter to generate the .ogg file, and voila, it was done.

I expanded the audio tag to include multiple file types:

1
2
3
4
<audio controls="controls">
  <source src="location-of-file.ogg" type="audio/ogg" />
  <source src="location-of-file.mp3" type="audio/mpeg" />
</audio>

Notice that you don’t have to know which browsers support what formats, and then sniff the user agent string for the browser name to decide what to do. Just list your available media, preferred format first, second choice next, and so on. The browser plays the first one it can. Generally speaking, if you provide media in MPEG-4 (basic profile) and Ogg formats, your media can play in browsers that support HTML5. (Notes from the Apple developer library)

To include non-compliant browsers, I added a fallback message:

1
2
3
4
5
6
<audio controls="controls">
  <source src="location-of-file.ogg" type="audio/ogg" />
  <source src="location-of-file.mp3" type="audio/mpeg" />
   <!-- fallback content -->
    Your browser does not support the audio player. <a href="location-of-file.mp3">Download the mp3</a> or use the latest Firefox, Safari or Chrome browsers.
</audio>

Attributes

  • Controls: Turn the player controls on in the browser. I had to include this to get it to work in any browser.
  • Source: The file type (audio/mpeg or audio/ogg) and the location of the file on your web server.
  • Verbiage: “Your browser does not support…” is displayed for non-compliant browsers instead of the player.

Note, in a few browsers, the file is preloaded in the background immediately after page load. For one or two files on a page, this usually isn’t a problem. To turn off this feature, specify preload=”none”, however, some browsers ignore that, like Safari and Chrome. Preload is also ignored if autoplay is specified. To be sure which browsers to which at any given time, double check them at the time of your implementation.

One other glitch in Firefox is the player jumps down what looks like one full player height when clicking on the play button, but I haven’t found a solution to that.

The other HTML5 media tag is video. The only difference between the audio & video tag attributes is the option to specify a height, width, and poster image for video. See full description of the HTML5 audio and video tags.