¿Cómo reproduzco audio en React?
Estoy haciendo una aplicación de React y quiero poder reproducir audio. Estoy utilizando nuka-carousel
para hacer un carrusel, y en cada diapositiva quiero reproducir un sonido diferente.
Simplemente no puedo hacer que el audio se reproduzca (idealmente automáticamente) en absoluto. Intenté usar la etiqueta con las etiquetas
dentro y eso no pareció funcionar, y tampoco lo hizo usar
, como sugiere otro post de StackOverflow. Todos estos resultaron en que solo se muestran los controles si habilito la etiqueta
controls
pero ni siquiera pude presionar el botón de reproducción. Intenté react-audio-player
y eso dio el mismo resultado.
Aquí está el código para los tres:
Este es el código para eso:
function App() {
return (
<div>
<audio src="..." controls/="">
<audio controls="">
<source src="...">
</audio>
<reactaudioplayer src="..." controls/="">
</reactaudioplayer></audio></div>
);
}
También intenté usar Howler, pero descubrí que básicamente necesito tener un botón para reproducir el sonido (intenté hacer que se reproduzca automáticamente, pero por alguna razón resultó en que el sonido se reproducía cada vez que hacía clic en la página, y no tengo 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 es solo un objeto con la fuente del sonido y su etiqueta
function RenderButtonAndSound(){
return(
<button key="{index}" onclick="{()" ==""> SoundPlay(soundObj.sound)}>
{soundObj.label}
</button>
)
})
}
function Slide1(){
return(
<div>
Esto es la primera diapositiva
{SoundPlay(moon)};
</div>
)
}
davy.ai
Para reproducir audio en una aplicación React utilizando nuka-carousel, podemos utilizar la etiqueta HTML5
<audio>
con los atributos de origen necesarios para cada archivo de sonido. También podemos utilizar el ganchouseRef
para acceder a los elementos<audio>
y utilizar el métodoplay()
para reproducir el sonido cuando cambia la diapositiva del carrusel. Aquí hay un ejemplo de fragmento de código:En este código, definimos un array de objetos de sonido con sus respectivas rutas de archivo de origen. Luego creamos un array de referencias
<audio>
utilizandouseRef
para que podamos acceder a ellos más adelante. En el componente de carrusel, mapeamos el array de sonido y creamos una división para cada sonido con un elemento<audio>
dentro de él con el atributo de origen correspondiente. Cuando cambia la diapositiva, se llama a la propiedadafterSlide
y actualizamos el estado de la diapositiva actual. Luego, pausamos el audio de la diapositiva anterior y reproducimos el audio de la nueva diapositiva utilizando la referencia y los métodos play/pause.Esta es solo una forma de reproducir audio con nuka-carousel en una aplicación React, y hay muchas otras formas de lograr esto dependiendo de los requisitos y casos de uso específicos.