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

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

<script>
  let mediaRecorder;
  let audioChunks = [];

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

        mediaRecorder.addEventListener("dataavailable", event => {
          audioChunks.push(event.data);
        });

        this.style.display = 'none';
        document.getElementById("stopButton").style.display = '';
      });
  });

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

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

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

      audioChunks = [];

      this.style.display = 'none';
      document.getElementById("startButton").style.display = '';
    });
  });
</script>