如何在 React 中使用 wavesurfer.js？

Question

我正在尝试在我的 React 应用程序中使用 wavesurfer.js 渲染音频文件。我是菜鸟，我想知道为什么我一直收到 "Container element not found" 消息。

简而言之，这就是我需要知道的。

提前致谢！

import React from "react";
import WaveSurfer from "wavesurfer.js";

export default function Chat(){

  const wavesurfer = WaveSurfer.create({
    container: "#waveform",
  });
  
  render(
    <>
      <div id="waveform">
      </div>
    </>
  )
 }

Answer 1

您目前正在渲染函数中调用它，这意味着它会在每次组件刷新时执行。相反，您可以将它添加到 useEffect 挂钩中，这样波形函数只被调用一次并且您绑定它的元素存在。

此外，您可以使用 ref 而不是 ID，这是 React 用来引用 DOM 元素的内容。

import React, { useRef, useEffect } from "react";
import WaveSurfer from "wavesurfer.js";

export default function Chat(){
  const waveformRef = useRef();

  useEffect(() => {
    if(waveformRef.current) {
      const wavesurfer = WaveSurfer.create({
        container: waveformRef.current,
      });
    }
  }, []);
  
  return(
    <>
      <div ref={waveformRef}>
      </div>
    </>
  )
 }

useEffect Refs

如何在 React 中使用 wavesurfer.js？

How to use wavesurfer.js in React?

reactjs

wavesurfer.js