HTML5 Audio Behaviour and Support in iOS and Android

Few months back I was developing an HTML5 game where I really struggled with adding and playing the different sound/audio effects properly across different browsers and platforms, especially in mobiles and tablets. As I made some progress, I decided to document the support and behaviour of HTML5 Audio in mobile environments – iOS and Android – based on my trials.

Playing Multiple Audio Files

On iOS 5 you cannot play more than 1 audio file. Playing subsequent audio files will pause the previous ones.

What's the one thing every developer wants? More screens! Enhance your coding experience with an external monitor to increase screen real estate.

Things have gotten better with iOS 6, but it’s still glitchy. Multiple audios will work in parallel only if all the data of all the audios have been loaded, else the ones whose data have not been loaded will simply pause on subsequent audio plays. Tested in Safari and Chrome. With iOS 5, even if the data loads entirely, it will still pause previous audios.

Another thing noticed on iOS 6 Chrome is that, not all audios may loop. I tested 2 audio files, where the one that comes after the other (in the HTML code) loops fine. Order of playing doesn’t matter in this case.

While testing in iOS 6 I also found that the audio gets choppy (abrupt pauses for a second or two in between) several times. It’s just not smooth enough at times.

Similar behaviour in Android chrome and stock browser. They cannot play multiple audio files at the same time. Playing one stops the other just like iOS 5, whether entirely loaded or not. Tested in the emulator on the following versions – 4.0, 4.0.3, 4.1.2, 4.2 – on different devices. Also tested on real devices like S3 and sony ericsson both with jelly bean and ICS.

Audio Streams will Not Load in Mobile Browsers

When the webpage loads, mobile browsers (Safari/Chrome in iOS 6 and below and Chrome in Android – jelly bean) do not download the audio streams, unless the user initiates an action like onclick or ontouchstart. They simply keep the audio files pending (checked in dev tools network tab in android).

Hence, this piece of code would do nothing on the aforementioned mobile browsers (will be just silent) while play fine on desktop browsers:

var audio = document.querySelector('audio#game_music');
audio.play();

Features like preload and autoplay (as attributes in the audio tag) don’t work either. Sad.

Emulating clicks, i.e., play()ing inside click event handlers is not a solution either.

Audio Delays

On iOS 5 you will notice a slight delay on playing an audio file. This delay can range from some half a second to several seconds. On googling a bit, I found that this happens because iOS instantiates a new audio object everytime it is played.

Slight lags can also be noticed on pause and play in iOS 5 and 6.

Chrome in android along with the stock browser doesn’t seems to be subjected to this same issue. Ofcourse all of these seem to share 1 common problem in this context, they seem to take a bit of time on initial load (since no data is downloaded on page load).

On iPad (fourth generation), sometimes the audio files may not play at all no matter how many times you tap on the play control button on page load, this gets really frustrating. Once, if you’re lucky enough to “download” the audio stream then you’ll be able to play the audios just fine on subsequent webpage requests (about 90% of the times).

Extras

No support for HTML5 Audio in Safari (5.1.7) on Windows, if that matters. Seems like 5.1.7 is the latest version you can get on windows (not 6.0) at the moment.

Add to Home Screen as an App

An important thing to note, when I added my game to home screen as an app, there were almost no problems with audio, except for one – audio won’t download until you play() it. This causes a delay in the sound production causing an improper impression on the user. Player shoots a bullet and the sound comes after a slight delay, thats improper impression.

This happens everytime you start the app from home screen, which means it doesn’t seems to cache across multiple restarts.

Conclusion

There are definitely few other quirks of lower importance that I haven’t discussed but overall the current state of HTML5 Audio support in Mobile browsers is quite limited. There are some informative comments related to this same topic in the source files of SoundJS if you’d like to read.

Note: I could be wrong somewhere, feel free to correct me or share more information in the comments.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Author: Rishabh

Rishabh is a full stack web and mobile developer from India. Follow me on Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *