AudioContext.createMediaElementSource()

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

Синтаксис

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

Параметры

myMediaElement

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

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

Объект MediaElementAudioSourceNode.

Пример

Простой пример создания аудио узла из элемента <audio> используя createMediaElementSource(), и управления усилением звука через GainNode перед подачей в AudioDestinationNode для воспроизведения. При движении мыши вызывается функция 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);

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

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

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

• Using the Web Audio API