HTML5 ‘Audio’ is a native tag in HTML 5 and plays the audio linked file in a browser without using a third party plugin such as Flash.
Their are 3 formats that are used in HTML 5 Audio and are .mp3, .m4a AAC also known as H.264 format (which is the audio component of mp4) and .ogg or .oga – these are supported in the following browsers:
mp3
Safari 5+
Internet Explorer 9+
Edge 12+
Chrome 6+
Firefox 22+
The only browser not supported is Opera Mini
m4a AAC MP4
Safari 5+
Internet Explorer 9+
Edge 12+
Chrome 6+
Firefox 22+
Firefox 22+ needs the aac in a mp4 container and have the browser have the codecs installed.
ogg/oga
Firefox 4+
Edge 17+
Opera 10.6+
Chrome 6+
No Internet Explorer/Safari or Opera Mini support
With mp3 and m4a only one of these formats is needed as they are supported in the same browsers, existing audio files in mp3 just keep as is, but moving forward encode all new audio to m4a (AAC MP4).
The code is opened and closed like so:
<audio controls preload="none" style="width:480px;">
<source src="path-to-m4a.m4a" type="audio/mp4" />
<source src="path-to-oga.oga" type="audio/ogg" />
<p>Your browser does not support HTML5 audio.</p>
</audio>
<p>
<strong>Download Audio:</strong>
<a href="path-to-m4a.m4a">M4A</a>,
<a href="path-to-oga.oga">OGG</a>
</p>
So the tag is opened, controls are chosen, preload option is set {auto, off, none }, width of the control bar is set. The the 2 source formats are set .m4a then .ogg so both browsers are catered for. The example above also allows for a text fallback with descriptive text wrapped in the <p> tag so if the browser does not support HTML5 that text will display. Also download linka are also displayed wrapped in the 2 <a> link tags.
Encoding to mp3 m4a and oga
Audio Convertor
To encode your audio to one of these formats you can use a number of applications, one free one that can encode to all formats is Audio Convertor by Media Human.
To start the encoding launch the app, drag your media in the plaeholder and choose the format and start the conversion. This works great for .oga and .mp3 and .m4a aka AAC conversions.
iTunes
iTunes also offers some converting options in particular converting to .m4a AAC MP4 files, select a file in iTunes in mp3 and right click or Advanced Menu… “Create AAC Version” to make a .m4a file.
HTML5 Audio Browser Web Server Errors
To enable your web server to support the audio formats you need to ensure that the web server such as Apache can serve the appropriate file formats – if some browsers get media errors, add the following mime types to the ‘.htaccess’ at the root web serving folder.
