JSFiddle - React, Tailwind, and code Playground

HTML

<div style="position: relative;">
	 		<canvas id="canvas" width="600" height="200" style="position: absolute; left: 20; top: 0; z-index: 0; border: 1px solid black;"></canvas>
	 		<canvas id="canvas2" width="600" height="201" style="position: absolute; left: 20; top: 0; z-index: 1; opacity:0.5;"></canvas>	
		</div>
	</br>
	</br>
	</br>
	</br>
	</br>
	</br>
	</br>
	</br>
	</br>
	</br>
	</br>
	</br>
<button id='button'>Play</button></br>
<p>Select and play for loop</p>

JavaScript

$(document).ready(function(){
	var context = new (AudioContext || webkitAudioContext)();
	var canvas = document.getElementById('canvas');
    var canvas2 = document.getElementById('canvas2');
    var width = canvas.width;
    var height = canvas.height;
    var ctx = canvas.getContext('2d');
    var ctx2 = canvas2.getContext('2d');
    var mouse = null;
    var x = 0;
    var x3 = width;
    
    

	var request = new XMLHttpRequest();
	request.open('GET', 'http://thelab.thingsinjars.com/web-audio-tutorial/hello.mp3', true);
	request.responseType = "arraybuffer";

	request.onload = function () {
    	context.decodeAudioData(request.response, function (thebuffer) {
        buffer = thebuffer;
        //source.buffer = buffer;
        
        data = buffer.getChannelData(0);
        //console.log(data);

        
        var step = data.length / width;
        //console.log(data[500]*height);


        	for (var i = 0; i < data.length; i++) {
            	ctx.fillStyle = 'black';
            	ctx.fillRect(i/step, height / 2, 1/step, (data[i] * height/2));

           		

        	}
    	});
	};
	request.send();

    
        

    $('#canvas2').mousedown(function(e){
        mouse = 1;   
        console.log(mouse);
        x = e.pageX-10;
    });

    $('#canvas2').mouseup(function(e){
        mouse = 0;  
        x3 = e.pageX-10; 

    });

    $('#canvas2').mousedown(function(e){
        

        ctx2.clearRect(0,0,width,canvas2.height);
        ctx2.fillStyle='red';
        ctx2.fillRect(x,0,1,canvas2.height);
        $('#canvas2').mousemove(function(e){
            x2 = e.pageX-10;
            if(mouse===1){
                ctx2.fillRect(x2,0,5,canvas2.height);
            }
        });
        
    });

    $('#button').click(function(e){
        console.log(x);
        console.log(x3);

        var source = context.createBufferSource();
        source.connect(context.destination);
        source.buffer = buffer;
        //calculates how many seconds each...