Блог

Я пытаюсь следовать учебнику по React и создал компонент, у которого есть аудиотег html, громкость которого определяется вводом в другом компоненте React. Однако после того, как я реализовал громкость в коде, мой звук даже не воспроизводится. Может быть, это проблема с синтаксисом, но я не могу ее найти.

 function App () {
    const {volume,setVolume} = React.useState(1);
    return (
        <div>
            {audioClips.map(clip => {
                return <Pad clip={clip} volume={volume}/>
            })}
            <br />
            <h4>Volume</h4>
            <input 
                    type="range" 
                    min="0" 
                    max="1"
                    onChange = {(e)=>{return setVolume(e.target.value)}}
                    value={volume}
                    step="0.01"
                    className="w-50"
            />
        </div>
    )
}

function Pad ({clip, volume}) {
    
    const [active, setActive] = React.useState(false);
    
    React.useEffect(()=>{
        document.addEventListener('keydown', handleKeyPress);
        return () => {
            document.removeEventListener('keydown', handleKeyPress);
        }
    },{})
        
    const playSound = () =>{
        const audioTag = document.getElementById(clip.keyTrigger);
        setActive(true);
        setTimeout(()=>{return setActive(false)},200);
        audioTag.volume = volume;
        audioTag.currentTime=0;
        audioTag.play();
    }
    
    return (
        <div onClick={playSound} className={`btn btn-secondary m-3 p-4 ${active amp;amp; "btn-warning"}`}>
            <audio id = {clip.keyTrigger} src={clip.url}/>
            {clip.keyTrigger}
        </div>
    )
}
 

Похоже, у вас ошибка в первой строке:

const {volume,setVolume} = React.useState(1);

Должно быть:

const [volume,setVolume]= React.useState(1);