AudioPlayer y useContext

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]);
 
// more code...

  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.

Get Studio Roma’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Si quieres saber más cosas, sigue nuestro Blog o nuestra cuenta de instagram! Y si necesitas realizar algún proyecto ponte en contacto con nosotros hoy mismo!