AudioContext: createMediaStreamSource()-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 createMediaStreamSource()-Methode der AudioContext-Schnittstelle wird verwendet, um ein neues MediaStreamAudioSourceNode-Objekt zu erstellen, basierend auf einem Media-Stream (zum Beispiel von einer MediaDevices.getUserMedia-Instanz), dessen Audio dann abgespielt und manipuliert werden kann.

Für weitere Details zu Media-Stream-Audioquellen-Knoten sehen Sie sich die Referenzseite zu MediaStreamAudioSourceNode an.

Syntax

js
createMediaStreamSource(stream)

Parameter

stream

Ein MediaStream, der als Audioquelle dient und in einen Audioverarbeitungsgrafen eingespeist wird, um genutzt und manipuliert zu werden.

Rückgabewert

Ein neues MediaStreamAudioSourceNode-Objekt, das den Audioknoten darstellt, dessen Medien aus dem angegebenen Quellstream stammen.

Beispiele

In diesem Beispiel wird ein Media-Stream (Audio + Video) von navigator.getUserMedia erfasst, in ein <video>-Element eingespeist, um es abzuspielen und den Ton stummzuschalten, aber das Audio auch in ein MediaStreamAudioSourceNode eingespeist. Danach wird diese Audioquelle in einen Lowpass-Filterknoten BiquadFilterNode eingespeist (der effektiv als Bass-Booster dient), und dann in einen AudioDestinationNode.

Der Range-Slider unter dem <video>-Element steuert die Verstärkung des Lowpass-Filters — erhöhen Sie den Wert des Sliders, um den Bass stärker klingen zu lassen!

Hinweis: Sie können dieses laufende Beispiel sehen oder den Quellcode ansehen.

js
const pre = document.querySelector("pre");
const video = document.querySelector("video");
const myScript = document.querySelector("script");
const range = document.querySelector("input");

// getUserMedia block - grab stream
// put it into a MediaStreamAudioSourceNode
// also output the visuals into a video element

if (navigator.mediaDevices) {
  console.log("getUserMedia supported.");
  navigator.mediaDevices
    .getUserMedia({ audio: true, video: true })
    .then((stream) => {
      video.srcObject = stream;
      video.onloadedmetadata = (e) => {
        video.play();
        video.muted = true;
      };

      // Create a MediaStreamAudioSourceNode
      // Feed the HTMLMediaElement into it
      const audioCtx = new AudioContext();
      const source = audioCtx.createMediaStreamSource(stream);

      // Create a biquad filter
      const biquadFilter = audioCtx.createBiquadFilter();
      biquadFilter.type = "lowshelf";
      biquadFilter.frequency.value = 1000;
      biquadFilter.gain.value = range.value;

      // 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(biquadFilter);
      biquadFilter.connect(audioCtx.destination);

      // Get new mouse pointer coordinates when mouse is moved
      // then set new gain value

      range.oninput = () => {
        biquadFilter.gain.value = range.value;
      };
    })
    .catch((err) => {
      console.log(`The following gUM error occurred: ${err}`);
    });
} else {
  console.log("getUserMedia not supported on your browser!");
}

// dump script to pre element

pre.textContent = myScript.textContent;

Hinweis: Als Folge des Aufrufs von createMediaStreamSource() wird die Audiowiedergabe aus dem Media-Stream in den Verarbeitungsgrafen des AudioContext umgeleitet. Das Abspielen/Pausieren des Streams kann weiterhin über die Media-Element-API und die Wiedergabesteuerung erfolgen.

Spezifikationen

Specification
Web Audio API
# dom-audiocontext-createmediastreamsource

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch