Diese Seite wurde von der Cloud Translation API übersetzt.

Audio über das Mikrofon des Nutzers verarbeiten

François Beaufort

Auf der Webplattform ist der Zugriff auf die Kamera und das Mikrofon des Nutzers mit der Media Capture and Streams API möglich. Mit der Methode getUserMedia() wird der Nutzer aufgefordert, auf eine Kamera und/oder ein Mikrofon zuzugreifen, um einen Media-Stream aufzunehmen. Dieser Stream kann dann in einem separaten Web Audio-Thread mit einem AudioWorklet verarbeitet werden, das eine Audioverarbeitung mit sehr niedriger Latenz ermöglicht.

Das folgende Beispiel zeigt, wie Sie Audiodaten vom Mikrofon des Nutzers leistungsstark verarbeiten können.

let stream;

startMicrophoneButton.addEventListener("click", async () => {
  // Prompt the user to use their microphone.
  stream = await navigator.mediaDevices.getUserMedia({
    audio: true,
  });
  const context = new AudioContext();
  const source = context.createMediaStreamSource(stream);

  // Load and execute the module script.
  await context.audioWorklet.addModule("processor.js");
  // Create an AudioWorkletNode. The name of the processor is the
  // one passed to registerProcessor() in the module script.
  const processor = new AudioWorkletNode(context, "processor");

  source.connect(processor).connect(context.destination);
  log("Your microphone audio is being used.");
});

stopMicrophoneButton.addEventListener("click", () => {
  // Stop the stream.
  stream.getTracks().forEach(track => track.stop());

  log("Your microphone audio is not used anymore.");
});

// processor.js
// This file is evaluated in the audio rendering thread
// upon context.audioWorklet.addModule() call.

class Processor extends AudioWorkletProcessor {
  process([input], [output]) {
    // Copy inputs to outputs.
    output[0].set(input[0]);
    return true;
  }
}

registerProcessor("processor", Processor);