Блог

Главная - Вопросы по программированию - iOS 15: Воспроизведение веб-аудио перестает работать в Safari после блокировки экрана на несколько минут

iOS 15: Воспроизведение веб-аудио перестает работать в Safari после блокировки экрана на несколько минут

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

Вопрос:

Похоже, это проблема после того, как я обновил свой iPod Touch до iOS 15 (15.0.1).

При запуске приведенного ниже примера он отлично работает при первой загрузке, воспроизводя звук столько раз, сколько я хочу. Однако, если я заблокирую экран на своем iPod Touch, а затем вернусь через пару минут, звук больше не будет воспроизводиться. Для устранения неполадок я настроил прослушиватель изменения состояния в экземпляре AudioContext и проверил, что Safari возвращает состояние running после того, как оно было установлено interrupted , когда экран был заблокирован. Тем не менее, звук не воспроизводится.

 <!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>

Ответ №1:

Странно, но если я добавлю в HTML аудиоэлемент, указывающий на какой-либо mp3-файл, на который вообще нет ссылки в коде, то блокировка экрана на некоторое время, а затем возврат на страницу больше не влияет на воспроизведение звука.

Обновленный код:

 <!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>
Метки: