Hice este componente para reproducir un archivo de audio cuando se procesa la página.
class Audio extends Component { randomTrack(){ [...] } componentDidMount() { const audioEl = document.getElementsByClassName("audio-element")[0] audioEl.play() } render() { var trackname=this.randomTrack(); return ( <div> <audio className="audio-element"> <source src={trackname}></source> </audio> </div> ) } } export default Audio;Cada vez que la ventana del navegador se vuelve a cargar después de guardar los cambios en el código, se reproduce el audio.
PERO si actualizo manualmente la ventana O si implemento el código en un sitio y luego abro el sitio, no se reproducirá. Entiendo que tiene algo que ver con este error. Luego entro en la consola:
Audio.js:12 No capturado (en promesa) DOMException: play() falló porque el usuario no interactuó primero con el documento.
Pero entonces, ¿por qué suena cuando se recarga? ¿Y es posible hacer que se reproduzca automáticamente cuando se carga la página, de alguna manera?
¡Gracias por adelantado!
Puedes probarlo de esta manera.
class Audio extends Component { randomTrack(){ [...] } render() { let trackname=this.randomTrack(); return ( <div> <audio autoplay className="audio-element"> <source src={trackname}></source> </audio> </div> ) } } export default Audio;una mejor manera de usar una solución estándar para reproducir audio.