Google utiliza tecnología de IA para traducir contenido a tu idioma preferido. Las traducciones realizadas con IA pueden contener errores.

Cómo grabar audio desde el micrófono del usuario

François Beaufort

Es posible acceder a la cámara y al micrófono del usuario en la plataforma web con la API de Media Capture and Streams. El método getUserMedia() le solicita al usuario que acceda a una cámara o un micrófono para capturar como una transmisión de contenido multimedia. Luego, esta transmisión se puede grabar con la API de MediaRecorder o compartir con otras personas a través de la red. La grabación se puede guardar en un archivo local a través del showOpenFilePicker() método.

En el siguiente ejemplo, se muestra cómo puedes grabar audio desde el micrófono del usuario en formato WebM y guardar la grabación en el sistema de archivos del usuario.

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/articles/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();
});