7

I'm running into an issue where calling resume on an AudioContext never resolves when attempting to play audio in Safari. I'm creating an AudioContext on page load, thus it starts in a suspended state.

According to this chromium issue, calling resume will not resolve if blocked by the browser's autoplay policy. I have a click event bound to a <button> that will resume the context if it's suspended. This works in both Firefox and Chrome, and will work in Safari if I change the autoplay settings for the site.

Below is how I would normally resume the context:

await context.resume();

For Safari, I've tried calling resume without waiting for the promise to resolve, and instead register a callback for onstatechange, which is then wrapped in a Promise:

if (window.webkitAudioContext) {
    await new Promise((accept, reject) => {
        this.context.onstatechange = async () => {
            if ((await this.context.state) === "playing") {
                accept();
            } else {
                reject();
            }
         };

        this.context.resume();
    });
}

However, nothing has changed: the Promise never resolves, which means that the context state isn't changing.

Am I missing something?

2
  • faced the same issue today. promise never resolved Sep 9, 2019 at 15:39
  • 1
    I'm not sure why the promise returned by resume() never resolves but your workaround never resolves because it checks for a wrong value. state will be 'running' when the context was resumed successfully. It also is a regular property which does not need to be awaited. The fourth line would then be if (this.context.state === "running") {. Oct 6, 2019 at 19:42

2 Answers 2

6

I finally managed to get audio playing on Safari.

The "fix" was rather simple: I had to call resume within the event handler that is bound to the element being used to initiate playback. In my scenario, I was using Redux with React, so a dispatch would be made, and resuming the context would happen at a later time within another component. I'm guessing that Safari didn't see this as a direct response to a user interaction event, so it kept the context in a suspended state.

1
  • Thanks, this was a life saver after losing whole day behind this!! Apr 3 at 13:28
5

iOS will only allow audioContext to be resumed if it is running within the call-stack of a UI Event Handler. Running it within a Promise moves the call to another call-stack.

Also, audioContext.resume() returns a promise, which must be awaited.

Try this:

onPlayHandler() {
   alert("State before: " + this.audioContext.state);
   await this.audioContext.resume();
   alert("State after: " + this.audioContext.state);
}
1
  • 2
    Thank you so much for this. I've spent the last few days reading around the Web Audio API and trying (with no small amount of frustration) to iron out the inconsistencies between iOS Safari and every other browser. I made some progress when I learned of the importance of new AudioContext() - but the real missing piece of the puzzle was that for iOS Safari, we need to explicitly set the audioContext.state from suspended to running via: const audioContext = new AudioContext(); audioContext.resume(); Only then will Safari behave like other browsers.
    – Rounin
    Sep 4, 2022 at 10:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.