javascript - 关于createMediaElementSource()的怪异

我正在构建一个音频程序，并在.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不会返回数组，因此我不知道为什么将音频作为数组来工作，而仅引用音频却不行。

最佳答案

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

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



强调我的。由于音频元素的输出现在被路由到新创建的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元素中的音频。