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

js
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.

js
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

Siehe auch