AudioContext.createMediaElementSource()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

Метод createMediaElementSource() интерфейса AudioContext используется для создания объекта MediaElementAudioSourceNode из существующих HTML-элементов <audio> или <video> для дальнейших манипуляций со звуком и его воспроизведения.

Узнать больше о созданном таким образом аудио узле можно на справочной странице MediaElementAudioSourceNode.

Синтаксис

js
var audioCtx = new AudioContext();
var source = audioCtx.createMediaElementSource(myMediaElement);

Параметры

myMediaElement

Объект HTMLMediaElement, который вы хотите использовать в качестве исходного звука.

Возвращаемые значения

Пример

Простой пример создания аудио узла из элемента <audio> используя createMediaElementSource(), и управления усилением звука через GainNode перед подачей в AudioDestinationNode для воспроизведения. При движении мыши вызывается функция updatePage(), вычисляющая текущее усиление как отношение Y позиции курсора к общей высоте окна. Таким образом вы можете увеличивать/уменьшать громкость звучания аудио движениями мыши вверх/вниз.

Примечание: Вы можете также посмотреть демонстрацию или исходники.

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

// Создаём MediaElementAudioSourceNode
// На основе HTMLMediaElement
var source = audioCtx.createMediaElementSource(myAudio);

// Создаём узел контроля громкости (усиления)
var gainNode = audioCtx.createGain();

// Переменные, содержащие Y координату курсора мыши
// и высоту окна
var CurY;
var HEIGHT = window.innerHeight;

// Обновляем Y координату курсора при движении мышью
// и вычисляем новый коэффициент усиления

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

// Последний шаг - построение графа
// Подсоединяем AudioBufferSourceNode к gainNode
// а gainNode, в свою очередь, к конечному узлу вывода
// Теперь мы можем слушать музыку управляя громкостью воспроизведения движением курсора мыши :)
source.connect(gainNode);
gainNode.connect(audioCtx.destination);

Примечание: Вызов createMediaElementSource() перенаправит выходной поток аудиоданных из HTMLMediaElement в обрабатывающий граф AudioContext. Управление воспроизведением медиа все ещё будет осуществляться через API медиа элемента или его панель управления.

Спецификации

Specification
Web Audio API
# dom-audiocontext-createmediaelementsource

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
createMediaElementSource

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

Смотрите также