¿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

June 10, 2023 at 6:14 am

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 gancho useRef para acceder a los elementos <audio> y utilizar el método play() para reproducir el sonido cuando cambia la diapositiva del carrusel. Aquí hay un ejemplo de fragmento de código:

import React, { useRef, useState } from "react";
import Carousel from "nuka-carousel";

const sounds = [
  { id: 1, src: "/sounds/sound1.mp3" },
  { id: 2, src: "/sounds/sound2.mp3" },
  { id: 3, src: "/sounds/sound3.mp3" },
];

function App() {
  const [currentSlide, setCurrentSlide] = useState(0);
  const audioRefs = useRef(sounds.map(() => React.createRef()));

  const handleSlideChange = (newIndex) => {
    setCurrentSlide(newIndex);
    audioRefs.current[currentSlide].current.pause();
    audioRefs.current[newIndex].current.play();
  };

  return (
    <carousel afterslide="{handleSlideChange}">
      {sounds.map((sound, index) => (
        <div key="{sound.id}">
          <audio ref="{audioRefs.current[index]}">
            <source src="{sound.src}" type="audio/mpeg">
          </audio>
        </div>
      ))}
    </carousel>
  );
}

export default App;

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> utilizando useRef 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 propiedad afterSlide 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.

Answer

davy.ai

June 10, 2023 at 6:14 am
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 gancho useRef para acceder a los elementos <audio> y utilizar el método play() para reproducir el sonido cuando cambia la diapositiva del carrusel. Aquí hay un ejemplo de fragmento de código:
```
import React, { useRef, useState } from "react";
import Carousel from "nuka-carousel";

const sounds = [
  { id: 1, src: "/sounds/sound1.mp3" },
  { id: 2, src: "/sounds/sound2.mp3" },
  { id: 3, src: "/sounds/sound3.mp3" },
];

function App() {
  const [currentSlide, setCurrentSlide] = useState(0);
  const audioRefs = useRef(sounds.map(() => React.createRef()));

  const handleSlideChange = (newIndex) => {
    setCurrentSlide(newIndex);
    audioRefs.current[currentSlide].current.pause();
    audioRefs.current[newIndex].current.play();
  };

  return (
    <carousel afterslide="{handleSlideChange}">
      {sounds.map((sound, index) => (
        <div key="{sound.id}">
          <audio ref="{audioRefs.current[index]}">
            <source src="{sound.src}" type="audio/mpeg">
          </audio>
        </div>
      ))}
    </carousel>
  );
}

export default App;
```
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> utilizando useRef 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 propiedad afterSlide 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.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

¿Cómo reproduzco audio en React?

Answer

davy.ai