Change the sound in WebAudioAPI with no user interaction on iOS

Question

I'm using this function to create a sound, which works well on desktop and Android, and works initially on iOS when I use a touchevent to start it. I need to later replace the sound with another sound file, however on iOS it doesn't start - I'm assuming because it needs another user interaction to play the sound.

This is a VR app in a headset so this kind of user interaction isn't possible. Is there another way of replacing the sound or another non-click user interaction I can use like movement?

I've seen this http://matt-harrison.com/perfect-web-audio-on-ios-devices-with-the-web-audio-api/

Which seems to have another solution, but I don't want to pre-load all of the files (they're reasonably big and there's 10 of them) which seems to be a requirement here - plus I use the pause function in the code I have. Are there any easy ways round this?

var AudioContext = AudioContext || webkitAudioContext, context = new AudioContext();

function createSound(filename) {
console.log('createSound()');

var url = cdnPrefix + '/' + filename;
var buffer;


context = new AudioContext();

var request = new XMLHttpRequest();
request.open('GET', url, true);
request.responseType = 'arraybuffer';

// Decode asynchronously
request.onload = function() {
    context.decodeAudioData(request.response, function(b) {
        buffer = b;
        play();
    });
}
request.send();


var sourceNode = null,
    startedAt = 0,
    pausedAt = 0,
    playing = false,
    volume = context.createGain();

var play = function() {

    if(playing || !buffer)
        return;

    var offset = pausedAt;

    sourceNode = context.createBufferSource();
    sourceNode.connect(context.destination);
    sourceNode.connect(volume);
    volume.gain.value = 1;

    sourceNode.buffer = buffer;
    sourceNode.start(0, offset);
    sourceNode.onended = onEnded;

    sourceNode.onstatechange = onStateChange;
    sourceNode.onloaded = onLoaded;
    //sourceNode.loop = true;
    startedAt = context.currentTime - offset;
    pausedAt = 0;
    playing = true;
    $(document).trigger("voiceoverPlay");

    if(isPaused == true)
        pause();
};

function onEnded(event){
    $(document).trigger("voiceoverEnded");
    play();
}

function onStateChange(event){
    console.log('onStateChange',event);
}

function onLoaded(event){
    console.log('onLoaded',event);
}


var pause = function() {
    var elapsed = context.currentTime - startedAt;
    stop();
    pausedAt = elapsed;
    $(document).trigger("voiceoverPause");
};

var stop = function() {
    if (sourceNode) {
        sourceNode.disconnect();
        if(playing === true)
            sourceNode.stop(0);
        sourceNode = null;
    }
    pausedAt = 0;
    startedAt = 0;
    playing = false;
};

var getPlaying = function() {
    return playing;
};

var getCurrentTime = function() {
    if(pausedAt) {
        return pausedAt;
    }
    if(startedAt) {
        return context.currentTime - startedAt;
    }
    return 0;
};

var setCurrentTime = function(time) {
    pausedAt = time;
};

var getDuration = function() {
    return buffer.duration;
};

return {
    getCurrentTime: getCurrentTime,
    setCurrentTime: setCurrentTime,
    getDuration: getDuration,
    getPlaying: getPlaying,
    play: play,
    pause: pause,
    stop: stop
};

}

Answer 1

You need a touch event for each sound.

I ended up using SoundJS which is much better.