Audio Player
When your browser encounters a list of <source> tags inside the <audio> element, it will attempt to use the first whose coder-decoder, or codec, it supports. (This assumes each <source> points to a differently-encoded file.) If the browser supports many—or all—of the codecs in the list, it settles on the first. Consider the audio player above and the syntax that renders it below:
<audio controls>
<source src="audio/audio.mp3" type='audio/mpeg; codecs="mp3"'>
<source src="audio/audio.ogg" type='audio/ogg; codecs="vorbis"'>
<source src="audio/audio.wav" type='audio/wav; codecs="1"'>
<source src="audio/audio.m4a" type='audio/mp4; codecs="mp4a.40.5"'>
<source src="audio/audio.aif" type='audio/aiff'>
<object width="200" height="20" type="application/x-shockwave-flash"
data="flash-player/player_mp3_maxi.swf">
<param name="wmode" value="transparent">
<param name="movie" value="flash-player/player_mp3_maxi.swf">
<param name="FlashVars" value="mp3=audio/audio-in-flash.mp3">
<p>No Flash player can be rendered because Flash and/or JavaScript is
not enabled or not supported.</p>
</object>
<p>No support found for HTML5 audio.</p>
</audio>
The first file in the list, the MP3 file titled audio.mp3, will be rendered if your browser supports its audio codec. The remaining <source> elements are ignored. If your browser doesn’t support MP3, but does support Ogg Vorbis, or Ogg for short, then Ogg is used, and, again, the remaining <source> elements are ignored. This is repeated for every <source> element down the list.
Testing Various Codecs in Your Browser
Your browser likely supports multiple audio codecs. You can test this by rearranging the order of <source> elements in the code of this document so that different file types appear at the top of the <source> list. For example, list the audio.aif file before the audio.mp3 file and test in Safari, then in Firefox. List the audio.ogg file above them all, then test in all browsers. Et cetera. This will allow you to see—and hear—which browsers support which codecs.
Troubleshooting
HTML5 Audio Player Rendered But No Audio
If a browser-based audio player is rendered when the page is loaded, but hitting the play button doesn’t generate audio, it means that either none of the <source> elements contains a file whose codec is recognized by the browser or that you have a typo in your syntax.
Difference Between HTML5 Audio Player and Flash Player
If you’re unsure whether the audio player is the browser-generated player or the Flash-generated player, remove the controls attribute from the <audio> element. If doing so removes the player, then you’re looking at the browser-based player.
Current Support for HTML5 Audio
As of this writing (12 February 2015), MP3 is supported in all modern browsers. Testing was carried out in Firefox 35 (Mac and Windows 8.1), Firefox Developer Edition 37 (Mac and Windows 8.1), Chrome 40 (Mac and Windows 8.1), Opera 27 (Mac and Windows 8.1), Safari 5 (Windows 8.1), Safari 8 (Mac), and Internet Explorer 11 (Windows 8.1). This means that if you are doing web development with audio that only supported the latest browsers, you can use MP3 and take the following shortcut:
<audio src="audio/audio.mp3" controls> <p>HTML5 audio is not supported.</p> </audio>
Otherwise, you’ll need to go with some variant of the lengthy example in this tutorial in order to support different audio file types.
Make The Server Aware of Audio Types
The server should be made aware of new audio formats using their MIME types. This is done via AddType directives and can be done at the server level using the server configuration file (httpd.conf) or at the directory level, using a .htaccess file. The former is advised, because the setup is done once by the server. Edit your httpd.conf file and add the following to it, pointing the /path/to/folder/containing/this/project on the first line to the path of your project.
<Directory /path/to/folder/containing/this/project> AddType audio/ogg oga ogg spx ogv AddType audio/mp4 mp4 mp4v mpg4 m4v m4a aac AddType audio/wav wav AddType audio/aiff aif aiff aifc AddType audio/mpeg mpga mp2 mp2a mp3 m2a m3a AddType audio/webm webma weba </Directory>
A quicker, easier, but slower way is to include all the AddType directives to a .htaccess file, then add the file to the directory serving your audio files. (This method is slower because the .htaccess file is loaded each time a document from the folder containing a .htaccess file is requested, and because the presence of a .htaccess file triggers a recursive search for .htaccess files down to the server’s root folder.) There’s a ready-made .htaccess file in this example’s folder.