Playing Audio (Part 2)

Audio Formats The vast majority of internet audio files exist in one of three different formats: MP3 (files have an .mp3 extension): The best known and most-used platform Efficient compression of files Can contain embedded metadata, such as artist, title, album, track number, etc. Disputed patent status, making its use risky for commercial applications Ogg Vorbis (files have an .ogg extension): Lesser known platform and still not supported by many devices Can contain metadata Public domain and free to use WAV (files have a .wav extension): Widely supported platform created by Microsoft and IBM No compression, resulting in very large data files Can contain metadata but this can cause player problems Patented and not free to use

Browser Support for Audio Types Here's where things get complicated. Each major browser has its own level of support for the different audio formats: Audio File Format Support MP3 Ogg Vorbis WAV IE 9.0+ No Firefox No* 3.6+ Chrome 5.0+ 8.0+ Safari 3.1+ Opera 10.5+ 11.0+ *Firefox added MP3 support in version 21.0, but only for those using the Windows 7 (or later) platform. As we see, no single audio format is supported by all major browsers. If we use just one format on our site, a significant portion of our audience will not be able to play the audio.

Example Browser Support Problem In our previous example, we saw how things looked in IE and Chrome (which support the MP3 format) for the web page that played our favorite song: <p>Listen to my favorite song:</p> <audio src="audio/song.mp3" controls></audio> Chrome 25.0 IE 9.0 What we didn't see was how the same page looked in Firefox 19.0, which does not support the MP3 format: Firefox doesn't even do us the courtesy of showing a broken box or displaying an error message. It just ignores the unplayable file completely. Firefox 19.0

Solving the Support Problem The solution is to set up a fallback system by offering audio clips to the browser in more than one format. If a browser does not support the first format offered, it will skip over that one and try subsequent formats, until it finds one it can play. <p>Listen to my favorite song:</p> <audio controls> <source src="audio/song.mp3"> <source src="audio/song.ogg"> </audio> Notice that we removed the src attribute from the <audio> element and used the new HTML5 <source> element. By skipping over the MP3 file and using the Ogg Vorbis format, Firefox can now display and play the audio file correctly. Firefox 19.0 Though we could have done so, we have not added a WAV file as a secondary fallback. Many browsers support the format, but .wav files are just so large that they become impractical to use once an audio clip goes beyond a few seconds in length.

Adding MIME Type Definitions A MIME type is a short piece of information that tells a browser what format a file is in. In the great majority of cases, browsers can discern a file format without any assistance, but from time to time problems arise. As a web programmer, it's good practice to define the MIME type for all audio files: Audio Format MP3 Ogg Vorbis WAV MIME type type="audio/mpeg" type="audio/ogg" type="audio/wav" <p>Listen to my favorite song:</p> <audio controls> <source src="audio/song.mp3" type="audio/mpeg"> <source src="audio/song.ogg" type="audio/ogg"> </audio> Don't confuse these similar-looking items between the quotes. The "audio/song.ogg" in the src attribute refers to an actual file folder and file name on the web server. The "audio/ogg" in the type attribute is the standard text to inform the browser of what file format to expect, but doesn't refer to an actual location.

Creating Fallback Audio Files (1) If our original audio files are in MP3 format, we will need to create an Ogg Vorbis version of each audio file. For a large number of files, we would want to use a software tool, such as Adobe Media Encoder. But for a small number of files, many websites offer a free conversion tool. One such example is online-convert.com: The site can convert audio and video files from numerous formats to any other format. Let's convert the song.mp3 file stored on our local hard drive to the .ogg format.

Creating Fallback Audio Files (2) Once the site completes the conversion, a confirmation screen and download window will appear. We can now save the new Ogg Vorbis file to our local drive. When all the MP3 files for our site have been converted, we can copy the new Ogg Vorbis files to the appropriate folder on our web server.

Final Fallback Once a modern browser that recognizes the <audio> element reaches an audio format it can play, it will ignore all other content up until the closing </audio> tag. An older browser, though, will ignore the unknown <audio> and <source> elements and process any other content it encounters. We can exploit these behaviors to create a final fallback for older browsers: <p>Listen to my favorite song:</p> <audio controls> <source src="audio/song.mp3" type="audio/mpeg"> <source src="audio/song.ogg" type="audio/ogg"> <p>Unfortunately, your browser cannot play this audio.</p> </audio> Instead of seeing nothing, the user will receive the message informing them of the problem. However, this is not an ideal solution for our visitor, who will still be unable to hear the song. Let's give them a more functional fallback. IE 8.0

Improved Final Fallback Let's change the fallback line of code to be an <embed> element that loads a player for the song: <p>Listen to my favorite song:</p> <audio controls> <source src="audio/song.mp3" type="audio/mpeg"> <source src="audio/song.ogg" type="audio/ogg"> <embed height="100" width="200" src="song.mp3" autostart="false"> </audio> This is a much better solution for our viewers using older browsers. Though it calls on an external or plug-in player, at least they will see a fully functioning page and be able to play the song. The <embed> element was deprecated (declared obsolete) back in HTML 4.01 but has been brought back in HTML5 and will now pass validation. IE 8.0