JSFiddle - React, Tailwind, and code Playground

by Darker

HTML

<div id="canvases">
    <canvas id="UI" width="600" height="300"></canvas>
    <canvas id="data_img" width="600" height="300" style="background-color: #666;"></canvas>
    
    </div>
<!-- Click once to show/hide frequency info-->

CSS

* {
       margin: 0px;
       padding: 0px; 
    }
    html, body {
      overflow: hidden;
    }
    #canvases {
      position: relative;
    }
    #UI {
      position: absolute;
    }
    .tooltip {
      position:absolute;
      border: 1px dashed #400;
      background: rgba(0,0,0,0.5);
      color: white;
      left: 0px;
    }

JavaScript

//Quick document dimensions
        (function () {
            var w = window,
                d = document,
                e = d.documentElement,
                g = d.getElementsByTagName('body')[0],
                x = w.innerWidth || e.clientWidth || g.clientWidth,
                y = w.innerHeight|| e.clientHeight|| g.clientHeight;  
            w.viewport = {width:x, height:y};
            w.getViewport = function() {
              w.viewport.width = w.innerWidth || e.clientWidth || g.clientWidth;
              w.viewport.height = w.innerHeight|| e.clientHeight|| g.clientHeight; 
            };
        })();
        //Prototype used to display raw /not really raw/ data from the sound stream
        Uint8Array.prototype.joinAsString = function(delimiter) {
          var ret = "";
          for(var i=0; i<this.length; i++) {
            if(i>0)
              ret+=delimiter;
            ret+=this[i];
          }
          return ret;
        }
        //Returns a average in subset of values
        Uint8Array.prototype.averageValues = function(start, stop) {
          if(start>stop) {
            var tmp = start;
            start = stop;
            stop = tmp;
          }
          if(stop>=this.length)
            throw new Error("Ending offset out of bounds.");
          var sum = 0;
          for(var i=start; i<=stop; i++) {
            sum+=this[i];          
          }  
          return sum/(stop-start+1);            
        }
        //Cross-browser stuff
        window.AudioContext = window.AudioContext || window.webkitAudioContext;
        //A global variable - seems that we only need one for everything
        var context = new AudioContext();
        //context of the image, later on we'll use this for drawing
        var canvas = document.getElementById("data_img");
        var canvas_ui = document.getElementById("UI");
        //Resize the image to the viewport size
        canvas.width = canvas_ui.width = viewport.width;
        canvas.height...