javascript - 使用 AudioContext(Web 音频 API)断开节点连接时出现问题

Question

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

Uncaught InvalidStateError: Failed to execute 'createMediaElementSource' on 'AudioContext': HTMLMediaElement already connected previously to a different 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)
}

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

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。但如果我的视频元素发生变化，那将不起作用。执行此操作的正确方法是什么？

Answer 1

您不会破坏您使用 context.createMediaSourceElement 创建的节点。您的页面视频元素没有改变，您所做的只是断开视频音频流与音频图的连接。因此，视频元素仍然绑定(bind)到 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);