JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id='c'
></canvas>

JavaScript

/*track = '';
for(i=0;i<8;) {
  i++;
  for(k = l = 11025; k--;) {
    track += String.fromCharCode(
      Math.round(Math.sin(k/44100*2*Math.PI*587.33)
      * 127 + 128));
  }
}
player = new Audio('data:audio/wav;base64,UklGRkRiBQBXQVZFZm10IBAAAAA\
BAAEARKwAAESsAAABAAgAZGF0YSBi'+btoa('\5\0'+track));
player.play();*/

var b = document.body;
var c = document.getElementById('c')
var a = c.getContext("2d");
var plot = (function (width, height, init) {
    return function (x, y) {
        if (!init) {
            c.width = width;
            c.height = height;
            a.fillStyle = "#ccc";
            a.fillRect(40, 20, 1, 255);
            a.fillRect(40, 147, width - 80, 1);
            a.fillStyle = "black";
            a.textAlign = "right";
            a.fillText(255, 38, 24);
            a.fillText(128, 38, 152);
            a.fillText(0, 38, 279);
            init = true;
        }
        a.fillRect(x / 11025 * (width - 80) + 40, 275 - y, 1, 1)
    }
})(innerWidth, 300, false);
function sawtooth(x){
    var pi = Math.PI
    var tn = Math.ceil( (x+pi) / (2*pi) ); 
    var y = ( (x - tn*2*pi) + 2*pi ) / pi;
    return y
}
for (k = l = 11025; k--;) {
    plot(11025 - k,  (Math.sin(k/44100/2*Math.PI*600)+sawtooth(k / 44100 * 600)) * Math.min((l - k) / 83, k / l) * 127 + 128);
}