MediaElementAudioSourceNode.mediaElement — Eigenschaft · JavaScript-Referenz

Signatur

MediaElementAudioSourceNode.mediaElement

Beschreibung

Die Eigenschaft mediaElement eines MediaElementAudioSourceNode verweist auf das HTMLMediaElement, also auf ein <audio>- oder <video>-Element. Dieses wurde beim Erzeugen des Knotens über AudioContext.createMediaElementSource() oder den Konstruktor new MediaElementAudioSourceNode(context, { mediaElement }) übergeben.

Nützlich ist sie vor allem, wenn ein Knoten an eine andere Stelle im Code weitergereicht wird und man die Wiedergabe von dort aus steuern will, etwa mit play(), pause(), currentTime oder volume. Man muss dann keine eigene Referenz auf das Element mitführen. Auch beim Aufräumen eines Audio-Graphen oder beim Debuggen hilft sie, weil sich damit ermitteln lässt, zu welchem Element ein Knoten gehört.

Die Eigenschaft ist schreibgeschützt. Einem bestehenden Knoten lässt sich also kein anderes Element zuweisen. Um ein anderes Element als Quelle zu nutzen, muss man einen neuen Knoten erzeugen.

Rückgabewert

Typ

HTMLMediaElement

Beschreibung

Das <audio>- oder <video>-Element, das beim Erzeugen des Knotens angegeben wurde.

Beispiele

Quellelement eines Knotens auslesen

const audioEl = document.querySelector('audio');
const ctx = new AudioContext();
const source = ctx.createMediaElementSource(audioEl);
source.connect(ctx.destination);

console.log(source.mediaElement === audioEl);
console.log(source.mediaElement.tagName);

true AUDIO

Wiedergabe über den Knoten steuern

const ctx = new AudioContext();
const video = document.querySelector('#clip');
const source = new MediaElementAudioSourceNode(ctx, { mediaElement: video });
const gain = new GainNode(ctx, { gain: 0.5 });
source.connect(gain).connect(ctx.destination);

// Hilfsfunktion, die nur den Knoten erhält
const togglePlayback = async (node) => {
  await node.context.resume(); // Autoplay-Sperre aufheben
  const el = node.mediaElement;
  el.paused ? await el.play() : el.pause();
  console.log(el.paused ? 'pausiert' : 'spielt');
};

document.querySelector('#toggle')
  .addEventListener('click', () => togglePlayback(source));

spielt

Audio-Graph aufräumen

const cleanup = (sourceNode) => {
  const el = sourceNode.mediaElement;
  el.pause();
  el.removeAttribute('src');
  el.load(); // Puffer freigeben
  sourceNode.disconnect();
  console.log('Quelle getrennt:', el.id || el.tagName);
};

const ctx = new AudioContext();
const el = document.querySelector('#player');
const node = ctx.createMediaElementSource(el);
node.connect(ctx.destination);
cleanup(node);

Quelle getrennt: player

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie source.mediaElement = other bewirkt nichts. Im Strict Mode löst sie einen TypeError aus.
Ein Medienelement kann nur einmal an einen MediaElementAudioSourceNode gebunden werden. Ein zweiter Aufruf von createMediaElementSource() mit demselben Element wirft einen InvalidStateError. Die Referenz auf den Knoten sollte man deshalb aufbewahren.
Ist das Element mit einem Knoten verbunden, läuft sein Ton ausschließlich über den Audio-Graphen. Ohne connect(ctx.destination) hört man nichts.
Bei Medien von anderen Ursprüngen (Cross-Origin) ohne gültige CORS-Freigabe (crossorigin-Attribut und passende Server-Header) gibt der Knoten nur Stille aus.
Wegen der Autoplay-Richtlinien der Browser startet ein AudioContext oft im Zustand suspended. resume() sollte man daher nach einer Nutzeraktion aufrufen.
Die Eigenschaft ist nicht in OfflineAudioContext verfügbar, weil dort keine MediaElementAudioSourceNode-Knoten erzeugt werden können.

Siehe auch

DelegatedInkTrailPresenter.expectedImprovement MediaStreamAudioSourceNode.mediaStream Element.ariaActiveDescendantElement NavigateEvent.sourceElement SVGAElement.interestForElement