Javascript Safari / IOS 15 - 14 上的音频上下文不再工作

Question

Recent, IOS/Safari upgrade seems to broke web audio api...

Look here simple code that work before on IOS and safari but since upgrade thats dont work anymore..by the way it work on firefox, edge, chrome.

https://www.mylooper.com/debug.html

    var url  = 'https://www.mylooper.com/static/btf_10_loop1.aac';
    var context = new AudioContext();
    var source = context.createBufferSource();
    
    //connect it to the destination so you can hear it.
    source.connect(context.destination);
    /* --- load buffer ---  */
    var request = new XMLHttpRequest();
    //open the request
    request.open('GET', url, true); 
    //webaudio paramaters
    request.responseType = 'arraybuffer';
    request.onload = function() {
        context.decodeAudioData(request.response, function(response) {
            /* --- play the sound AFTER the buffer loaded --- */
            //set the buffer to the response we just received.
            source.buffer = response;
            source.start(0);
            source.loop = true;
        }, function () { console.error('The request failed.'); } );
    }
    //Now that the request has been defined, actually make the request. (send it)
    request.send();
</script>

Lot of library is impacted like howler js, tuna js... but i dont know if this "bug"/"feature" may be fix one day...

By the way, for now how do a perfect audio loop with JS now on Safari / IOS?

Thanks a lot, this thing driving me crazy...

Answer 1

What do you mean by "broken"?
If it means that audio does not start playing with this warning, you should call source.start(0) after user's gesture.

The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. 

For Example, call request.send() in some button's onclick function.
Or, wrap all your code in some button's onclick function.

const button = document.getElementbyId("foo");
button.oncklick = () => {
    var url  = 'https://www.mylooper.com/static/btf_10_loop1.aac';
    var context = new AudioContext();
    var source = context.createBufferSource();
    
    //connect it to the destination so you can hear it.
    source.connect(context.destination);
    /* --- load buffer ---  */
    var request = new XMLHttpRequest();
    //open the request
    request.open('GET', url, true); 
    //webaudio paramaters
    request.responseType = 'arraybuffer';
    request.onload = function() {
        context.decodeAudioData(request.response, function(response) {
            /* --- play the sound AFTER the buffer loaded --- */
            //set the buffer to the response we just received.
            source.buffer = response;
            source.start(0);
            source.loop = true;
        }, function () { console.error('The request failed.'); } );
    }
    //Now that the request has been defined, actually make the request. (send it)
    request.send();
}

This is feature described here. https://developer.chrome.com/blog/autoplay/#webaudio
So it will not be fixed.