AudioContext.createMediaElementSource()

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

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

Синтаксис

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

Параметры

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

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

Объект MediaElementAudioSourceNode.

Пример

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

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

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 медиа элемента или его панель управления.

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

Спецификация Статус Комментарий
Web Audio API
Определение 'createMediaElementSource()' в этой спецификации.
Рабочий черновик  

Поддержка в браузерах

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)
Возможность Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Базовая поддержка 10.0webkit (en-US) 25.0 (25.0)  Нет 15.0webkit (en-US)
22
6.0webkit (en-US)
Возможность Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Базовая поддержка ? 26.0 1.2 ? ? ? 33.0

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