Untitled

<body>
  <canvas class="visualizer";id="canvas";width="2940" height="2900"></canvas>
</body>
<script>
var context = new AudioContext();
var analyser = context.createAnalyser();
var WIDTH = 3300;
var HEIGHT = 3300;
var osc = context.createOscillator();
osc.frequency.value = 9.1;
function makeConnection() {
    osc.connect(analyser);
}
function playSound() {
    analyser.connect(context.destination);
    osc.start(0);
    osc.stop(30);
    //osc.disconnect();
}
makeConnection();
playSound();
var canvas = document.querySelector('.visualizer');
var canvas = canvas.getContext("2d");
analyser.fftSize = 2048;
var bufferLength = analyser.frequencyBinCount/2;
var dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);
if(dataArray==0){
alert('test')
}
console.log(dataArray);
function draw() {
  drawVisual = requestAnimationFrame(draw);
  analyser.getByteTimeDomainData(dataArray);
  canvas.lineWidth = '1';
  canvas.strokeStyle = 'rgb(3,26,92)';
  canvas.beginPath();
  var sliceWidth = WIDTH * 1.0 / 3300;
      var x = 0;

  for(var i = 0; i < bufferLength; i++) {

        var v = dataArray[i] / 128.0;
        var y = v * HEIGHT/2;

        if(i === 0) {
          canvas.moveTo(x, y);
        }
        if(i!==0){
          canvas.lineTo(x, y);
        }

        x = sliceWidth+x;
      };

  canvas.lineTo(canvas.width, canvas.height);
      canvas.stroke();
    };

draw();
</script>