Интерфейс MediaElementAudioSourceNode
представляет собой аудио узел AudioNode
, созданный из HTML5 <audio>
или <video>
элемента. Он является источником звука.
MediaElementSourceNode
не имеет входов, а только один выход, и может быть создан методом AudioContext.createMediaElementSource
. Количество каналов в выходном сигнале равно числу каналов аудио, на которое ссылается HTMLMediaElement
используемый для создания узла, или 1, если HTMLMediaElement
не имеет аудио.
Количество входов | 0 |
---|---|
Количество выходов | 1 |
Количество каналов | зависит от содержимого медиа элемента HTMLMediaElement , переданному методу AudioContext.createMediaElementSource при создании узла. |
Свойства
Наследует свойства родителя, AudioNode
.
Методы
Наследует методы родителя, 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.
Note: You can also 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.
Спецификация
Спецификация | Статус | Комментарий |
---|---|---|
Web Audio API Определение 'MediaElementAudioSourceNode' в этой спецификации. |
Рабочий черновик |