AudioContext not working on Safari but working on Google Chrome

Question

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 but safari.

Answer 1

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')
// ...