使用 AudioContext（Web 音频 API）断开节点的问题答案

【问题标题】：Problems disconnecting nodes with AudioContext (Web Audio API)使用 AudioContext（Web 音频 API）断开节点的问题
【发布时间】：2016-11-22 11:50:26
【问题描述】：

我正在构建一个显示视频音频信息的组件。我使用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)
}

我可以通过使所有内容都全局化来使其工作，即将source 和scriptNode 放在window 而不是this 上。但如果我的视频元素发生变化，这将不起作用。这样做的正确方法是什么？

【问题讨论】：

您是否偶然发现了这个问题？我面临着完全相同的问题，但仍未找到解决方案。

标签： javascript html audio web-audio-api

【解决方案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);

【讨论】：