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.
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
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();
autoplay (as attributes in the
audio tag) don’t work either. Sad.
Emulating clicks, i.e.,
click event handlers is not a solution either.
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).
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.
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.