Firefox and the Wizard of Ogg

by Saul Edmonds

“Rubiks Lodge” by G.LAudio, Firefox and HTML5.

One of the positive features of HTML5 is a simpler system for adding audio to your web page or blog.

No longer is flash, quicktime or WMP required. With HTML5, audio is directly embedded into the web page : no third party plug-ins or javascript needed.

Adding an audio file is now as easy as adding an image.

Who or What is Ogg Vorbis?

Firefox, however, will not play MP3s. Firefox requires all audio files to be converted to the .ogg format. The Ogg Vorbis digital audio compression format is similar to MP3. It is considered to be superior to MP3 in that encoding into .ogg produces effectively smaller file sizes of higher sound quality. Additionally, the .ogg format is patent and royalty free.

Get with Started with Audio in Firefox

HTML5 audio is pretty simple. Follow these steps to get started in Firefox:

  1. As Firefox 3.6 will only support .ogg, all MP3s will need to be converted. Switch Audio File Converter Software is one example of an easy to use multi format audio file converter for PC and Mac. A basic version is available for free download
  2. Embed the audio tag in your code.
  3. <audio id=”player”></audio>
  4. Provide the source audio file:
  5. <source src=”audio.ogg”/>
  6. Play Sound
  7. You could autoplay the audio on load with a simple attribute autoplay like this:
  8. <audio id=”player” src=”audio.ogg” autoplay></audio>

Simple play and stop functions could be assigned as onclick event of buttons as follows:

  • To the play() function of the audio object:
  • http://document.getElementById(“player”).play();
  • To stop/ pause playing audio:
  • http://document.getElementById(“player”).pause();
  • Firefox has announced that it will continue to support only the .ogg format due to it being a patent and royalty free codec. As HTML5 is implemented we will undoubtedly become familiar to .ogg as an alternative MP3.
by Saul Edmonds