Untitled

<center>
<body bgcolor='000000'>
  <canvas class="visualizer";id="canvas";width="2240" height="2200"></canvas>
</body>
<script>
var context = new AudioContext();
var analyser = context.createAnalyser();
var WIDTH = 800;
var HEIGHT = 800;
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(0);
}
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 = '';
  canvas.strokeStyle = 'rgb(113,256,2)';
  canvas.beginPath();
  var sliceWidth = WIDTH * 1.0 / bufferLength;
      var x = 0;

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

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

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

        x += sliceWidth;
      };

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

draw();
</script>