I cannot seem to get the AudioContext in Safari 15 to function properly. When you initiate it, it is in a running state, but the AudioContext.currentTime never ticks up and nothing plays. All the previous advice covers old versions of Safari where you needed to call resume inside a click handler to get it out of a suspended state, but as you can see below it is running and calling resume does not make a difference.This is the most basic example I could come up with below:
https://codepen.io/thelamer123/pen/vYeLXOm
<html>
<body>
<button onclick="play()">Test Audio</button>
<div id="output"></div>
<script>
async function play() {
var ac = new window.AudioContext();
ac.resume();
var response = await fetch('https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3');
var buffer = await response.arrayBuffer();
ac.decodeAudioData(buffer, onDecoded);
function onDecoded(buffer){
var bs = ac.createBufferSource();
bs.buffer = buffer;
bs.loop = true;
bs.connect(ac.destination);
bs.start(0);
}
var logloop = setInterval(() => {
document.getElementById('output').innerHTML = '';
document.getElementById('output').innerHTML = 'AudioContext State: ' + ac.state + '<br>Current Time: ' + ac.currentTime;
}, 100);
}
</script>
</body>
</html>
So this was a couple things, this example seems to function hit or miss depending on your OS or platform. The advice I would give anyone running into this is to wrap your logic in a button click, do not try to use event capture. Initiate the Audio context at a top level on page load then when the button is pressed do this:
await audiocontext.resume();
console.log(audiocontext);
For some reason to have compatibility you need to not only be inside an async clicked on function but also console log the audio context after resuming it. With Safari 15.1 it seems it can be in a state where it is "running" but not really if you do not do these two things.