Mobile and HTML5 Audio

As a music super listener who listens to thousands of albums every year, I did a little research on mobile browser HTML5 audio support. In HTML5, an audio element represents a sound or audio stream. And the syntax to use it look like below:

<audio src="le_long_de_la_route.ogg" controls preload="auto" autobuffer></audio>

Browser support and current practice
Below is the test result of the audio support in popular mobile browsers.

As shown in the result, the support has be largely inconsistent, this can be quite troublesome for someone doing cross-browser audio streaming, one way you can do it is to use multiple tracks, if a browser can’t recognize a track in the first source tags, it will just try the next one. As we can see from the table above, the most widely support format is mp3, only not supported by Firefox, for Firefox, we can use ogg, so the following code is more cross mobile browser.

<audio controls preload="auto" autobuffer>
  <source src="le_long_de_la_route.mp3" />
  <source src="le_long_de_la_route.ogg" />
</audio>

About polyfills
And you may ask how about browsers don’t support HTML5 audio tags? There are audio polyfills, but generally, I don’t see a point of using polyfills for mobile audio, one reason is because these polyfills are made out of Flash, and Flash Lite is only supported on limited mobile devices like Symbian.

Problems and Future
The current audio element is lack of a client-side API. W3C AUDIO WORKING GROUP was set up to address this issue. The API will support the features required by advanced interactive applications including the ability to process and synthesize audio streams directly in script. You can subscribe to participate in discussion at: public-audio-request@w3.org.

HTML5 audio

References
To learn more about HTML5 Audio in Desktop browsers, you can visit Native Audio in the browser
WHATWG’s official description about audio tag