JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./style.css" />
  <title>ChromePleaseFixYourAudio</title>
</head>

<body>
  <div id="app">
    <button id="sampleButton" onclick="recordSample()">RECORD SAMPLE</button>
    <button id="toggleButton" onclick="toggleClick()">TOGGLE BACKGROUND</button>
    <div id="samples"></div>
  </div>
  <p>
</body>

</html>

JavaScript

(function() {
    const o = document.createElement("link").relList;
    if (o && o.supports && o.supports("modulepreload"))
        return;
    for (const e of document.querySelectorAll('link[rel="modulepreload"]'))
        i(e);
    new MutationObserver(e=>{
        for (const t of e)
            if (t.type === "childList")
                for (const r of t.addedNodes)
                    r.tagName === "LINK" && r.rel === "modulepreload" && i(r)
    }
    ).observe(document, {
        childList: !0,
        subtree: !0
    });
    function n(e) {
        const t = {};
        return e.integrity && (t.integrity = e.integrity),
        e.referrerPolicy && (t.referrerPolicy = e.referrerPolicy),
        e.crossOrigin === "use-credentials" ? t.credentials = "include" : e.crossOrigin === "anonymous" ? t.credentials = "omit" : t.credentials = "same-origin",
        t
    }
    function i(e) {
        if (e.ep)
            return;
        e.ep = !0;
        const t = n(e);
        fetch(e.href, t)
    }
}
)();
let a, s = !1;
window.addEventListener("load", ()=>{
    const c = document.getElementById("sampleButton");
    c.onclick = ()=>u();
    const o = document.getElementById("toggleButton");
    o.onclick = ()=>d()
}
);
async function u() {
    const c = {
        audio: {
        	echoCancellation: !1,
        	noiseSuppression: !1,
        	autoGainControl: !1
        }
    };
    let o = [];
    const n = await navigator.mediaDevices.getUserMedia(c)
      , i = new MediaRecorder(n)
      , e = document.getElementById("sampleButton");
      
    console.log(n.getTracks()[0].getSettings());
    e.innerText = "🔴 FINISH 🔴",
    e.onclick = ()=>i.stop(),
    i.start(),
    i.ondataavailable = t=>{
        o.push(t.data)
    }
    ,
    i.onstop = t=>{
        console.log("done");
        const r = new Blob(o,{
            type: "audio/ogg; codecs=opus"
        });
        o = [];
        const m = window.URL.createObjectURL(r)
          , l = new Audio(m);
       ...