Google utilise la technologie IA pour traduire le contenu dans votre langue préférée. Les traductions générées par IA peuvent contenir des erreurs.

Enregistrer du son à partir du micro de l'utilisateur

François Beaufort

Il est possible d'accéder à la caméra et au micro de l'utilisateur sur la plate-forme Web avec l'API Media Capture and Streams. La méthode getUserMedia() invite l'utilisateur à accéder à une caméra et/ou à un micro pour capturer un flux multimédia. Ce flux peut ensuite être enregistré avec l'API MediaRecorder ou partagé avec d'autres personnes sur le réseau. L'enregistrement peut être enregistré dans un fichier local à l'aide de la showOpenFilePicker() méthode.

L'exemple ci-dessous montre comment enregistrer l'audio du micro de l'utilisateur au format WebM et enregistrer l'enregistrement dans le système de fichiers de l'utilisateur.

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