logo studio roma
EN / ES

Back to Blog

AudioPlayer 2

Pablo Romera foto

Pablo Romera 

/

 July 13, 2023 / 4 min read

Pablo Romera foto

Usando useContext de React para gestionar el estado global de un AudioPlayer

La gestión del estado en aplicaciones grandes y complejas puede convertirse en una tarea desafiante. React ofrece una solución eficiente a este problema mediante el uso de Context, que permite a los componentes consumir y suscribirse a cambios en el contexto. En este artículo, profundizaremos en el uso de useContext de React para gestionar el estado global de un AudioPlayer, analizando detalladamente el código y proporcionando comentarios adicionales para comprender mejor su funcionamiento.

Configurando el Context del AudioPlayer

React Context proporciona una forma de compartir valores como estos entre componentes sin tener que pasar explícitamente un prop a través de cada nivel del árbol de componentes.

Componente AudioPlayerContext

Este componente define el contexto que vamos a utilizar en toda nuestra aplicación para el control del AudioPlayer. Lo creamos para poder gestionar y acceder al estado del reproductor (isActive), en todas las páginas de la web.

import { createContext, useState } from "react";

// Creando el context
export const AudioPlayerContext = createContext();

export const AudioPlayerProvider = ({ children }) => {
  const [isActive, setIsActive] = useState(false); // Definimos el estado inicial

  const play = () => {
    // Función para reproducir
    setIsActive(true);
  };

  const pause = () => {
    // Función para pausar
    setIsActive(false);
  };

  // Proporcionando el estado y las funciones a los componentes "hijos"
  return (
    <AudioPlayerContext.Provider value={{ isActive, play, pause }}>
      {children}
    </AudioPlayerContext.Provider>
  );
};

Aquí, hemos definido dos funciones, play y pause, que modificarán el estado isActive de nuestro AudioPlayer. Todos los componentes envueltos por AudioPlayerProvider tendrán acceso a estas funciones y al estado actual.

Integración en _app.js

Este fragmento muestra cómo envolver nuestra aplicación con el proveedor del contexto, permitiendo que cualquier componente en nuestra aplicación tenga acceso al contexto.

import React from "react";
import { AudioPlayerProvider } from "@/components/context/AudioPlayerContext";

// Todos los componentes dentro de AudioPlayerProvider tendrán acceso al contexto
export default function MyApp({ Component, pageProps }) {
  return (
    <AudioPlayerProvider>
      <Component {...pageProps} />
    </AudioPlayerProvider>
  );
}

Desarrollando el componente Player

El componente Player es responsable de la reproducción del audio. Aquí es donde el React Context realmente brilla, ya que podemos acceder fácilmente al estado y las funciones proporcionadas por nuestro AudioPlayerContext. Con el componente Player, accederemos a los controles del reproductor para reproducir, pausar o cambiar de canción en el reproductor. Gracias a React Context, el estado del reproductor cambiará y podrá ser accedido desde cualquier página de la web.

Componente Player

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

import { AudioPlayerContext } from "@/components/context/AudioPlayerContext";
import Controls from "@/components/Controls";

import songList from "@/components/player/songs";

const Player = (props) => {
  const { isActive } = useContext(AudioPlayerContext); // Accediendo al contexto
	const [isPlaying, setIsPlaying] = useState(isActive); // Estado local para el control de la reproducción
	const audioElement = useRef(); // Referencia al elemento de audio
	const [currentSong, setCurrentSong] = useState(songList[randomNumber]);

	...

  useEffect(() => {
    if (!isPlaying) {
      audioElement.current.play(); // Reproducir el audio. Función definida en el context.
    } else {
      audioElement.current.pause(); // Pausar el audio. Función definida en el context.
    }
  }, [isPlaying]); // Observando los cambios en isPlaying

  return (
        <div>
          <Controls
            songList={songList}
            isPlaying={isPlaying}
            setIsPlaying={setIsPlaying}
            currentSong={currentSong}
            setCurrentSong={setCurrentSong}
            audioElement={audioElement}
          />
          <audio
            id="audio-player"
            name="audio-player"
            src={currentSong.url}
            ref={audioElement}
          ></audio>
        </div>
  ); // Retornando la interfaz del reproductor
};

export default Player;

Conclusión

La gestión del estado global es una parte crucial de cualquier aplicación React moderna y compleja. Con useContext, podemos simplificar este proceso y escribir un código más limpio y reutilizable. Hemos explorado cómo utilizar este poderoso hook para construir un reproductor de audio, pero las posibilidades son vastas. La comprensión y aplicación efectiva de estos conceptos puede mejorar significativamente la estructura y eficiencia de nuestros proyectos React.