Estoy usando howler.js en un componente simple que muestra un botón para reproducir un archivo de audio.
En la consola recibo la siguiente advertencia:
"No se permitió que se iniciara el AudioContext. Debe reanudarse (o crearse) después de un gesto del usuario en la página.
El sonido se reproduce sin ningún problema , pero no puedo deshacerme de esta advertencia.
De acuerdo con la advertencia, se debe realizar un gesto, que pensé que al hacer clic en el botón proporcionaría
Aquí está el código del componente:
import React from "react"; import { useState } from "react"; import { Howl } from "howler"; export const Sound = ({ name, path }) => { const [playing, setPlaying] = useState(false); const Sound = new Howl({ src: [path], }); const playSound = () => { setPlaying(true); Sound.play(); }; return ( <div> <button onClick={() => playSound()}>{name}</button> <p>{playing ? "playing" : "Not playing"}</p> </div> ); };Revisé varias preguntas/foros/problemas de github pero no puedo encontrar una solución
¡Se agradece cualquier ayuda o información sobre por qué aparece esto!
¡Gracias!
Creo que en este caso puedes ignorar esta advertencia. Se activa porque howler.js crea un AudioContext por adelantado.
Ese AudioContext se reanuda automáticamente al llamar a play() .
Por lo tanto, la advertencia es molesta, pero los autores de howler.js ya la han solucionado. Pero si realmente quiere deshacerse de la advertencia, puede inicializar perezosamente la variable Sound justo antes de reproducirla.
// ... let Sound; const playSound = () => { setPlaying(true); if (Sound === undefined) { Sound = new Howl({ src: [path] }); } Sound.play(); }; // ...Eso debería hacer que la advertencia desaparezca.