Estoy creando una aplicación React y quiero poder reproducir audio. Estoy usando nuka-carousel para hacer un carrusel, y en cada diapositiva quiero reproducir un sonido diferente.

Parece que no puedo reproducir el audio (idealmente reproducción automática) en absoluto. Intenté usar la etiqueta <audio> con las etiquetas <source> adentro y eso no pareció funcionar, y tampoco lo hizo usando <audio src="...", autoPlay> , como lo sugiere otra publicación de StackOverflow. Todo eso resultó en que solo se mostraran los controles si habilité la etiqueta de controls , pero ni siquiera pude presionar el botón de reproducción. Probé react-audio-player y me dio el mismo resultado. Esto es lo que aparece y este es el código para los 3:

Este es el código para eso

 function App() { return ( <div> <audio src="..." controls/> <audio controls> <source src="..."/> </audio> <ReactAudioPlayer src="..." controls> </ReactAudioPlayer> </div> ); }

También intenté usar Howler, pero con eso descubrí que básicamente necesito tener un botón para reproducir el sonido (traté de hacerlo para que se reprodujera automáticamente, pero por alguna razón resultó que el sonido se reproducía cada vez que hacía clic en la página, y no tengo ni idea de por qué). Esto es lo que tengo con Howler:

 function SoundPlay(src){ const sound = new Howl({ src, autoplay: true, onend: function(){ console.log("done"); } }) sound.play(); } //soundObj is just an object with the sound source and its label function RenderButtonAndSound(){ return( <button key={index} onClick={() => SoundPlay(soundObj.sound)}> {soundObj.label} </button> ) }) } function Slide1(){ return( <div> this is the first slide {SoundPlay(moon)}; </div> ) }