我有这个wavesurfer ni的实例,这是我的一个项目。这会动态显示各种音频文件。我正在将其呈现在我想要播放和暂停按钮以触发 Wave surfer 的页面上。
我不太明白如何传递这些功能?
它们在代码中被标记。
提前致谢!
export default function FiddleDisplay({ audioFileUrl }) {
const waveformRef = React.useRef();
React.useEffect(() => {
if (waveformRef.current) {
const activeWaveColor = '#f5f5f5';
const playedWaveColor = '#707070';
const wavesurfer = WaveSurfer.create({
container: waveformRef.current,
barWidth: 5,
cursorWidth: 2,
waveColor: activeWaveColor,
progressColor: playedWaveColor,
hideScrollbar: true,
autoCenter: false,
responsive: true,
width: 100,
barHeight: 9,
height: 350,
interact: true,
maxCanvasWidth: 2000,
fillParent: true
});
wavesurfer.load(`${audioFileUrl}`);
wavesurfer.play(); //USE THIS IN OTHER COMPONENT
wavesurfer.pause(); //USE THIS IN OTHER COMPONENT
}
}, []);
return (
<>
<Waveform ref={waveformRef} />
</>
);
}