const line1Def = {
p: 0.7,
width: 1.3,
color: 'rgba(255,255,255,1)',
delay: 0,
}
const line2Def = {
p: 0.7,
width: 1,
color: 'rgba(255,255,255,0.5)',
delay: 0.45,
}
const stateMap = {
idle: [
{ a: 0, ws: 0, ...line1Def },
{ a: 0, ws: 0, ...line2Def },
],
noise: [
{ a: 4, ws: 9, ...line1Def },
{ a: 3, ws: 9, ...line2Def },
],
voice: [
{ a: 9, ws: 11, ...line1Def },
{ a: 7, ws: 11, ...line2Def },
],
}
function Page() {
const waveRef = useRef()
const onClick = () => {
// 建议参考Demo的代码
waveRef.current && waveRef.current.setState(Math.random() > 0.5 ? 'noise' : 'voice')
}
return <div onClick={onClick}>
<PCMWave ref={waveRef} stateMap={stateMap} />
</div>
}