Creo que necesito usar el estado para rastrear qué canción se está reproduciendo, pero tengo problemas para implementarlo. No estoy seguro de qué parámetro pasar para reaccionar al reproductor de audio o dónde configurar el estado. es posible? Así es como se ve todo el componente:
import { useState, useEffect } from 'react'; import ReactAudioPlayer from 'react-audio-player'; import { useSelector, useDispatch } from 'react-redux'; import { NavLink, useParams } from 'react-router-dom'; import { deleteSong, getOneSong } from '../../store/song'; import EditSongForm from '../EditSongForm'; const SpecificSong = ({ id, songName, songLink, userId, albumImage }) => { const [editShowForm, setEditShowForm] = useState(false); // const [currentlyPlayingSong, setCurrentlyPlayingSong] = useState(false) const dispatch = useDispatch(); useEffect(() => { dispatch(getOneSong(id)); setEditShowForm(false); }, [dispatch, id]); const editFormCheck = (e) => { if (editShowForm) setEditShowForm(false) if (!editShowForm) setEditShowForm(true) } const remove = (e) => { dispatch(deleteSong(e.target.id)); } const user = useSelector((state) => state.session.user); const CurrentUserId = user?.id return ( <div className='songdetails' key={id}> <NavLink to={`/song/${id}`}> <p className='songname' key={id}>{songName}</p> <img className="albumimage" src={albumImage} alt="album image" srcset="" /> <ReactAudioPlayer className='audioplayer' src={songLink} controls key={songLink} /> </NavLink> {userId === CurrentUserId ? <> <div className='editbutton'> <EditSongForm props={id} /> </div> <div className='removebutton'> <button id={id} onClick={remove}>Delete Song</button> </div> </> : null} </div> ); }; export default SpecificSong;No pude recrear tu problema exactamente. Pero creo que puedo ayudar.
De acuerdo con mis pruebas, esta biblioteca maneja la reproducción y la pausa de componentes individuales por sí misma, por lo que no es necesario tocar eso.
Ahora, para implementar un mecanismo de bloqueo, puede almacenar un Índice de reproductor de audio que rastree el índice/clave del reproductor de audio que se está reproduciendo ahora. Si ningún jugador está jugando, el valor predeterminado es un número como "-1". Por lo tanto, cada vez que reproduzca un componente de reproductor de audio reactivo, primero verifique si otro reproductor de audio está ENCENDIDO en ese momento. Si está ENCENDIDO, desactívelo y coloque su propio índice clave en la variable AudioPlayerIndex. Esta variable puede almacenarse en la API de contexto o en la tienda global, ya que la necesitarán todos los componentes del reproductor de audio dentro de su aplicación.
De la API que se vio en su repositorio de GitHub, vinculada aquí: https://github.com/justinmc/react-audio-player#readme