AudioContext: метод createMediaElementSource()
Базовая поддержка Широко доступна
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с апреля 2021 года.
Метод createMediaElementSource() интерфейса AudioContext используется для создания нового объекта MediaElementAudioSourceNode, используя существующий HTML-элемент <audio> или <video>, чтобы затем воспроизводить и обрабатывать звук из них.
Дополнительные сведения о узлах аудиоисточника медиа-элементов можно найти на странице справки MediaElementAudioSourceNode.
Синтаксис
createMediaElementSource(myMediaElement)
Параметры
myMediaElement-
Объект
HTMLMediaElement, который вы хотите добавить в график обработки аудио для манипулирования им.
Возвращаемое значение
Объект MediaElementAudioSourceNode.
Примеры
В этом простом примере создается источник из элемента <audio> с помощью createMediaElementSource(), затем звук проходит через узел усиления GainNode перед подачей на узел вывода AudioDestinationNode для воспроизведения. При перемещении курсора мыши вызывается функция updatePage(), которая вычисляет текущее усиление как отношение положения курсора по оси Y к общей высоте окна. Таким образом, вы можете увеличивать и уменьшать громкость воспроизводимой музыки, перемещая курсор мыши вверх и вниз.
Примечание: Вы также можете посмотреть этот пример в действии или посмотреть исходный код.
const audioCtx = new AudioContext();
const myAudio = document.querySelector("audio");
// Create a MediaElementAudioSourceNode
// Feed the HTMLMediaElement into it
const source = audioCtx.createMediaElementSource(myAudio);
// Create a gain node
const gainNode = audioCtx.createGain();
// Create variables to store mouse pointer Y coordinate
// and HEIGHT of screen
let curY;
const HEIGHT = window.innerHeight;
// Get new mouse pointer coordinates when mouse is moved
// then set new gain value
document.onmousemove = updatePage;
function updatePage(e) {
curY = e.pageY;
gainNode.gain.value = curY / HEIGHT;
}
// Connect the AudioBufferSourceNode to the gainNode
// and the gainNode to the destination, so we can play the
// music and adjust the volume using the mouse cursor
source.connect(gainNode);
gainNode.connect(audioCtx.destination);
Примечание: Вследствие вызова createMediaElementSource(), воспроизведение звука из HTMLMediaElement будет перенаправлено в график обработки AudioContext. Поэтому воспроизведение/пауза медиа могут по-прежнему выполняться с помощью API медиа-элементов и элементов управления плеером.
Спецификации
Совместимость с браузерами
| Рабочие столы | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | |
createMediaElementSource |
15 | 12 | 25Если для контекста аудио задана частота дискретизации, она должна совпадать с частотой дискретизации потока, в противном случае этот метод завершится ошибкой. |
15 | 6 | 18 | 25Если для контекста аудио задана частота дискретизации, она должна совпадать с частотой дискретизации потока, в противном случае этот метод завершится ошибкой. |
14 | 6 | 1.0 | ≤37 |
См. также
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createMediaElementSource