javascript - 关于 createMediaElementSource() 的奇怪之处

Question

我正在构建一个音频程序，并在 .createMediaElementSource 方法上遇到了障碍。我能够解决该问题，但我不太清楚为什么该解决方案有效。

在我的 HTML 中，我创建了一个音频播放器:<audio id="myAudio><source src="music.mp3"></audio>

现在在我的 JS 中:

context = new AudioContext();
audio = document.getElementById('myAudio');
source = context.createMediaElementSource(audio);
audio.play();

不起作用。音频元素加载，但不播放歌曲，也没有音频。

但是!此 JS 代码有效:

context = ...; //same as above
audio...;
source = context.createMediaElementSource(audio[0]);
audio.play();

我所做的只是在音频中添加了一个 [0]，然后程序突然又开始工作了。由于 .getElementById 不返回数组，因此我不知道为什么将音频引用为数组有效，但仅引用音频则不行。

Answer 1

晚了几个月，但以防万一其他人偶然发现这一点并想要答案:

the Web Audio API spec 中描述了此行为:

The createMediaElementSource method

Creates a MediaElementAudioSourceNode given an HTMLMediaElement. As a consequence of calling this method, audio playback from the HTMLMediaElement will be re-routed into the processing graph of the AudioContext.

强调我的。由于音频元素的输出现在路由到新创建的 MediaElementAudioSourceNode 实例(而不是原始目的地，通常是您的扬声器)，因此您需要将该实例的输出路由回原始目的地:

var audio = document.getElementById('myAudio');
var ctx = new AudioContext();

var src = ctx.createMediaElementSource(audio);
src.connect(ctx.destination); // connect the output of the source to your speakers
audio.play();

添加 [0] 后它起作用的原因是 document.getElementById 不返回数组或定义键为“0”的元素。因此，您可能还编写了 ctx.createMediaElementSource(undefined)，它不会从 #myAudio 元素重新路由音频。