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>Document</title>
  </head>

  <body>
    <div class="content">
      <h1>audio recorder</h1>
      <canvas id="scope" height="100" width="300"></canvas>

      <div class="transport">
        <span>record</span>
        <div class="record" id="record"></div>
        <span>play</span>
        <div class="play" id="play"></div>
      </div>
    </div>
    <script src="app.js"></script>
  </body>

</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400&display=swap');

body {
    font-family: 'Roboto Mono', monospace;
    height: 100vh;
    
}

.home {
    color: grey;
    padding-left: 5vh;
    font-size: 2rem;
    transition: all 0.2s ease;
}

.home:hover {
    color: black;
}

.content {
    display: flex;
    align-items: center;
    flex-direction: column;
}

input {
    -webkit-appearance: none;
    cursor: pointer;
    background-color: aqua;
    border-radius: 10px;
    border: solid black 2px;
    
}

input::-moz-range-thumb {
    -webkit-appearance: none;
    background: yellow;
    height: 20px;
    border: solid rgb(214, 67, 67) 2px;
}

.parameters {
    list-style: none;
    width: 50vw;
}

.parameters li {
    padding: 2px 0px;
    display: flex;
    justify-content: space-between;
}

.mute {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    color: grey;
    background-color: rgb(250, 250, 57);    
    font-size: 2rem;
    border: solid grey 2px;
    height: 3rem;
    width: 3rem;
    cursor: pointer; 
}

.mute:hover {
    color: rgb(59, 59, 59);
    border-color: rgb(59, 59, 59);
}

.links-directory {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.links-directory li {
    padding: 20px 0px;
}

.links-directory li a {
    text-decoration: none;
    color: black;
    border: solid grey 2px;
    border-radius: 100px;
    padding: 10px;
    margin: 10px;
}

.links-directory li a:hover {
    border: solid black 2px;
}

.switch {
    display: flex;
}

.switch li {
    font-size: 0.75rem;
    padding: 0px 5px;
    border: solid grey 2px;
    margin: 0px 5px;
    cursor: pointer;
}


.switch li:hover {
    border: solid black 2px;
}


.switch.on {
    background-color: yellow;
    border: solid black 2px;
}

.transport {
    display: flex;
    justify-content: center;
    align-items: center;
}

.transport div {
    margin: 0px...

JavaScript

// Grab DOM Elements
const playButton = document.getElementById('play');
const recordButton = document.getElementById('record');

// If allowed access to microphone run this code
const promise = navigator.mediaDevices.getUserMedia({audio: true, video: false})
    .then((stream) => {
        recordButton.addEventListener('click', () => {
        		// when the record button is pressed clear enstanciate the record buffer
            if (!recordArmed) {
                recordArmed = true;
                recordButton.classList.add('on');
                console.log('recording armed')
                recordBuffer = new Float32Array(audioCtx.sampleRate * 10);
            }
            else {
                recordArmed = false;
                recordButton.classList.remove('on');
                
                // After the recording has stopped pass the recordBuffer the source's buffer
                myArrayBuffer.copyToChannel(recordBuffer, 0);
                
                //Looks like the buffer has been passed
                console.log(myArrayBuffer.getChannelData(0));
            }
        });
				
       	// this should stat the playback of the source intended to be used adter the audio has been recorded, I can't get it to work in this given context
        playButton.addEventListener('click', () => {
                playButton.classList.add('on');
                source.start();   
        });
        
        //Transport variables
        let recordArmed = false;
        let playing = false;
       
        // this buffer will later be assigned a Float 32 Array / I'd like to keep this intimediate buffer so the audio can be sliced and minipulated with ease later 
        let recordBuffer;
       
       	// Declear Context, input source and a block processor to pass the input sorce to the recordBuffer
        const audioCtx = new AudioContext();
        const audioIn = audioCtx.createMediaStreamSource(stream);
        const processor =...