I know that I need to create audio context after user interaction in Safari. However, the following code still didn't work.
HTML
<button onclick="play">Play</button>
Javascript
function play() {
var AudioContext = window.AudioContext || window.webkitAudioContext
var ctx = new AudioContext()
fetch('MP3_URL')
.then((response) => response.arrayBuffer())
.then((arrayBuffer) => ctx.decodeAudioData(arrayBuffer))
.then((audioBuffer) => {
var source = ctx.createBufferSource()
source.buffer = audioBuffer
source.connect(ctx.destination)
source.start(ctx.currentTime)
})
}
The same code working on Google Chrome bug safari.
Is there anything wrong I am making here? Thank you very much!!
I doesn't really make sense to me, but in this case Safari needs another push to start the AudioContext. Calling resume() right after creating the AudioContext should work.
// ...
var ctx = new AudioContext();
ctx.resume();
fetch('MP3_URL')
// ...