MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

MediaElementAudioSourceNode

翻译正在进行中。

MediaElementAudioSourceNode 接口代表着某个由HTML5 <audio><video> 元素所组成的音频源.该接口作为扮演音源的 AudioNode 节点.

MediaElementSourceNode 没有输入,只有一个输出,其由使用AudioContext.createMediaElementSource方法创建.输出的频道数目与节点创建时引用音频 HTMLMediaElement  的频道数目一致,或当 HTMLMediaElement 无音频时,频道数目为 1.

输入数目 0
输出数目 1
频道数 由被传递给AudioContext.createMediaElementSourceHTMLMediaElement内的音频定义.

构造函数

MediaElementAudioSourceNode.MediaElementAudioSourceNode()
创建一个新的 MediaElementAudioSourceNode 实例.

属性

集成其父类属性, AudioNode.

方法

集成其父类方法, AudioNode.

示例

该示例由 <audio> 元素,通过使用 createMediaElementSource() 方法,创建了一个音源,将其通过 GainNode 节点,输出到AudioDestinationNode 节点以播放.当鼠标指针移动时, updatePage() 函数被调用,该函数计算当前鼠标Y坐标与页面高度的比值, 改变 GainNode 节点的值以调整音量.您就可以通过鼠标上下移动而改变音乐的音量了.

Note: 您也可以 浏览该示例的在线演示, 或者 浏览源代码.

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;

// Create a MediaElementAudioSourceNode
// Feed the HTMLMediaElement into it
var source = audioCtx.createMediaElementSource(myAudio);

// Create a gain node
var gainNode = audioCtx.createGain();

// Create variables to store mouse pointer Y coordinate
// and HEIGHT of screen
var CurY;
var HEIGHT = window.innerHeight;

// Get new mouse pointer coordinates when mouse is moved
// then set new gain value

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;
}


// connect the AudioBufferSourceNode to the gainNode
// and the gainNode to the destination, so we can play the
// music and adjust the volume using the mouse cursor
source.connect(gainNode);
gainNode.connect(audioCtx.destination);

Note: 作为调用 createMediaElementSource() 的结果,HTMLMediaElement 的播放将会由AudioContext的音频处理图接管.所以对媒体进行播放/暂停等操作仍可通过media API与播放器面板来进行.

规范

Specification Status Comment
Web Audio API
MediaElementAudioSourceNode
Working Draft  

浏览器兼容性

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 14 webkit (Yes) 25 (25) 未实现 15 webkit
22 (unprefixed)
6 webkit
Constructor (Yes) ? 未实现 未实现 ? 未实现
Feature Android Chrome Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 未实现 28 webkit (Yes) 25.0 (25) 未实现 未实现 webkit
Constructor 未实现 (Yes) ? 未实现 未实现 ? 未实现

相关页面

文档标签和贡献者

 此页面的贡献者: Corps
 最后编辑者: Corps,