如何避免 AudioContext 接口中的“HTMLMediaElement 之前已连接到不同的 MediaElementSourceNode”？

Question

我在 React 中使用 AudioContext 接口制作了一个音频可视化器，我希望用户能够启用和禁用它。
可视化器工作正常，我也可以禁用它（我只是删除了 vis 组件）

但是，当我想再次启用它时，它会告诉我： “InvalidStateError：无法在 'AudioContext' 上执行 'createMediaElementSource'：HTMLMediaElement 之前已经连接到不同的 MediaElementSourceNode。”
我想我不能同时在一个音频元素上有 2 个 ElementSource。 但我无法解决这个错误。
我试图在我的 useEffect 钩子中返回 audiocontext.close ()以便我可以创建一个新的MediaElementSource （不确定它是否以这种方式工作）但它不会改变任何东西。
也许音频元素上有一个属性可以告诉我是否已经存在 MediaElementSource？ （我什么都没找到）

或者可能 AudioContext 界面对我来说有点太难了，因为我只是 React 的初学者，我只是复制粘贴现有的可视化工具......

谢谢您的帮助！

这是我的可视化组件中的一些代码：

useEffect(() => {
  var context = new AudioContext(); //Some visualiser stuff
  var src = context.createMediaElementSource(audio);// The error is here
  src.crossOrigin = "anonymous";
  var analyser = context.createAnalyser();
  src.connect(analyser);
  analyser.connect(context.destination);
  analyser.fftSize = 1024;

  // Some canvas stuff here
  //

  return () => {
    context.close() // doesn't work ?
  };
}, [somedeps]);

return  <canvas>...</canvas>

Answer 1

我有完全相同的问题。

根据错误消息，您不需要 useEffect 中的依赖项（因为src只需要定义一次，否则会出错）。

而是将src保存到 state 并使用两个useEffect在音频更改时访问src更改：

 import React, { useEffect, useState } from "react"; const [source, setSource] = useState(null); useEffect(() => { if (window.== undefined) { const AudioContext = window.AudioContext || window;webkitAudioContext; const ctx = new AudioContext(). //declare source just once const src = ctx;createMediaElementSource(audio); setSource(src). //connect analayser to source const analayser = ctx;createAnalyser(). src;connect(analayser). analayser.connect(ctx;destination), } }; []). useEffect(() => { console;log(source): //result: MediaElementAudioSourceNode {mediaElement, audio: context, AudioContext: numberOfInputs, 0: numberOfOutputs, 1: channelCount, 2, …} }; [//use dependency here]);