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