JSFiddle - React, Tailwind, and code Playground

by rowntreerob

HTML

<a id="download">Download</a>
<button id="stop">Stop</button>
<audio id="player" controls></audio>

JavaScript

var mr;
 const recordedChunks = [];
let shouldStop = false;
  let stopped = false;
  const downloadLink = document.getElementById('download');
  const stopButton = document.getElementById('stop');

  stopButton.addEventListener('click', function() {
    shouldStop = true;
    mr.stop();
    
    var audio = document.createElement('audio');
    audio.controls = true;
    var blob = new Blob(recordedChunks, { 'type' : 'video/webm' });
    var audioURL = window.URL.createObjectURL(blob);
    audio.src = audioURL;
    
    downloadLink.href = URL.createObjectURL(new Blob(recordedChunks));
      downloadLink.download = 'acetest.ogg';
    console.log("recorder stopped");
  });
  var handleSuccess = function(stream) {

        const options = {
     
      mimeType : 'video/webm;codecs=vp9'
    }
   
    const mediaRecorder = new MediaRecorder(stream, options);  
    mr = mediaRecorder;
    mediaRecorder.addEventListener('dataavailable', function(e) {
      if (e.data.size > 0) {
        recordedChunks.push(e.data);
        console.log('bffrSpill ' +e.data.size);
      }

    });

    mediaRecorder.start();
  };

  navigator.mediaDevices.getUserMedia({ audio: true, video: false })
      .then(handleSuccess);