AudioContext（Web Audio API）でノードを切断する際の問題

Question

ビデオのオーディオに関する情報を表示するコンポーネントを構築しています。 AudioContextインターフェイスを使用して、HTML5ビデオ要素からオーディオサンプルを取得します。それは罰金、私はコンポーネントを作成する最初の時間を動作しますが、コンポーネントをアンマウントし、後の時点で再作成されるとき、私は、次のエラーメッセージが表示されます。

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) 
} 

私はこれは私が安全に新しいノードを作成し、接続できる状態に私を置くだろうと思いました。しかし、次回部品が実装され、このブロックは、前述のエラーがスローされます。

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

は、私はそれがすなわちwindowはなくthisにsourceとscriptNodeを入れ、すべてがグローバルすることによって動作するように得ることができます。しかし、それは私のビデオ要素が変更された場合には機能しません。これを行う正しい方法は何ですか？

Answer 1

あなたはcontext.createMediaSourceElementで作成したノードを破壊していません。あなたは変更されていないオンページのビデオ要素を持っています。オーディオグラフからビデオオーディオストリームが切り離されているだけです。したがって、video要素は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);