Audio über das Mikrofon des Nutzers aufnehmen

François Beaufort

Der Zugriff auf die Kamera und das Mikrofon des Nutzers ist auf der Webplattform mit der Media Capture und Streams API möglich. Mit der Methode getUserMedia() wird der Nutzer aufgefordert, auf eine Kamera und/oder ein Mikrofon zuzugreifen, um als Medienstream aufzunehmen. Dieser Stream kann dann mit der MediaRecorder API aufgezeichnet oder über das Netzwerk mit anderen geteilt werden. Die Aufnahme kann über die Methode showOpenFilePicker() in einer lokalen Datei gespeichert werden.

Das folgende Beispiel zeigt, wie Sie Audio über das Mikrofon des Nutzers im WebM-Format aufnehmen und im Dateisystem des Nutzers speichern können.

let stream;
let recorder;

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

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

startRecordButton.addEventListener("click", async () => {
  // For the sake of more legible code, this sample only uses the
  // `showSaveFilePicker()` method. In production, you need to
  // cater for browsers that don't support this method, as
  // outlined in https://web.dev/patterns/files/save-a-file/.

  // Prompt the user to choose where to save the recording file.
  const suggestedName = "microphone-recording.webm";
  const handle = await window.showSaveFilePicker({ suggestedName });
  const writable = await handle.createWritable();

  // Start recording.
  recorder.start();
  recorder.addEventListener("dataavailable", async (event) => {
    // Write chunks to the file.
    await writable.write(event.data);
    if (recorder.state === "inactive") {
      // Close the file when the recording stops.
      await writable.close();
    }
  });
});

stopRecordButton.addEventListener("click", () => {
  // Stop the recording.
  recorder.stop();
});

Unterstützte Browser

MediaDevices.getUserMedia()

MediaRecorder-API

showSaveFilePicker() der File System Access API

Weitere Informationen

• W3C Media Capture und Streams-Spezifikation
• W3C-MediaStream-Aufzeichnungsspezifikation
• WICG-Dateisystem-Zugriffsspezifikation

Demo

Demo öffnen