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：

中描述了此行为

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元素的音频。

关于createMediaElementSource（）的奇怪之处

1 个答案:

createMediaElementSource方法