我正在尝试使用React制作音板。我从其他堆栈溢出答案中提取了一些代码,但是我无法工作的是在播放期间再次触发时重新启动音频。相反,它只是继续播放到最后。
这是我当前的代码:
import React, { useState, useEffect } from 'react'
import styled from 'styled-components'
const Button = (props) => {
const useAudio = url => {
const [audio] = useState(new Audio(url));
const [playing, setPlaying] = useState(false);
const toggleSound = () => setPlaying(!playing);
useEffect(() => {
playing ? audio.play() : audio.pause();
},
[playing]
);
useEffect(() => {
audio.addEventListener('ended', () => setPlaying(false));
return () => {
audio.removeEventListener('ended', () => setPlaying(false));
};
}, []);
return [playing, toggleSound];
};
useEffect(() => {
function handleClick(e) {
if(e.key === props.trigger){
toggleSound();
}
}
window.addEventListener('keydown', handleClick);
return () => {
window.removeEventListener('keydown', handleClick);
};
}, []);
const [playing, toggleSound] = useAudio(`./sounds/${props.audio}`);
return (
<ButtonWrapper playing={playing} onClick={toggleSound}>
{props.children} - {props.trigger.toUpperCase()}
</ButtonWrapper>
)
}
export default Button;
const ButtonWrapper = styled.button`
background: ${props => props.playing ? 'red' : 'white'};
border: none;
font-size: 20px;
`
您是否尝试使用.load()方法?
参考文献指出.load()重新加载元素https://www.w3schools.com/tags/av_met_load.asp