MediaElementAudioSourceNode

MediaElementAudioSourceNode interface represents an audio source consisting of an HTML5 <audio> or <video> element. It is an AudioNode that acts as an audio source.

A MediaElementSourceNode has no inputs and exactly one output, and is created using the AudioContext.createMediaElementSource() method. The amount of channels in the output equals the number of channels of the audio referenced by the HTMLMediaElement used in the creation of the node, or is 1 if the HTMLMediaElement has no audio.

Number of inputs 0
Number of outputs 1
Channel count defined by the media in the HTMLMediaElement passed to the AudioContext.createMediaElementSource method that created it.

构造函数

MediaElementAudioSourceNode()
创建新的 MediaElementAudioSourceNode object instance.

特性

Inherits properties from its parent, AudioNode .

mediaElement 只读
HTMLMediaElement used when constructing this MediaStreamAudioSourceNode .

方法

Inherits methods from its parent, AudioNode .

范例

This simple example creates a source from an <audio> element using createMediaElementSource() , then passes the audio through a GainNode before feeding it into the AudioDestinationNode for playback. When the mouse pointer is moved, the updatePage() function is invoked, which calculates the current gain as a ratio of mouse Y position divided by overall window height. You can therefore increase and decrease the volume of the playing music by moving the mouse pointer up and down.

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

注意 : As a consequence of calling createMediaElementSource() , audio playback from the HTMLMediaElement will be re-routed into the processing graph of the AudioContext. So playing/pausing the media can still be done through the media element API and the player controls.

规范

规范 状态 Comment
Web 音频 API
The definition of 'MediaElementAudioSourceNode' in that specification.
工作草案

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
MediaElementAudioSourceNode Chrome 14 Edge ≤18 Firefox 25 IE 不支持 No Opera 15 Safari 6 WebView Android Yes Chrome Android 18 Firefox Android 26 Opera Android 14 Safari iOS Yes Samsung Internet Android 1.0
MediaElementAudioSourceNode() 构造函数 Chrome 55
注意事项
55
注意事项
Before Chrome 59, the default values were not supported.
Edge ≤79 Firefox 53 IE 不支持 No Opera 42 Safari ? WebView Android 55
注意事项
55
注意事项
Before version 59, the default values were not supported.
Chrome Android 55
注意事项
55
注意事项
Before Chrome 59, the default values were not supported.
Firefox Android 53 Opera Android 42 Safari iOS ? Samsung Internet Android 6.0
注意事项
6.0
注意事项
Before Samsung Internet 7.0, the default values were not supported.
mediaElement Chrome Yes Edge ≤79 Firefox 70 IE 不支持 No Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 不支持 No Opera Android Yes Safari iOS Yes Samsung Internet Android Yes

图例

完整支持
完整支持
不支持
不支持
兼容性未知
兼容性未知
见实现注意事项。

另请参阅