Esto parece ser un problema después de que actualicé mi iPod Touch a iOS 15 (15.0.1).
Al ejecutar el ejemplo a continuación, funciona bien en la primera carga, reproduciendo el sonido tantas veces como quiera. Sin embargo, si bloqueo la pantalla de mi iPod Touch y vuelvo después de un par de minutos, el sonido ya no se reproduce. Para solucionar el problema, configuré un oyente de cambio de estado en la instancia de AudioContext y verifiqué que Safari vuelve a poner el estado en running después de que se interrupted cuando la pantalla estaba bloqueada. Sin embargo, el sonido no se reproduce.
<!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>Extrañamente, si agrego un elemento de audio al HTML que apunta a algún archivo mp3, que ni siquiera se menciona en el código, luego bloqueo la pantalla por un tiempo y luego volver a la página ya no afecta la reproducción de audio.
Código actualizado:
<!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>El bloqueo de pantalla no permite que se ejecuten scripts en IOS.
Mi solución es ejecutar 2 elementos del reproductor de audio. Un audioElementWithSound y otro con un archivo vacío-10s.mp3.
Al hacer clic en reproducir, se inician ambos elementos. Luego tengo un detector de eventos que escucha 'terminado' en el archivo mp3 vacío, reiniciando el archivo mp3 vacío si el withSound aún no ha terminado de reproducirse.
Se vería algo como esto:
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);