MediaElementAudioSourceNode
MediaElementSourceNode
没有输入,只有一个输出,其由使用AudioContext.createMediaElementSource
方法创建.输出的频道数目与节点创建时引用音频 HTMLMediaElement
的频道数目一致,或当 HTMLMediaElement
无音频时,频道数目为 1.
输入数目 | 0 |
---|---|
输出数目 | 1 |
频道数 | 由被传递给AudioContext.createMediaElementSource 的HTMLMediaElement 内的音频定义. |
构造函数
MediaElementAudioSourceNode.MediaElementAudioSourceNode()
(en-US)- 创建一个新的
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 |
浏览器兼容性
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help! (en-US)
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | 14 webkit (en-US) | (Yes) | 25 (25) | 未实现 | 15 webkit (en-US) 22 (unprefixed) |
6 webkit (en-US) |
Constructor | (Yes) | ? | 未实现 | 未实现 | ? | 未实现 |
Feature | Android | Chrome | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | 未实现 | 28 webkit (en-US) | (Yes) | 25.0 (25) | 未实现 | 未实现 | 6 webkit (en-US) |
Constructor | 未实现 | (Yes) | ? | 未实现 | 未实现 | ? | 未实现 |