Web Audio API and mobile browsers

Posted by Michael on Stack Overflow See other posts from Stack Overflow or by Michael
Published on 2014-06-12T03:22:24Z Indexed on 2014/06/12 3:24 UTC
Read the original article Hit count: 218

Filed under:
|
|
|
|

I've run into a problem while implementing sound and music into an HTML game that I'm building. I'm using the Web Audio API, loading all the sound files with XMLHttpRequests and decoding them into an AudioBufferSourceNode with AudioContext.prototype.decodeAudioData(). It looks something like this:

var request = new XMLHttpRequest();
request.open("GET", "soundfile.ogg", true);
request.responseType = "arraybuffer";       
request.onload = function() {
    context.decodeAudioData(request.response)
}
request.send();

Everything plays fine, but on mobile the decodeAudioData takes an absurdly long time for the background music. I then tried using AudioContext.prototype.createMediaElementSource() to load the music from an HTML Audio object, since they support streaming and don't have to load the whole file into memory at once. It looked something like this:

var audio = new Audio('soundfile.ogg');
var source = context.createMediaElementSource(audio);
var mainVolume = context.createGain();
source.connect(mainVolume);
mainVolume.connect(context.destination);

This loads much faster, but the audio volume isn't affected by the gain node. Works fine on desktop, so I'm assuming this is a bug/limitation of mobile Chrome (testing on Android).

Is there actually no good, well-performing way to handle sound on mobile browsers or am just I doing something stupid?

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about html5