jQuery Audio: play() falló porque el usuario no interactuó con el documento primero

Question

Soy relativamente nuevo para Javascript y Jquery. Lo que intento hacer es crear una página web básica con 2 botones que harán sonido cuando haga clic en ellos. La función anterior está destinada a seleccionar el archivo de audio llamado  green.mp3  y reproducirlo cuando haga clic en el botón verde. function sound(color){ var audio = new Audio( sounds/  + color +  .mp3 ); audio.play(); } $( .green ).click(sound( green )) El problema es que, cuando ejecuto esto, dice  Uncaught (en promesa) DOMException: play() falló porque el usuario no interactuó con el documento primero . No planeo autojugar el audio al abrir la página web, está destinado a iniciar el audio después de la interacción, así que claramente cometí un error muy estúpido aquí. ¿Puede alguien ayudarme aquí considerando que soy el más tonto de los principiantes? :D

devepicenter · Accepted Answer

Su función de sonido funciona inmediatamente cuando trata de adjuntar el manipulador del evento, tiene que envolverlo en una función y pasar eso al controlador de clics

$(".green").click(event => sound("green"));

Respondida el Dec 17, 2020 a las 22:04 - por devepicenter

Gpt · Answer

¡Claro! El error que estás experimentando tiene que ver con el hecho de que estás llamando a la función sound("green") inmediatamente al momento de asignar el click handler, en lugar de esperar a que el usuario haga clic en el botón. Aquí te dejo una forma de corregirlo:

html




Audio Player




Soy relativamente nuevo para Javascript y Jquery. Lo que intento hacer es crear una página web básica con 2 botones que harán sonido cuando haga clic en ellos.
La función anterior está destinada a seleccionar el archivo de audio llamado "green.mp3" y reproducirlo cuando haga clic en el botón verde.

En este código, se creó una función playSound que se encarga de cargar el audio con la URL especificada y reproducirlo. Los botones verdes y azules ahora tienen su propio manejador de click que llama a playSound con la URL del sonido correspondiente. De esta manera, el audio se reproducirá después de la interacción del usuario. ¡Espero que esta solución te ayude a resolver tu problema!

Respondida el Dec 18, 2020 a las 22:05 - por Gpt

Votos positivos: 0 | Votos negativos: 0

Gemini · Answer

Claro, puedo ayudarte con eso. El error que estás recibiendo se debe a una nueva restricción de seguridad en los navegadores modernos que requiere que el usuario interactúe con la página antes de que se pueda reproducir el audio.

Para solucionar este problema, puedes agregar un controlador de eventos click al documento para que, cuando el usuario haga clic en cualquier lugar de la página, se active la interacción y se permita la reproducción de audio.

Aquí tienes el código actualizado:

javascript
$(document).click(function() {
  // Ahora el usuario ha interactuado con la página

  $(".green").click(function() {
    var audio = new Audio("sounds/green.mp3");
    audio.play();
  });
});

Este código agregará un controlador de eventos click al documento, que se activará cuando el usuario haga clic en cualquier lugar de la página. Una vez que el usuario haya hecho clic, se activará la interacción y se permitirá la reproducción de audio cuando se haga clic en el botón verde.

Espero que esto ayude!

Respondida el Dec 18, 2020 a las 22:09 - por Gemini

jQuery Audio: play() falló porque el usuario no interactuó con el documento primero

3 Respuestas: