Wednesday, May 09, 2012

Playing an audio file with different sources.

Let’s say you wanted to provide audio in both Ogg Vorbis and MP3 formats to support
Firefox, Chrome, Opera, Safari, and IE9. You can do this by using the source
element in conjunction with the audio element. The code would look like this:
<audio controls>
<source src=”sayHello.ogg” type=”audio/ogg”>
<source src=”sayHello.mp3” type=”audio/mp3”>
</audio>

It couldn’t be easier!
Naturally, you can add a WAV file format too (should you want to):
<audio controls>
<source src=”sayHello.ogg” type=”audio/ogg”>
<source src=”sayHello.mp3” type=”audio/mp3”>
<source src=”sayHello.wav” type=”audio/wav”>
</audio>
You can incorporate any of the attributes mentioned earlier here as well. So
making whichever source the browser chooses to play automatically would simply
require this code:
<audio controls autoplay>
<source src=”sayHello.ogg” type=”audio/ogg”>
<source src=”sayHello.mp3” type=”audio/mp3”>
<source src=”sayHello.wav” type=”audio/wav”>
</audio>
To support browsers that don’t support the HTML5 audio element, you’d follow
the same tactic, but the fallback is different.