Вы читаете английскую версию этой статьи, так как пока нет перевода на данный язык. Помогите нам перевести эту статью!
Метод 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 |