使用AudioContext断开节点的问题（Web Audio API）

Question

我正在构建一个显示视频音频信息的组件。 我使用AudioContext接口从HTML5视频元素中获取音频样本。 它在我第一次创建组件时工作正常，但是当卸载组件然后在以后重新创建时，我收到以下错误消息：

未捕获的InvalidStateError：无法在'AudioContext'上执行'createMediaElementSource'：HTMLMediaElement先前已连接到不同的MediaElementSourceNode。

这是我获得音频的方式：

const video = document.querySelectorAll('video')[0]

if (!window.audioContext) {
  window.audioContext = new (window.AudioContext || window.webkitAudioContext)
}

if (!this.source && !this.scriptNode) {
  this.source = window.audioContext.createMediaElementSource(video)
  this.scriptNode = window.audioContext.createScriptProcessor(4096, 1, 1)
}

this.scriptNode.onaudioprocess = (evt) => {
 // Processing audio works fine...
}

this.source.connect(this.scriptNode)
this.scriptNode.connect(window.audioContext.destination)

当卸载组件时，我会这样做：

if (this.source && this.scriptNode) {
  this.source.disconnect(this.scriptNode)
  this.scriptNode.disconnect(window.audioContext.destination)
}

我认为这会让我处于一个可以安全地创建和连接新节点的状态。 但是下次安装组件时，此块会抛出前面提到的错误：

if (!this.source && !this.scriptNode) {
  this.source = window.audioContext.createMediaElementSource(video) // this throws the error
  this.scriptNode = window.audioContext.createScriptProcessor(4096, 1, 1)
}

我可以通过使所有内容全局化来实现它， scriptNode source和scriptNode放在window而不是this 。 但是，如果我的视频元素发生变化，那将无效。 这样做的正确方法是什么？

Answer 1

您没有破坏使用context.createMediaSourceElement创建的节点。 您的页面视频元素没有更改，您所做的就是断开音频图形中的视频音频流。 因此，视频元素仍然绑定到AudioNode，在本例中为“this.source”。 而不是尝试重新创建源只是检测源是否已定义。

if (this.source == undefined) {
  // Build element
  this.source = window.audioContext.createMediaElementSource(video);
}

this.scriptNode = window.audioContext.createScriptProcessor(4096, 1, 1)
this.source.connect(this.scriptNode);
this.scriptNode.connect(window.audioContext.destination);