Recently, I noticed that the IOS/Safari upgrade has caused some issues with the web audio API.
Check out this simple code that used to work on IOS and Safari before the upgrade, but now it doesn't work anymore. Interestingly, it still works on Firefox, Edge, and Chrome.
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>
Many libraries are affected, such as Howler.js and Tuna.js, but I'm unsure if this issue will be fixed in the future.
By the way, how should one create a perfect audio loop with JS on Safari / IOS now?
Thank you so much, this problem is really frustrating...