在 react 应用程序中使用 wavesurfer.js 会导致问题答案

【问题标题】：Using wavesurfer.js in a react app cause issues在 react 应用程序中使用 wavesurfer.js 会导致问题
【发布时间】：2021-12-04 20:36:03
【问题描述】：

使用wavesurfer 时遇到问题。我有一个使用 react 的demo here，但我使用的是 Nextjs。我无法让 codeandbox 与他们的 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>
  );
}

对于第一个问题，要消除错误，我必须刷新页面，直到错误消失。兼容性问题？最后，如何预防二号？

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

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


useEffect(() => {

  return () => waver.destroy()

}, [])

【问题讨论】：

对于问题 1，这是否回答了您的问题：Why am I getting ReferenceError: self is not defined in Next.js when I try to import a client-side library?
@juliomalves 我忘了在我的下一个/动态中添加“ssr：false”。是的，我会在这里复制代码。等一下……
您是否尝试过在wavesurfer 实例上调用destroy，例如return () => wavesurfer.destroy()？
@juliomalves 出于某种原因我从未尝试过。我想我更多地关注第一个问题。你的两个问题都解决了我的答案。谢谢！

标签： reactjs next.js wavesurfer.js

【解决方案1】：

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

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

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

要修复ReferenceError: self is not defined 问题，您可以按照Why am I getting ReferenceError: self is not defined in Next.js when I try to import a client-side library? 中的说明动态导入Wavesurfer。

【讨论】：