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: 292
        
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