Utilizo un botón para controlar el silenciamiento del reproductor de audio, pero hace que el reproductor se silencie de forma predeterminada, quiero que solo se silencie al hacer clic. Cómo editarlo
import React, { useState } from "react"; import ReactAudioPlayer from "react-audio-player"; const Test = () => { const [ismute, setOpen] = useState(false); return ( <><div> <ReactAudioPlayer controls muted={ismute ? "false": "True"} src='https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3' loop autoPlay /> </div><button onClick={() => setOpen(!ismute)}>click me!</button> </> ); }; export default TestSi está pasando como string ,
muted={ismute ? "false": "True"} ya que el valor inicial del ismute es false como:
const [ismute, setMute] = useState(false); entonces lo que vas a pasar como accesorio es True o false , que es truthy valor de verdad que hace que sea ismute como siempre mudo
Para state ismute, asigne inicialmente el valor verdadero en lugar de falso como se muestra a continuación:
const [ismute, setOpen] = useState(true); Debes pasar prop muted como true o false . Estás pasando como una cadena
muted={ismute ? false: true }Para state ismute, asigne inicialmente el valor verdadero en lugar de falso como se muestra a continuación:
const [ismute, setOpen] = useState(true);Otra corrección podría estar en el componente ReactAudioPlayer :
<ReactAudioPlayer controls muted={ismute} src='https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3' loop autoPlay />