Tengo un problema con la política de reproducción automática que arruina por completo mi diseño personalizado.

En el componente, hay un estado de "reproducción" configurado de forma predeterminada como verdadero para activar la reproducción automática, pero después de actualizar una página, la reproducción automática no funciona incluso si el estado de "reproducción" se establece como verdadero. Ahora, el problema es que cuando el usuario hace clic en el botón de reproducción, el estado no cambia porque ya es verdadero, la solución es configurarlo como falso y nuevamente como verdadero, pero en esta solución, el usuario debe hacer clic dos veces en el icono.

¿Puede alguien ayudarme con eso? Tal vez el reproductor de reacción ya tenga un estado o método para iniciar la reproducción y no necesito un estado de "reproducción" para manejar la pausa de la reproducción.

Aquí hay un ejemplo simple de cómo funciona.

 export default function Untitled() { const playerRef = useRef(null); const [playing, setPlaying] = useState(true) return ( <div> <ReactPlayer style={{display:"none"}} controls={false} playing={playing} wrapper={"audio"} progressInterval={200} config={{ file: { attributes: {preload: "auto"}, forceAudio:true, }, }} /> <IconButton size="small"> {playerRef && playerRef.current.player.isPlaying ? ( <PauseIcon onClick={() => setPlaying(false)}/> ) : ( <PlayArrowIcon onClick={() => setPlaying(true)}/> )} </IconButton> </div> ) }