Question

我有这个waveurfer ni实例，这是我的项目之一。这将动态显示各种音频文件。我在要播放和暂停按钮以触发冲浪的页面上渲染此图像。

我不太了解如何传递这些功能？

代码中已标出。

提前致谢！

using (var reader = ExcelReaderFactory.CreateReader(request.ProductModelStream))

Answer 1

您将要使用useState存储对该实例的引用，并将相关的绑定方法附加到按钮：

export default function FiddleDisplay({
  audioFileUrl,
}) {
  const waveformRef = React.useRef();
  const [waveSurfer, setWaveSurfer] = React.useState();
  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}`);
      setWaveSurfer(wavesurfer);
    }
  }, []);

  const play = waveSurfer && waveSurfer.play.bind(waveSurfer);
  const pause = waveSurfer && waveSurfer.pause.bind(waveSurfer);
  return (
    <>
      <Waveform ref={waveformRef} />
      <Button onClick={play}>Play</Button>
      <Button onClick={pause}>Pause</Button>
    </>
  );
}

如果要在其他位置呈现按钮，则需要从父函数传递一个setter并传递绑定的方法。

从反应使用效果/挂钩中导出功能/方法

1 个答案: