Web/API/MediaElementAudioSourceNode

The 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.

Constructor

MediaElementAudioSourceNode(): Creates a new MediaElementAudioSourceNode object instance.

Properties

Inherits properties from its parent, AudioNode.

mediaElement Read only: The HTMLMediaElement used when constructing this MediaStreamAudioSourceNode.

Methods

Inherits methods from its parent, AudioNode.

Example

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.

Note: You can also [[../../../../../../mdn.github.io/webaudio-examples/media-source-buffer/index|view this example running live]], or view the source.

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: 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.

Specification

Specification	Status	Comment
Web Audio APIThe definition of 'MediaElementAudioSourceNode' in that specification.	Working Draft

Browser compatibility

Update compatibility data on 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 Full support 14	Edge Full support ≤18	Firefox Full support 25	IE No support No	Opera Full support 15	Safari Full support 6	WebView Android Full support Yes	Chrome Android Full support 18	Firefox Android Full support 26	Opera Android Full support 14	Safari iOS Full support Yes	Samsung Internet Android Full support 1.0
`MediaElementAudioSourceNode()` constructor	Chrome Full support 55 Notes' Full support 55 Notes' Notes' Before Chrome 59, the default values were not supported.	Edge Full support ≤79	Firefox Full support 53	IE No support No	Opera Full support 42	Safari ?	WebView Android Full support 55 Notes' Full support 55 Notes' Notes' Before version 59, the default values were not supported.	Chrome Android Full support 55 Notes' Full support 55 Notes' Notes' Before Chrome 59, the default values were not supported.	Firefox Android Full support 53	Opera Android Full support 42	Safari iOS ?	Samsung Internet Android Full support 6.0 Notes' Full support 6.0 Notes' Notes' Before Samsung Internet 7.0, the default values were not supported.
`mediaElement`	Chrome Full support Yes	Edge Full support ≤79	Firefox Full support 70	IE No support No	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android No support No	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes

Legend

Full support: Full support
No support: No support
Compatibility unknown: Compatibility unknown
See implementation notes.': See implementation notes.