Audio delay on HTML5 mobile web app

Question

I'm developing a mobile web app using HTML5 & Javascript. The goal is to have a page with buttons that play sound after touch events, using the HTML5 audio tag. But I'm noticing a significant delay between the touch event and the sound being played, even after the audio file has been cached. I think this may be due to the way iOS Safari handles sound but I'm not sure. Are there any solutions or creative workarounds to this issue? How can I minimize the delay between the touch event and playback?

Answer 1

The audio delay may be because of buffering issues in iOS that are there due to cellular data charges. The user has to explicitly trigger the event in order for the content to start being downloaded.

In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.

-https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW1

=== EDIT ===

One potential improvement is to use lower bitrate/ higher compressed audio for mobile products. The quality will, however, be significantly reduced. Use only if it is acceptable in your application.