JSFiddle - React, Tailwind, and code Playground

by rowntreerob

HTML

<button> Start </button>
    <audio controls></audio>
    <br>
    <a id="download">download your file</a>
    <script>  
     var b = document.querySelector("button");
     var clicked = false;
     var chunks = [];
		 var recorder;
     var type = 'audio/ogg;codecs=opus';
     let link = document.querySelector('#download');
     b.addEventListener("click", function(e) {
       if (!clicked) {
         if (MediaRecorder.isTypeSupported('audio/webm;codecs=opus')) {
           type = 'audio/webm;codecs=opus';
         }
         navigator.mediaDevices.getUserMedia({  audio: {
            sampleRate: 44100,
            sampleSize: 16,
            channelCount: 1
  				}})
          .then((stream) => {
             recorder = new MediaRecorder(stream, { mimeType: type });
             recorder.ondataavailable = function(evt) {
               chunks.push(evt.data);
             };
             recorder.onstop = function(evt) {               
               var blob = new Blob(chunks, {'type': type});
               let audUrl = URL.createObjectURL(blob);
               document.querySelector("audio").src = audUrl;
               link.href = audUrl;               
               let extension = recorder.mimeType.match(/ogg/) ? '.ogg'
                  : recorder.mimeType.match(/webm/) ? '.webm' : '';
               link.download = 'smple_recording' + extension;
             };
            recorder.start();
             e.target.innerHTML = "Stop recording";
             clicked = true;
          })
        .catch(e => {
          console.log(`MediaRecorder is failed: ${e.message}`);
          Promise.reject(new Error());
        });
         } else {
           recorder.stop();
           e.target.disabled = true;
         }
     });
   </script>