У меня есть этот экземпляр waveurfer ni, один из моих проектов. Это отображает различные аудио файлы динамически. Я отрисовываю это на странице, где я хочу, чтобы кнопки воспроизведения и паузы вызывали волну серфера.
Я не совсем понимаю, как я могу передать эти функции?
Они отмечены в коде.
Спасибо заранее!
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} />
</>
);
}