Bug 281566 – AudioContext.resume() never resolves if browser is suspended to background

• Status: NEW
• Component: Web Audio

[Luka Erkapic]

AudioContext.resolve() is never resolved if browser is suspended to background.

Use case scenario is that we listen for document.addEventListener("visibilitychanged") and try to resume AudioContext when document is visible.
However `AudioContext.resolve()` is never resumed or resolved/rejected.

Typically this will happen if:
- we play sound
- go to background
- go back to browser and try to resume context after visibility changed event
- no sound is played as resume is never resolved

This is not an issue when scrolling between tabs, only if browser is suspended to background.

Can be tested here https://codepen.io/Luka-Erkapic/pen/vYoxvPG
- simply play sound
- go to background
- go back to browser
- no sound is playing even if "AudioContext.resume()" is called.

[Luka Erkapic]

I could reproduce this on iOS version 17.6.1

[Radar WebKit Bug Importer]

<rdar://problem/138466380>

This bug has been eating me alive for months.
I thought I was crazy or it was a skill issue,
but no, its just broken :(

Same bug has been reported here 7 other times, its been 5 years 💀:
https://bugs.webkit.org/show_bug.cgi?id=276016
https://bugs.webkit.org/show_bug.cgi?id=276687
https://bugs.webkit.org/show_bug.cgi?id=263627
https://bugs.webkit.org/show_bug.cgi?id=274954
https://bugs.webkit.org/show_bug.cgi?id=240646
https://bugs.webkit.org/show_bug.cgi?id=206695
https://bugs.webkit.org/show_bug.cgi?id=202846

very scuffed workaround if anyone needs it,
but yeah, this is borked.

```js
audioContext = new AudioContext();
const abortController = new AbortController();

function addListeners(){
    document.addEventListener("pointerdown", resume, {signal: destructor.signal});
    document.addEventListener("keydown", resume, {signal: destructor.signal});
};
addListeners();

function resume(){
    if(audioContext.state !== "running"){
        abortController.abort();
        audioContext.suspend(); /* Needs to be called before resume */
        setTimeout(() => {audioContext.resume()}, 200);
    };
};

document.addEventListener('visibilitychange', () => {
    if(document.hidden){
        abortController.abort();
        audioContext.suspend();
    }
    else{resume()};
});

oops forgot to rename some stuff

audioContext = new AudioContext();
const abortController = new AbortController();

function addListeners(){
    document.addEventListener("pointerdown", resume, {signal: abortController.signal});
    document.addEventListener("keydown", resume, {signal: abortController.signal});
};
addListeners();

function resume(){
    if(audioContext.state !== "running"){
        abortController.abort();
        audioContext.suspend(); /* Needs to be called before resume */
        setTimeout(() => {audioContext.resume()}, 200);
    };
};

document.addEventListener('visibilitychange', () => {
    if(document.hidden){
        abortController.abort();
        audioContext.suspend();
    }
    else{resume()};
});