AudioContext.createMediaStreamTrackSource() — Methode · JavaScript-Referenz

Signatur

AudioContext.prototype.createMediaStreamTrackSource(audioTrack)

Beschreibung

Mit createMediaStreamTrackSource() bindest du eine einzelne Audiospur, etwa von einem Mikrofon (getUserMedia()), einer Bildschirmaufnahme oder einer WebRTC-Verbindung, als Quellknoten in einen AudioContext ein. Der zurückgegebene MediaStreamTrackAudioSourceNode hat keine Eingänge und einen Ausgang. Du kannst ihn mit Filtern, Analysatoren, Gain-Knoten oder direkt mit audioContext.destination verbinden.

Der Unterschied zu createMediaStreamSource(): Dort übergibst du einen ganzen MediaStream. Enthält der Stream mehrere Audiospuren, wird nur eine davon verwendet, und zwar die, deren id in lexikografischer Sortierung zuerst kommt. Das ist schwer vorhersagbar. createMediaStreamTrackSource() nimmt dagegen gezielt die Spur, die du übergibst.

Typische Einsatzfälle sind Pegelanzeigen für das Mikrofon, Sprachaktivitätserkennung, Echtzeit-Effekte auf Remote-Audio in WebRTC-Anwendungen oder das Mischen mehrerer einzelner Spuren. Die Methode ist gleichwertig mit dem Konstruktor new MediaStreamTrackAudioSourceNode(context, { mediaStreamTrack }).

Parameter

Name	Typ	Default	Beschreibung
$audioTrack Pflicht	MediaStreamTrack		Die Spur, deren Audiodaten in den Graphen fließen sollen. Ihre Eigenschaft `kind` muss `"audio"` sein.

Rückgabewert

Typ

MediaStreamTrackAudioSourceNode

Beschreibung

Ein neuer Quellknoten, der die Audiodaten der übergebenen Spur liefert. Er hat einen Ausgang und keine Eingänge.

Beispiele

Mikrofonspur direkt analysieren (Pegelanzeige)

const ctx = new AudioContext();
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const [track] = stream.getAudioTracks();

const source = ctx.createMediaStreamTrackSource(track);
const analyser = ctx.createAnalyser();
analyser.fftSize = 256;
source.connect(analyser);

const data = new Uint8Array(analyser.frequencyBinCount);
const tick = () => {
  analyser.getByteFrequencyData(data);
  const level = data.reduce((a, b) => a + b, 0) / data.length;
  console.log('Pegel:', level.toFixed(1));
  requestAnimationFrame(tick);
};
tick();

Pegel: 12.4 Pegel: 37.9 ...

Browserübergreifend mit Fallback auf createMediaStreamSource()

const createTrackSource = (ctx, track) => {
  if (typeof ctx.createMediaStreamTrackSource === 'function') {
    return ctx.createMediaStreamTrackSource(track);
  }
  // Fallback: Stream mit genau dieser einen Spur erzeugen
  return ctx.createMediaStreamSource(new MediaStream([track]));
};

const ctx = new AudioContext();
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const source = createTrackSource(ctx, stream.getAudioTracks()[0]);
console.log(source.constructor.name);

MediaStreamTrackAudioSourceNode (Firefox) bzw. MediaStreamAudioSourceNode (Chrome/Safari)

Remote-Spur aus WebRTC leiser stellen

const ctx = new AudioContext();
const pc = new RTCPeerConnection();

pc.addEventListener('track', ({ track }) => {
  if (track.kind !== 'audio') return;
  const source = ctx.createMediaStreamTrackSource(track);
  const gain = ctx.createGain();
  gain.gain.value = 0.5; // halbe Lautstärke
  source.connect(gain).connect(ctx.destination);
  console.log('Remote-Audio verbunden:', track.label);
});

Remote-Audio verbunden: ...

// Wichtig · Fallstricke

Browser-Unterstützung: Die Methode gibt es derzeit nur in Firefox (ab Version 68). Chrome, Edge und Safari kennen sie nicht. Prüfe deshalb vorher, ob sie existiert, und weiche sonst auf createMediaStreamSource(new MediaStream([track])) aus.
Ist track.kind nicht "audio", wirft die Methode eine InvalidStateError-DOMException.
Autoplay-Regeln: Ein AudioContext, der ohne Nutzeraktion erzeugt wurde, startet oft im Zustand "suspended". Rufe ctx.resume() in einem Klick-Handler auf.
Endet die Spur (track.stop() oder ended-Ereignis), liefert der Knoten nur noch Stille. Trenne ihn dann mit disconnect() vom Graphen, damit keine Ressourcen gebunden bleiben.
Das Mikrofon ist nur in sicheren Kontexten (HTTPS) und nach Zustimmung der Nutzerin oder des Nutzers verfügbar.
Die Methode gibt es nur auf AudioContext, nicht auf OfflineAudioContext.

Siehe auch

AudioContext AudioContext.createMediaStreamSource() MediaStreamTrackAudioSourceNode MediaStreamTrack MediaDevices.getUserMedia() AudioContext.createMediaStreamDestination()