AudioContext.createMediaStreamDestination() — Methode · JavaScript-Referenz

Signatur

AudioContext.prototype.createMediaStreamDestination()

Beschreibung

Mit createMediaStreamDestination() legen Sie im Audiograph einen MediaStreamAudioDestinationNode an. Alles, was Sie mit diesem Knoten verbinden, landet nicht in den Lautsprechern, sondern in einem MediaStream mit genau einer Audiospur. Den Stream erreichen Sie über die Eigenschaft stream des Knotens.

Das brauchen Sie vor allem in drei Fällen:

Aufnahme: Sie übergeben den Stream an MediaRecorder und speichern bearbeitetes Audio (z. B. mit Effekten oder Mischung) als Datei.
WebRTC: Sie senden bearbeitetes Audio über RTCPeerConnection.addTrack() an eine Gegenstelle, etwa ein Mikrofon mit Rauschfilter oder eine Mischung aus mehreren Quellen.
Weitergabe an andere APIs: Sie weisen den Stream einem <audio>-Element über srcObject zu.

Die Methode hat keine Parameter. Standardmäßig liefert der Knoten Stereo (2 Kanäle). Über channelCount können Sie die Kanalzahl ändern. Alternativ gibt es den Konstruktor new MediaStreamAudioDestinationNode(context, options).

Rückgabewert

Typ

MediaStreamAudioDestinationNode

Beschreibung

Ein neuer Zielknoten. Seine Eigenschaft stream enthält einen MediaStream mit einer Audiospur (MediaStreamTrack).

Beispiele

Oszillatorton mit MediaRecorder aufnehmen

const ctx = new AudioContext();
const osc = ctx.createOscillator();
const dest = ctx.createMediaStreamDestination();

osc.frequency.value = 440;
osc.connect(dest);

const recorder = new MediaRecorder(dest.stream);
const chunks = [];
recorder.ondataavailable = (e) => chunks.push(e.data);
recorder.onstop = () => {
  const blob = new Blob(chunks, { type: recorder.mimeType });
  const audio = new Audio(URL.createObjectURL(blob));
  audio.controls = true;
  document.body.append(audio);
  console.log('Aufnahme fertig:', blob.size, 'Bytes');
};

document.querySelector('#start').addEventListener('click', async () => {
  await ctx.resume();
  osc.start();
  recorder.start();
  setTimeout(() => {
    recorder.stop();
    osc.stop();
  }, 2000);
});

Aufnahme fertig: 12345 Bytes

Mikrofon filtern und per WebRTC senden

const sendFilteredMic = async (peerConnection) => {
  const ctx = new AudioContext();
  const micStream = await navigator.mediaDevices.getUserMedia({ audio: true });

  const source = ctx.createMediaStreamSource(micStream);
  const highpass = ctx.createBiquadFilter();
  highpass.type = 'highpass';
  highpass.frequency.value = 120; // Brummen unterdrücken

  const dest = ctx.createMediaStreamDestination();
  source.connect(highpass).connect(dest);

  const [track] = dest.stream.getAudioTracks();
  peerConnection.addTrack(track, dest.stream);
  return { ctx, track };
};

const pc = new RTCPeerConnection();
sendFilteredMic(pc).then(({ track }) => console.log('Gesendet:', track.kind));

Gesendet: audio

Zwei Quellen mischen und in <audio> abspielen

const ctx = new AudioContext();
const dest = ctx.createMediaStreamDestination();
dest.channelCount = 1; // Mono-Ausgabe

const makeTone = (freq, gainValue) => {
  const osc = ctx.createOscillator();
  const gain = ctx.createGain();
  osc.frequency.value = freq;
  gain.gain.value = gainValue;
  osc.connect(gain).connect(dest);
  osc.start();
  return osc;
};

makeTone(261.63, 0.3); // C
makeTone(329.63, 0.3); // E

const audioEl = document.querySelector('audio');
audioEl.srcObject = dest.stream;
console.log(dest.stream.getAudioTracks().length);

1

// Wichtig · Fallstricke

Nicht hörbar: Audio, das nur mit dem MediaStreamAudioDestinationNode verbunden ist, geben die Lautsprecher nicht aus. Wenn Sie mithören wollen, verbinden Sie die Quelle zusätzlich mit ctx.destination.
Autoplay-Richtlinie: Ein AudioContext startet oft im Zustand suspended. Rufen Sie ctx.resume() nach einer Nutzeraktion auf, sonst enthält der Stream nur Stille.
Nur für AudioContext: Die Methode gibt es auf AudioContext, nicht auf OfflineAudioContext, denn Offline-Rendering hat keinen Echtzeit-Stream.
Aufräumen: Beenden Sie nicht mehr benötigte Spuren mit track.stop() und schließen Sie den Kontext mit ctx.close(). Sonst bleiben Ressourcen belegt und das Mikrofon-Symbol bleibt sichtbar.
Abtastrate: Der Stream übernimmt die sampleRate des Kontexts. MediaRecorder und WebRTC kodieren das Audio je nach Browser neu (z. B. Opus). Die Formate, die MediaRecorder unterstützt, prüfen Sie mit MediaRecorder.isTypeSupported().
Kompatibilität: Chrome, Edge, Firefox und Safari (ab 14.1) unterstützen die Methode. In älteren Safari-Versionen fehlte sie oder brauchte webkitAudioContext.

Siehe auch

AudioContext.createMediaStreamSource() AudioContext.createMediaStreamTrackSource() AudioContext.createMediaElementSource() AudioContext.getOutputTimestamp() AudioContext.setSinkId()