Cuando comencé a escribir esta pregunta, leí muchas otras preguntas similares sobre el mismo tema, pero aún no pude encontrar mi propia respuesta.
El problema aparece cuando me acerco a la reproducción de audio usando "nuevo audio()" de HTMLAudioElement (API web https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement ). Específicamente, ¿cómo controlar el sonido de funcionamiento de esa manera?
Vea el siguiente ejemplo. Si no es posible controlar aquellos que ejecutan HTMLAudioElements, se convertirá en un desastre para el usuario. Los sonidos se superpondrán y se producirá un desorden. Los sonidos se superpondrán y se producirá un desorden.
setTimeout ( function () { let audio = new Audio("https://www.bensound.com/bensound-music/bensound-dreams.mp3"); audio.autoplay = true; audio.play() .then(function () { console.log("Audio 01 is playing."); }) }, 1000 // Audio has a duration of about 2 to 3 minutes ) setTimeout ( function () { let audio = new Audio("https://www.bensound.com/bensound-music/bensound-ukulele.mp3"); audio.autoplay = true; audio.play() .then(function () { console.log("Audio 02 is playing."); }) }, 5000 // Audio has a duration of about 2 to 3 minutes ) setTimeout ( function () { let audio = new Audio("https://www.bensound.com/bensound-music/bensound-creativeminds.mp3"); audio.autoplay = true; audio.play() .then(function () { console.log("Audio 03 is playing."); }) }, 10000 // Audio has a duration of about 2 to 3 minutes )Sé que es posible solucionar ese problema creando una etiqueta de "audio" con algún identificador, como una identificación o una clase. Y así, el problema se resolverá con unas pocas líneas de JS simple.
Pero, ¿y si tenemos que lidiar con este problema? Cualquier comentario o retroalimentación es muy apreciada. Gracias.
Considere mantener una lista de todos los elementos de Audio creados y pausar los demás cuando uno comience a reproducirse:
const GroupedAudio = (() => { const audios = [] // all Audio elements created return function() { const audio = new Audio(...arguments) audios.push(audio) // Pause other Audio when this one starts audio.addEventListener('play', () => { for (let a of audios) { if (a !== audio) { a.pause() } } }) return audio } })() const audio1 = new GroupedAudio('https://www.bensound.com/bensound-music/bensound-dreams.mp3') const audio2 = new GroupedAudio('https://www.bensound.com/bensound-music/bensound-ukulele.mp3') const audio3 = new GroupedAudio('https://www.bensound.com/bensound-music/bensound-creativeminds.mp3') <button onclick="audio1.play()">Play 1</button> <button onclick="audio2.play()">Play 2</button> <button onclick="audio3.play()">Play 3</button>