### HTML How to record audio from the user's microphone

How to record audio from the user's microphone


      
    

### CSS


            :root {
      color-scheme: dark light;
    }
    html {
      box-sizing: border-box;
    }
    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }
    body {
      margin: 1rem;
      font-family: system-ui, sans-serif;
    }
    button {
      display: block;
      margin-bottom: 4px;
    }
    pre {
      color: red;
      white-space: pre-line;
    }
            
### JS


            const startMicrophoneButton = document.querySelector('#startMicrophoneButton');
    const stopMicrophoneButton = document.querySelector('#stopMicrophoneButton');
    const startRecordButton = document.querySelector('#startRecordButton');
    const stopRecordButton = document.querySelector('#stopRecordButton');

    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.disabled = false;
      startRecordButton.disabled = false;
      log("Your microphone audio is being used.");
    });

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

      startRecordButton.disabled = true;
      stopRecordButton.disabled = true;
      log("Your microphone audio is not used anymore.");
    });

    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.disabled = false;
      log("Your microphone audio is being recorded locally.");
    });

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

      stopRecordButton.disabled = true;
      log("Your microphone audio has been successfully recorded locally.");
    });