sinanisler logo

Recording Voice with Microphone on Browser, Save .WAV, Native JS

Started working on an AI Wearable project and needed a clean native way of recording voice and saving it.

This methodology is the best and cross-platform. Enjoy using it 😉

<button id="startButton">Start Recording</button>
<button id="stopButton" style="display: none;">Stop Recording</button>

  let mediaRecorder;
  let audioChunks = [];

  document.getElementById("startButton").addEventListener("click", function() {
    navigator.mediaDevices.getUserMedia({ audio: true })
      .then(stream => {
        mediaRecorder = new MediaRecorder(stream);

        mediaRecorder.addEventListener("dataavailable", event => {
        }); = 'none';
        document.getElementById("stopButton").style.display = '';

  document.getElementById("stopButton").addEventListener("click", function() {

    mediaRecorder.addEventListener("stop", () => {
      const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
      const audioUrl = URL.createObjectURL(audioBlob);
      const audio = new Audio(audioUrl);;

      // Create a download link for the WAV file
      const downloadLink = document.createElement("a");
      downloadLink.href = audioUrl; = "recorded_audio.wav";
      downloadLink.textContent = "Download WAV";

      audioChunks = []; = 'none';
      document.getElementById("startButton").style.display = '';

Here is the working demo that you can try on codepen.

Tested Chrome and Firefox works fine. Not sure about Safari. Safari pain in the ass I will not even bother looking for that stupid browser. Maybe later.

Leave the first comment