关于 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

晚了几个月，但以防其他人偶然发现并想要答案：

此行为在Web Audio API 规范中进行了描述：

createMediaElementSource 方法

创建一个给定 HTMLMediaElement 的 MediaElementAudioSourceNode。作为调用此方法的结果，来自 HTMLMediaElement 的音频播放将被重新路由到 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元素中的音频。