AudioContext: createMediaElementSource()-Methode
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.
Die createMediaElementSource()
-Methode der AudioContext
-Schnittstelle wird verwendet, um ein neues MediaElementAudioSourceNode
-Objekt zu erstellen, basierend auf einem vorhandenen HTML-<audio>
- oder <video>
-Element. Der Ton dieses Elements kann dann abgespielt und manipuliert werden.
Für weitere Details zu Media-Element-Audioquellknoten besuchen Sie die MediaElementAudioSourceNode
-Referenzseite.
Syntax
createMediaElementSource(myMediaElement)
Parameter
myMediaElement
-
Ein
HTMLMediaElement
-Objekt, das Sie in einen Audioverarbeitungsgraphen einspeisen möchten, um es zu manipulieren.
Rückgabewert
Beispiele
In diesem einfachen Beispiel wird eine Quelle aus einem <audio>
-Element mit createMediaElementSource()
erstellt, dann wird das Audio durch einen GainNode
geleitet, bevor es in den AudioDestinationNode
zur Wiedergabe eingespeist wird. Wenn der Mauszeiger bewegt wird, wird die Funktion updatePage()
aufgerufen, die den aktuellen Gewinn als Verhältnis der Y-Position der Maus zur Gesamthöhe des Fensters berechnet. Sie können die Lautstärke der abgespielten Musik erhöhen und verringern, indem Sie den Mauszeiger nach oben und unten bewegen.
Hinweis: Sie können dieses Beispiel auch live sehen oder den Quellcode ansehen.
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);
Hinweis: Durch den Aufruf von createMediaElementSource()
wird die Audio-Wiedergabe vom HTMLMediaElement
in den Verarbeitungs-Graphen des AudioContext umgeleitet. Das Abspielen/Pausieren des Mediums kann weiterhin über die Media-Element-API und die Player-Steuerelemente erfolgen.
Spezifikationen
Specification |
---|
Web Audio API # dom-audiocontext-createmediaelementsource |
Browser-Kompatibilität
BCD tables only load in the browser