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 (beispielsweise von einer Instanz von MediaDevices.getUserMedia). Die daraus resultierende Audioquelle kann dann abgespielt und manipuliert werden.
Für weitere Details zu Media-Stream-Audioquellenknoten besuchen Sie die Referenzseite des MediaStreamAudioSourceNode.
Syntax
createMediaStreamSource(stream) Parameter
stream-
Ein
MediaStream, der als Audioquelle dient und in ein Audioverarbeitungsdiagramm zur Nutzung und Manipulation eingespeist wird.
Rückgabewert
Ein neues MediaStreamAudioSourceNode-Objekt, das den Audionode darstellt, dessen Medien aus dem angegebenen Quellstream bezogen werden.
Beispiele
In diesem Beispiel nehmen wir einen Medienstream (Audio + Video) von navigator.getUserMedia, speisen die Medien in ein <video>-Element, um es abzuspielen, und schalten den Ton stumm. Gleichzeitig leiten wir das Audio in ein MediaStreamAudioSourceNode. Anschließend speisen wir diese Audioquelle in einen Tieftönungs-BiquadFilterNode (der effektiv als Bassverstärker fungiert) und dann in einen AudioDestinationNode.
Der Bereichsregler unterhalb des <video>-Elements steuert die Verstärkung, die dem Tiefpassfilter gegeben wird — Erhöhen Sie den Wert des Reglers, um den Sound basslastiger zu machen!
Hinweis: Sie können dieses Beispiel live sehen oder sich 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: Infolge des Aufrufs von createMediaStreamSource() wird die Audiowiedergabe des Medienstreams in das Verarbeitungsdiagramm des AudioContext umgeleitet. Das Abspielen/Anhalten des Streams kann dennoch über die Media-Element-API und die Player-Steuerungen erfolgen.
Spezifikationen
| Specification |
|---|
| Web Audio API # dom-audiocontext-createmediastreamsource |