Enregistrer du son à partir du micro de l'utilisateur

François Beaufort
François Beaufort

Sur la plate-forme Web, il est possible d'accéder à la caméra et au micro de l'utilisateur grâce à l'API Media Capture and Streams. La méthode getUserMedia() invite l'utilisateur à accéder à une caméra et/ou à un micro pour enregistrer en tant que flux multimédia. Ce flux peut ensuite être enregistré avec l'API MediaRecorder ou partagé avec d'autres utilisateurs sur le réseau. L'enregistrement peut être sauvegardé dans un fichier local via la méthode showOpenFilePicker().

L'exemple ci-dessous montre comment enregistrer un enregistrement audio au format WebM à partir du micro d'un utilisateur et le sauvegarder dans son système de fichiers.

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

Prise en charge des navigateurs

MediaDevices.getUserMedia()

Navigateurs pris en charge

  • 53
  • 12
  • 36
  • 11

Source

API MediaRecorder

Navigateurs pris en charge

  • 47
  • 79
  • 25
  • 14.1

Source

ShowSaveFilePicker() de l'API File System Access

Navigateurs pris en charge

  • 86
  • 86
  • x
  • x

Source

Complément d'informations

Démonstration

Ouvrir la démo