JSFiddle - React, Tailwind, and code Playground

JavaScript

navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia;
window.AudioContext = window.AudioContext || window.mozAudioContext;
var audioContext = new window.AudioContext();
console.log('getUserMedia supported.');
var constraints = { audio: true };

var onSuccess = function(stream) {
    var mediaRecorder = new MediaRecorder(stream);

    window.start =  function() {
        mediaRecorder.start();
        console.log("recorder started");
    }

    window.stop =  function() {
        mediaRecorder.stop();
        console.log("recorder stopped");
    }

    mediaRecorder.ondataavailable = function(e) {
        console.log("data available after MediaRecorder.stop() called.");
        getBlobDetails(e.data);
    }
    start();
    setTimeout(stop, 2000);
};

function getBlobDetails(blob){
    var audioURL = window.URL.createObjectURL(blob);
    window.open(audioURL);   
}


var onError = function(err) {
    console.log('The following error occured: ' + err);
}

navigator.getUserMedia(constraints, onSuccess, onError);