Implementar reproductor de audio en React

1. Crear un componente de clase para implementar el reproductor de audio en React
2. Cree un componente funcional para implementar el reproductor de audio en React

Las aplicaciones de React no son exclusivamente para mostrar contenido visual. A veces, el contenido de audio también es esencial.

Podemos configurar el componente React para reproducir música y tener un botón para pausar y reanudar la reproducción cuando sea necesario.

Crear un componente de clase para implementar el reproductor de audio en React

En React, puede crear un componente usando la sintaxis del componente de clase ES6 para reproducir cualquier archivo de música. Para eso, utilizaremos múltiples funciones: estado, el constructor nativo Audio(), ganchos de ciclo de vida, etc.

Veamos el ejemplo real de cómo crear un componente de clase React que reproduzca audio.

class PlayMusic extends React.Component {
  state = {
    songplaying: false
  };
  song = new Audio(
    "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
  );
  componentDidMount() {
    this.song.addEventListener("ended", () =>
      this.setState({ songplaying: false })
    );
  }

  componentWillUnmount() {
    this.song.removeEventListener("ended", () =>
      this.setState({ songplaying: false })
    );
  }

  switchPlay = () => {
    this.setState({ songplaying: !this.state.songplaying }, () => {
      this.state.songplaying ? this.song.play() : this.song.pause();
    });
  };

  render() {
    return (
      <div>
        <button onClick={this.switchPlay}>
          {this.state.songplaying ? "Pause" : "Play"}
        </button>
      </div>
    );
  }
}

Aquí, tenemos un componente PlayMusic, donde iniciamos el estado con una propiedad llamada songplaying. Cuando los usuarios visitan este sitio web, no queremos que se reproduzca el audio, por lo que, de forma predeterminada, la propiedad de estado songplaying será falsa.

Luego, creamos una instancia del constructor Audio() y la almacenamos en la variable llamada canción. Este constructor toma un argumento, la URL, para el archivo de audio.

Luego, usamos los métodos de ciclo de vida, componentDidMount() y componentWillUnmount(), para configurar y eliminar detectores de eventos para el evento finalizado en la variable song, que es una instancia de Audio() constructor. También configuramos la función para manejar el evento finalizado.

Llamamos al método setState() para cambiar el valor de la propiedad de estado songplaying. Una vez finalizado el archivo de audio, la variable de estado debe establecerse en false.

Finalmente, devolvemos el contenedor <div> con un botón. Al hacer clic en este botón, se activará un evento onClick, que ejecutará la función switchPlay.

El método this.setState() establecerá el valor de la propiedad songplaying al contrario de su valor actual. Si la propiedad de estado es actualmente falsa, se establecerá en verdadera y viceversa.

Además, si el valor del estado es true, el controlador de eventos llamará al método .play() en la instancia del constructor Audio(). Si el audio es false, llamará al método .pause().

Finalmente, mostramos condicionalmente el texto del botón. Mostramos el texto Pausa si la canción se está reproduciendo actualmente; si no es así, indicamos Play en su lugar.

Vea la demostración en vivo del ejemplo en este CodeSandbox.

Cree un componente funcional para implementar el reproductor de audio en React

Desde la versión 16.8 de React, los componentes funcionales en React tienen muchas de las mismas características que los componentes de clase. Esto es gracias a la introducción de ganchos, como useState(), useHook() y otros ganchos personalizados.

Implementemos un reproductor de música en un componente funcional. Primero, definimos un gancho personalizado useAudio, luego lo llamamos en el componente MusicPlayer.

import React, { useState, useEffect } from "react";

const useAudio = url => {
  const [song] = useState(new Audio("https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"));
  const [play, setPlay] = useState(false);

  const toggle = () => setPlay(!play);

  useEffect(() => {
      play ? song.play() : song.pause();
    },
    [play]
  );

  useEffect(() => {
    song.addEventListener('ended', () => setPlay(false));
    return () => {
      song.removeEventListener('ended', () => setPlay(false));
    };
  }, []);

  return [play, toggle];
};

const MusicPlayer = () => {
  const [playMusic, setMusic] = useAudio("https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3");

  return (
    <div>
      <button onClick={setMusic}>{playMusic ? "Pause" : "Play"}</button>
    </div>
  );
};

export default Player;

Esto funciona principalmente de acuerdo con el mismo principio que el ejemplo anterior. La principal diferencia es que en lugar de usar métodos de ciclo de vida, usamos el enlace useEffect() para agregar y eliminar detectores de eventos para el audio.

También usamos el gancho useState() para definir variables de estado, como canción y reproducir. El primero almacena una referencia al constructor Audio(), y el segundo almacena el estado de la música.

La función alternar también cambia el valor actual de la variable de estado reproducir, lo que nos permite detener la reproducción de música y continuar cuando sea necesario.

Este gancho personalizado le permite configurar el audio fácilmente. Proporcione el enlace al archivo de la canción y luego use el operador ternario para verificar el valor de la variable de estado y mostrar el texto del botón en consecuencia.