JSFiddle - React, Tailwind, and code Playground

by datvm

HTML

<button id="start">
  Start
</button>

<button id="stop">
  Stop
</button>

JavaScript

let recorder;
let chunks;

document.querySelector("#stop").addEventListener("click", () => {
	recorder.stop();
});

document.querySelector("#start").addEventListener("click", async () => {
	const stream = await navigator.mediaDevices.getUserMedia({
  	audio: true,
    video: false,
  });

	recorder = new MediaRecorder(stream);
  chunks = [];
  
  recorder.ondataavailable = function(e) { chunks.push(e.data); };
  recorder.onstop = async function() {
    const blob = new Blob(chunks, { type: recorder.mimeType });
    const url = window.URL.createObjectURL(blob);
    
    const a = document.createElement("a");
    a.href = url;
    a.download = "recording";
    a.click();
    
    for (const t of stream.getTracks()) {
    	t.stop();
    }
  };
  
  recorder.start();
});