javascript - 音量 slider 在单击时正确播放音频文件，但未更改同一元素的按键音量

Question

基本上，如果我更改 slider 级别，它只会影响单击而不影响 keydown，即使它们调用相同的 playSound 函数也是如此。不知道我搞砸了什么

function App() {
  const [soundText, setSoundText] = useState();
  const [volumeLevel, setVolumeLevel] = useState(0.5)
};

我把它按组件拆分，我不得不删掉大部分 App 组件来发布，但你明白了

function DrumPad({ pad, setSoundText, volumeLevel }) {
    
    useEffect(() => {
        document.addEventListener('keydown', handleKeyPress);
        return () => {
            document.removeEventListener('keydown', handleKeyPress)
        };
    }, []);

    const playSound = () => {
        const audioTag = document.getElementById(pad.letter);
        audioTag.volume = volumeLevel;
        audioTag.play();
        setSoundText(pad.id)
    }
    const handleKeyPress = (e) => {
        if(e.keyCode === pad.keyCode){
            playSound();
        }
    }
    

    return (
        <div 
        className="drum-pad" 
        id={pad.id}
        onClick={playSound}>
            <p>{pad.letter}</p>
            <audio 
                src={pad.src} 
                className="clip" 
                id={pad.letter}>
            </audio>
        </div>
    )
}

function VolumeBar({ setSoundText, volumeLevel, setVolumeLevel }) {
    const volumeChanger = (e) => {
        setVolumeLevel(e.target.value)
    }
    return (
        <div className="slide-container">
            Volume
            <input 
                id="myRange"
                type="range"
                min='0'
                max='1'
                step= '0.01'
                value={ volumeLevel }
                onChange={ volumeChanger }
                className="slider"
            />
        </div>
    )
}

谢谢

Answer 1

尝试将 onKeyDown Prop 添加到输入中，而不是使用 react 中不鼓励的事件监听器。

  <input 
            id="myRange"
            type="range"
            min='0'
            max='1'
            step= '0.01'
            value={ volumeLevel }
            onChange={ volumeChanger }
            onKeyDown={(e) => {
               if(e.keyCode === pad.keyCode){
                 playSound();
               }}}
            className="slider"
        />