JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <button class="start">Start Experiment</button>
    <br/><br/>
    <canvas></canvas>
</body>

JavaScript

(function() {
    //Create Web Audio Context
    var context;
    if (typeof AudioContext !== "undefined") {
        context = new AudioContext();
    } else if (typeof webkitAudioContext !== "undefined") {
        context = new webkitAudioContext();
    }
    
    //Create Nodes
    var gainOscillator = context.createGain();
    var scriptProcessorNode = context.createScriptProcessor(1024);
    var gainNode = context.createGain();
    var analyserProcessorNode = context.createScriptProcessor(1024);
    scriptProcessorNode.onaudioprocess = process;
    analyserProcessorNode.onaudioprocess = analyserProcess;
    
    //Variables
    gainOscillator.gain.value = 0.4;
    var syncCount = 0;
    var drawBoolean = true;
    var index = 0;
    var isTheTime = true;
    var startToSaveDataToDraw = false;
    var firstState = true;
       
    //Draw variables
    var canvas = document.querySelector("canvas");
    var ctx = canvas.getContext('2d');
    var width = canvas.width;
    var height = canvas.height;
    var amp = height / 2;

    //Create a buffer of 2s and 44100 sampleRate where I save the output for draw it
    var bufferNode = context.createBuffer(1,2*44100, 44100);
    //Get the AudioBuffer
    var bufferFloat = bufferNode.getChannelData(0);
    
    //Connections
    gainOscillator.connect(scriptProcessorNode);
    scriptProcessorNode.connect(gainNode);
    gainNode.connect(context.destination);
    gainNode.connect(analyserProcessorNode);
    
    function init(){
        oscillator = context.createOscillator();
        oscillator.connect(gainOscillator);
        startToSaveDataToDraw = true;
        syncCount = 0;
        firstState = false;
        isTheTime = true;
        drawBoolean = true;
        index = 0;
        gainNode.gain.setValueAtTime(1, context.currentTime);
        width = canvas.width;
        height = canvas.height;
        ctx.clearRect(0, 0, width, height);
    }
    //scriptProcessorNode
    function process(event) {
        //get...