JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/mattdiamond/Recorderjs/master/dist/recorder.js"></script>
JavaScript
navigator.mediaDevices.getUserMedia({
audio: true
})
.then(stream => {
const aCtx = new AudioContext();
const streamSource = aCtx.createMediaStreamSource(stream);
var rec = new Recorder(streamSource);
rec.record();
setTimeout(() => {
stream.getTracks().forEach(t => t.stop());
rec.stop()
rec.exportWAV((blob) => {
// now we could send this blob with an FormData too
const url = URL.createObjectURL(blob);
let au = new Audio(url);
au.controls = true;
document.body.appendChild(au);
au.play();
let a = document.createElement('a');
a.href = url;
a.innerHTML = 'download';
a.download = 'filename.wav';
document.body.appendChild(a);
});
}, 3000);
})