iOS 15: Web Audio playback stops working in Safari after locking screen for a few minutes

Asked 8/10, 2021 at 22:35 Answered 28/3, 2022 at 11:26

Solved javascript html ios mobile-safari web-audio-api

This seems to be an issue after I upgraded my iPod Touch to iOS 15 (15.0.1).

When running the example below, it works fine on the first load, playing the sound as many times as I want. However, if I lock the screen on my iPod Touch, then return after a couple minutes, the sound no longer plays. To troubleshoot I set up a state change listener on the AudioContext instance and verified that Safari sets the state back to running after it was set to interrupted when the screen was locked. Yet, the sound does not play.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>audio-test</title>
    </head>
    <body>
        <script>

            const AudioContext = window.AudioContext || window.webkitAudioContext;
            const audioContext = new AudioContext();

            // Create AudioBuffer and fill with two seconds of white noise.
            const channels = 2;
            const frameCount = audioContext.sampleRate * 2.0;
            const audioBuffer = audioContext.createBuffer(channels, frameCount, audioContext.sampleRate);
            for (var channel = 0; channel < channels; channel++) {
                var nowBuffering = audioBuffer.getChannelData(channel);
                for (var i = 0; i < frameCount; i++) {
                    nowBuffering[i] = Math.random() * 2 - 1;
                }
            }

            const button = document.createElement('button');
            button.textContent = 'Play Audio';
            document.body.append(button);

            button.addEventListener('click', () => {
                const currentSourceNode = new AudioBufferSourceNode(audioContext, {
                    buffer: audioBuffer,
                });
                currentSourceNode.connect(audioContext.destination);
                currentSourceNode.start();
            });

        </script>
    </body>
</html>

Kollwitz answered 8/10, 2021 at 22:35 Comment(0)

Strangely, if I add an audio element to the HTML that points to some mp3 file, which isn't even referenced in the code at all, then locking the screen for a while then returning to the page no longer affects the audio playback.

Updated code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>audio-test</title>
    </head>
    <body>
        <script>

            const AudioContext = window.AudioContext || window.webkitAudioContext;
            const audioContext = new AudioContext();

            // Create AudioBuffer and fill with two seconds of white noise.
            const channels = 2;
            const frameCount = audioContext.sampleRate * 2.0;
            const audioBuffer = audioContext.createBuffer(channels, frameCount, audioContext.sampleRate);
            for (var channel = 0; channel < channels; channel++) {
                var nowBuffering = audioBuffer.getChannelData(channel);
                for (var i = 0; i < frameCount; i++) {
                    nowBuffering[i] = Math.random() * 2 - 1;
                }
            }

            const button = document.createElement('button');
            button.textContent = 'Play Audio';
            document.body.append(button);

            button.addEventListener('click', () => {
                const currentSourceNode = new AudioBufferSourceNode(audioContext, {
                    buffer: audioBuffer,
                });
                currentSourceNode.connect(audioContext.destination);
                currentSourceNode.start();
            });

        </script>
        <audio src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/858/outfoxing.mp3" crossorigin="anonymous"></audio>
    </body>
</html>

Kollwitz answered 12/10, 2021 at 19:34 Comment(1)

I've been banging my head against the wall for a day because of this exact problem. I can't believe this works. 🙃 – Ragged 24/1, 2022 at 1:33

Screen lock does not allow scripts to run on IOS.

My workaround is to run 2 audio player elements. One audioElementWithSound and, another with an empty-10s.mp3 file.

Clicking play starts both elements. I then have an event listner listening to 'ended' on the empty.mp3, re-starting the empty.mp3 if the withSound is not done playing yet.

It would look something like this :

let audioElement();
let stayAwakeAudio();

function playSound(){
    audioElement.src = "/assets/audioClip.mp3"
    audioElement.play;
    stayAwake()
}

function stayAwake() {
    console.log("I'm awake");
    stayAwakeAudio.src = "/assets/empty10sSoundFile.mp3";
    stayAwakeAudio.play();
}

stayAwakeAudio.addEventListener('ended', function () {
    if (audioElement.play) {
        console.log('Audio still playing')
        stayAwake();
    }
    else {
        console.log('No audio playing, letting screen time out');
    }
}, false);

Zenaidazenana answered 28/3, 2022 at 11:26 Comment(0)

Recommended topics

Hot tags