MediaElementAudioSourceNode - 由 HTML5 <audio> 或 <video> 元素组成的音频源

MediaElementAudioSourceNode 接口表示由 HTML5 <audio> 或 <video> 元素组成的音频源。它是一个 AudioNode，充当音频源。

MediaElementSourceNode 没有输入，只有一个输出，使用 AudioContext.createMediaElementSource 方法创建。输出中的通道数等于创建节点时使用的 HTMLMediaElement 引用的音频通道数，如果 HTMLMediaElement 没有音频则为 1。

输入数量	0
输出数量	1
通道计数模式	"max"
通道数	由传递给 AudioContext.createMediaElementSource 方法的 HTMLMediaElement 中的媒体定义。

构造函数

MediaElementAudioSourceNode()

创建一个新的 MediaElementAudioSourceNode 对象实例。

属性

从其父接口 AudioNode 继承了属性。

方法

从其父接口 AudioNode 继承了方法。

实例

这个简单的例子使用 createMediaElementSource() 从 <audio> 元素创建一个源，然后通过 GainNode 传递音频，然后将其输入 AudioDestinationNode 用于播放。当移动鼠标指针时，调用 updatePage() 函数，它将当前增益计算为鼠标 Y 位置除以总窗口高度的比率。因此，您可以通过上下移动鼠标指针来增加和减少播放音乐的音量。

注意：您也可以查看此实例在线运行或查看源代码

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var myAudio = document.querySelector('audio');
var pre = document.querySelector('pre');
var myScript = document.querySelector('script');

pre.innerHTML = myScript.innerHTML;

// 创建一个 MediaElementAudioSourceNode
// 传入 HTMLMediaElement
var source = audioCtx.createMediaElementSource(myAudio);

// 创建增益节点
var gainNode = audioCtx.createGain();

// 创建变量以存储鼠标指针 Y 坐标和屏幕高度
var CurY;
var HEIGHT = window.innerHeight;

// 移动鼠标时获取新的鼠标指针坐标，然后设置新的增益值
document.onmousemove = updatePage;

function updatePage(e) {
    CurY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);

    gainNode.gain.value = CurY/HEIGHT;
}

// 将 AudioBufferSourceNode 连接到 gainNode，将 gainNode 连接到输出，这样我们就可以播放音乐并使用鼠标光标调整音量
source.connect(gainNode);
gainNode.connect(audioCtx.destination);

注意：作为调用 createMediaElementSource() 的结果，来自 HTMLMediaElement 的音频回放将被重新路由到 AudioContext 的处理图中。因此，仍然可以通过媒体元素 API 和播放器控件来播放/暂停媒体。

规范

规范	状态	备注
Web Audio API MediaElementAudioSourceNode 的定义	工作草案	-

桌面浏览器兼容性

移动浏览器兼容性

1. 在 Chrome 59 之前，不支持默认值。

相关链接

• 使用 Web Audio API