在react应用中使用wavesurfer.js会导致问题

Question

使用冲浪器时出现问题。这里有一个使用react的演示，但我用的是Nextjs。我无法让codesandbox与他们的nextjs包一起工作，所以我使用react代替。我有两个问题:

1. 我得到ReferenceError: self is not defined (node_modules/wavesurfer.js/dist/wavesurfer.js (15:4))
2. 每次我做改变，波形重复。可以在演示中看到，如果你做了改变。
代码:

/**
* 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。

一直在看他们的文档，但是当我在useEffect清理函数中使用它们时没有任何作用:

useEffect(() => {
return () => waver.destroy()
}, [])

Answer 1

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

useEffect(() => {
// `wavesurfer` instance init code
return () => wavesurfer.destroy()
}, []);

---

要修复ReferenceError: self is not defined问题，您可以动态导入Wavesurfer，如所述，当我尝试导入客户端库时，为什么我得到ReferenceError: self未在Next.js中定义?