MediaElementAudioSourceNodeで音が出ない原因の特定

前提・実現したいこと

WebAudioAPIを利用して、再生・一時停止のできる音楽再生アプリケーションを作ろうとしています。

AudioBufferSourceNodeを使用して再生する方法を考えましたが、一時停止するごとに音源ノードを新しく作成し直さなければならず、あまりよい方法とは思えませんでした。

そこで、MediaElementAudioSourceNodeを使用する方法を思いつきました。HTMLのAudio要素のコントローラをそのまま使用できるだけでなく、再生と一時停止が容易にできるため、こちらの方が適していると考えました。

発生している問題

下記のコードについて、AudioContextを宣言する箇所によって音が出たり出なかったりします。

デバッグツールで確認しても、エラー等は出ていないのでsourceの宣言などに問題があるようには思えません。

このような問題が起きる理由と、グローバルで宣言して音を出す方法をご教授願います。

該当のソースコード

html
1<audio src="some_sound.mp3" controls></audio>

javascript
1const AudioContext = window.AudioContext || window.webkitAudioContext;
2
3const audioCtx = new AudioContext();　//ここで宣言すると音が出ない
4
5const myAudio = document.querySelector('audio');
6
7myAudio.addEventListener('play', () => {
8
9  //const audioCtx = new AudioContext(); //ここで宣言すれば音が出る
10
11  let source = audioCtx.createMediaElementSource(myAudio); 
12
13  source.connect(audioCtx.destination);
14});