从<audio>每个"时间更新"事件的元素中检索当前时间会使浏览器崩溃

Question

我正在尝试用元素的currentTime属性值更新状态变量。我在"timeupdate"事件中添加了一个事件监听器，这样我就可以用currentTime的值调用setPosition(position用于将旋钮放在代表歌曲播放的滑块上(。

然而，检索audioElement.currentTime并将结果用作setPosition的参数会使我的浏览器(Chrome和Safari(崩溃。事实上，我的macBook上的活动监视器显示，随着音频文件的播放，本地网站使用的线程数量不断增加，但我不确定这意味着什么。该站点还使用大量内存，但仅在检索每个"timeupdate"事件的currentTime属性时使用。

我不知道是什么导致了组件中的性能问题，至少我认为这是一个性能问题。

播放的音频文件是.wav

function SongPlayer({ file }) {
const [audioElement] = useState(new Audio(file));
const [playing, setPlay] = useState(null);
const [audioContext] = useState(new AudioContext({ sampleRate: 44100 }));
const [gainNode] = useState(audioContext.createGain());
const [position, setPosition] = useState(0);
useEffect(
() => {
const track = audioContext.createMediaElementSource(audioElement);
track.connect(gainNode).connect(audioContext.destination);
audioElement.addEventListener('timeupdate', () => {
setPosition(audioElement.currentTime);
});
},
[],
);
useEffect(
() => {
if (playing) audioElement.play();
else if (!playing) audioElement.pause();
},
[playing],
);
return (
<>
</>
);
}

export default SongPlayer;

localhost使用+500个线程和超过1Gb的内存

编辑：

问题是当我调用CCD_ 1作为初始状态值时。每次渲染都会调用构造函数。

这篇帖子帮助我弄清楚了这一点，并很好地解释了它：https://stackoverflow.com/a/64131447/13757284

Answer 1

我建议您使用useEffect的Cleanup回调来删除eventListener。