AudioContext: createMediaStreamDestination()-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 createMediaStreamDestination()-Methode der AudioContext-Schnittstelle wird verwendet, um ein neues MediaStreamAudioDestinationNode-Objekt zu erstellen, das mit einem WebRTC MediaStream verknüpft ist, der einen Audiostream darstellt, der in einer lokalen Datei gespeichert oder an einen anderen Computer gesendet werden kann.
Der MediaStream wird erstellt, wenn der Knoten erstellt wird und ist über das stream-Attribut des MediaStreamAudioDestinationNode zugänglich. Dieser Stream kann ähnlich wie ein MediaStream verwendet werden, der über navigator.getUserMedia erhalten wurde – er kann beispielsweise an einen entfernten Teilnehmer mit der addStream()-Methode von RTCPeerConnection gesendet werden.
Für weitere Details zu Media-Stream-Destination-Knoten besuchen Sie die MediaStreamAudioDestinationNode-Referenzseite.
Syntax
createMediaStreamDestination()
Parameter
Keine.
Rückgabewert
Beispiele
Im folgenden einfachen Beispiel erstellen wir einen MediaStreamAudioDestinationNode, einen OscillatorNode und einen MediaRecorder (das Beispiel funktioniert derzeit nur in Firefox und Chrome). Der MediaRecorder wird eingerichtet, um Informationen vom MediaStreamDestinationNode aufzuzeichnen.
Wenn der Button geklickt wird, startet der Oszillator, und der MediaRecorder wird gestartet. Wenn der Button gestoppt wird, werden sowohl der Oszillator als auch der MediaRecorder gestoppt. Das Stoppen des MediaRecorder löst das dataavailable-Ereignis aus, und die Ereignisdaten werden in das chunks-Array geschoben. Anschließend wird das stop-Ereignis ausgelöst, ein neuer blob wird vom Typ opus erstellt — der die Daten im chunks-Array enthält, und ein neues Fenster (Tab) wird dann geöffnet, das auf eine URL verweist, die aus dem Blob erstellt wurde.
Von hier aus können Sie die opus-Datei abspielen und speichern.
<button>Make sine wave</button> <audio controls></audio>
const b = document.querySelector("button");
let clicked = false;
const chunks = [];
const ac = new AudioContext();
const osc = ac.createOscillator();
const dest = ac.createMediaStreamDestination();
const mediaRecorder = new MediaRecorder(dest.stream);
osc.connect(dest);
b.addEventListener("click", (e) => {
if (!clicked) {
mediaRecorder.start();
osc.start(0);
e.target.textContent = "Stop recording";
clicked = true;
} else {
mediaRecorder.stop();
osc.stop(0);
e.target.disabled = true;
}
});
mediaRecorder.ondataavailable = (evt) => {
// Push each chunk (blobs) in an array
chunks.push(evt.data);
};
mediaRecorder.onstop = (evt) => {
// Make blob out of our blobs, and open it.
const blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
document.querySelector("audio").src = URL.createObjectURL(blob);
};
Hinweis: Sie können dieses Beispiel live ansehen, oder den Quellcode studieren auf GitHub.
Spezifikationen
| Specification |
|---|
| Web Audio API # dom-audiocontext-createmediastreamdestination |