JSFiddle - React, Tailwind, and code Playground

HTML

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Visualisation</title>
</head>
<body>
  <div class="wrapper">
    
    <header>
      <h1>Visualisation</h1>
    </header>

    <canvas class="visualizer" width="640" height="100"></canvas> 

      <div>
        <label for="visual">Visualizer setting</label>
        <select id="visual" name="visual">
          <option value="sinewave">Sinewave</option>
          <option value="frequencybars" selected>Frequency bars</option>
          <option value="off">Off</option>
        </select>
      </div>
    </form>

  </div>
  <script src="scripts/app.js"></script>
	
</body>
</html>

JavaScript

// fork getUserMedia for multiple browser versions, for those
// that need prefixes

navigator.getUserMedia = (navigator.getUserMedia ||
                          navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia ||
                          navigator.msGetUserMedia);

// set up forked web audio context, for multiple browsers
// window. is needed otherwise Safari explodes

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var source;
var stream = new Audio(['http://locus.creacast.com:9001/oakland_california.ogg']) // live stream

//set up the different audio nodes we will use for the app
var analyser = audioCtx.createAnalyser();
analyser.minDecibels = -90;
analyser.maxDecibels = -10;
analyser.smoothingTimeConstant = 0.85;

// grab audio track via XHR for convolver node

var soundSource, concertHallBuffer;

// set up canvas context for visualizer

var canvas = document.querySelector('.visualizer');
var canvasCtx = canvas.getContext("2d");

var intendedWidth = document.querySelector('.wrapper').clientWidth;

canvas.setAttribute('width',intendedWidth);

var visualSelect = document.getElementById("visual");

var drawVisual;


source = audioCtx.createMediaElementSource(stream);
source.connect(analyser);
analyser.connect(audioCtx.destination);

visualize();

function visualize() {
  WIDTH = canvas.width;
  HEIGHT = canvas.height;


  var visualSetting = visualSelect.value;
  console.log(visualSetting);

  if(visualSetting == "sinewave") {
    analyser.fftSize = 2048;
    var bufferLength = analyser.fftSize;
    console.log(bufferLength);
    var dataArray = new Uint8Array(bufferLength);

    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

    function draw() {

      drawVisual = requestAnimationFrame(draw);

      analyser.getByteTimeDomainData(dataArray);

      canvasCtx.fillStyle = 'rgb(200, 200, 200)';
      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

      canvasCtx.lineWidth = 2;
      canvasCtx.strokeStyle =...