La página es principalmente para dispositivo móvil. En mi proyecto web AR, tengo una música de fondo que se reproduce automáticamente sin ningún botón de control.
Problema actual: cuando el usuario va a otra aplicación o cierra el teléfono, aún reproduce la música tal como funciona Youtube premium.
Lo que quiero: quiero que la música deje de reproducirse automáticamente cuando la página no esté activa en el teléfono. (usuario en una aplicación diferente, usuario cierra el teléfono)
Así es como agregué el audio a mi proyecto.
html
<audio id="portal-audio" crossorigin="anonymous" loop="true" preload="auto" src="./assets/music/music.mp3"></audio>js
document.getElementById('screen-start').addEventListener('click', function(event) { document.getElementById('portal-audio').play(); })Puedes usar el cambio de visibilidad :
document.addEventListener("visibilitychange", event => { if (document.visibilityState === "visible") { console.log("tab is active") } else { const audio = document.getElementById('portal-audio'); audio && audio.pause(); console.log("tab is inactive") } })document.addEventListener("visibilitychange", event => { if (document.visibilityState === "visible") { document.getElementById('portal-audio').play(); console.log("tab is active") } else { const audio = document.getElementById('portal-audio'); audio && audio.pause(); console.log("tab is inactive") } })