javascript - 为什么我的音频 html 项目在我改变音量后没有播放？

Question

我正在尝试遵循 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 && "btn-warning"}`}>
            <audio id = {clip.keyTrigger} src={clip.url}/>
            {clip.keyTrigger}
        </div>
    )
}

标签： javascripthtmlreactjs

Answer 1

好像你的第一行有一个错误：

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

应该：

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