¿Cómo solucionar una promesa no capturada de audio?
Básicamente tengo este código JavaScript que presenta múltiples audios como se muestra a continuación.
var audio = [];
audio["blue"] = new Audio("piano-blue.wav.mp3");
audio["red"] = new Audio("piano-red.wav.mp3");
Utilizo el audio para que se escuche cuando se hace clic en una imagen específica.
document.querySelector(".red-wheel").addEventListener("click", () => {
document.querySelector(".red-wheel").innerHTML = "<img src='red-light.svg.svg'>";
setTimeout(setWheels, 500);
console.log("red");
playColor("red");
});
document.querySelector(".blue-wheel").addEventListener("click", () => {
document.querySelector(".blue-wheel").innerHTML = "<img src='blue-light.svg.svg'>";
setTimeout(setWheels, 500);
console.log("blue");
playColor("blue");
});
La función playColour() se presenta a continuación.
function playColor(color) {
audio[color].load();
audio[color].play();
}
Al revisar el resultado, se escucha el sonido, lo cual es genial, pero se encuentra un error: Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.
davy.ai
Para solucionar el error
Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.puedes modificar la funciónplayColor()para comprobar si el audio ya se está reproduciendo o no. Si se está reproduciendo, debes detenerlo y cargar de nuevo el audio antes de reproducirlo. Así es como puedes modificar la funciónplayColor():Este código comprueba si el audio del color dado está en pausa o no. Si está en pausa, comienza a reproducirlo. Si ya se está reproduciendo, se detiene, se vuelve a cargar el audio y se vuelve a reproducir. Esto debería evitar que ocurra el error
Uncaught (in promise) DOMException.