在 React 应用程序中使用 wavesurfer.js 会导致问题

Question

使用 wavesurfer. I have a demo here 使用 React 时遇到问题，但我使用的是 Nextjs。我无法让 codesandbox 与他们的 nextjs 包一起工作，所以我改用 react。我有两个问题：

我收到 ReferenceError: self is not defined (node_modules/wavesurfer.js/dist/wavesurfer.js (15:4))
每次我进行更改时，wavesurfer 都会重复。如果您进行更改，可以在演示中看到。

代码：

/**
 * This file is imported using next/dynamic in my Next.js app:
 * import dynamic from 'next/dynamic'
 * const Player = dynamic(() => import('components/Player'), { ssr: false })
 */
import { useEffect, useRef, useState } from "react";
import WaveSurfer from "wavesurfer.js";

export default function Player() {
  const [waver, setWaver] = useState(null);
  const [playing, setPlaying] = useState(false);

  const el = useRef();
  const audioEl = useRef();

  useEffect(() => {
    if (el.current) {
      let wavesurfer = WaveSurfer.create({
        barWidth: 3,
        barHeight: 1,
        cursorWidth: 1,
        container: el.current,
        backend: "WebAudio",
        height: 60,
        progressColor: "#fff",
        responsive: true,
        waveColor: "rgba(255,255,255,.38",
        cursorColor: "#fff"
      });

      wavesurfer.load(audioEl.current);

      setWaver(wavesurfer);
    }
  }, []);

  const handlePlay = () => {
    setPlaying(!playing);
    waver?.playPause();
  };

  return (
    <div className="max-w-lg w-full rounded-md bg-blue-600 p-3">
      <div className="flex items-center">
        <PlayButton onClick={handlePlay} />
        <div className="flex-1" ref={el} />
      </div>
      <audio
        ref={audioEl}
        src={
          "https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3"
        }
      />
    </div>
  );
}

function PlayButton({ onClick }) {
  return (
    <button
      onClick={onClick}
      className="h-10 w-10 rounded-full bg-white/[0.3] hover:bg-white/[0.4] flex items-center justify-center cursor-pointer"
    >
      <PlayIcon />
    </button>
  );
}

function PlayIcon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="22"
      height="22"
      viewBox="0 0 35.713 39.635"
    >
      <path
        d="M14.577.874C11-1.176,8.107.5,8.107,4.621V35.01c0,4.122,2.9,5.8,6.47,3.751L41.139,23.529c3.575-2.05,3.575-5.372,0-7.422Z"
        transform="translate(-8.107 0)"
        fill="#f7f7f7"
      />
    </svg>
  );
}

对于第一个问题，为了消除错误，我必须刷新页面直到错误消失。兼容性问题？最后，如何预防第 2 种情况？

根据 juliomalves 的评论，将 ssr: false 添加到我的导入解决了第 1 个问题。

一直在查看它们的 doc，但是当我在 useEffect 清理函数中使用它们时没有任何效果：


useEffect(() => {

  return () => waver.destroy()

}, [])

Answer 1

为确保 Wavesurfer 不重复，您需要在组件卸载时销毁 wavesurfer 实例，这可以在 useEffect 的清理阶段完成。

useEffect(() => {
    // `wavesurfer` instance init code

    return () => wavesurfer.destroy()
}, []);

要修复 ReferenceError: self is not defined 问题，您可以按照中的说明动态导入 Wavesurfer。

在 React 应用程序中使用 wavesurfer.js 会导致问题

Using wavesurfer.js in a react app cause issues

reactjs

next.js

wavesurfer.js