AudioContext.createMediaElementSource()

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

Узнать больше о созданном таким образом аудио узле можно на справочной странице 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);

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

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

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

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

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

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

Метки документа и участники

 Внесли вклад в эту страницу: Agreggor
 Обновлялась последний раз: Agreggor,