JSFiddle - React, Tailwind, and code Playground

by mohayonao

HTML

<canvas id="canvas"></canvas>

CSS

canvas { width: 100%; height: 240px; }

JavaScript

function SCRandom(seed) {
  if (typeof seed !== "number" || !isFinite(seed)) {
    seed = Date.now();
  }

  seed += ~(seed <<  15);
  seed ^=   seed >>> 10;
  seed +=   seed <<  3;
  seed ^=   seed >>> 6;
  seed += ~(seed <<  11);
  seed ^=   seed >>> 16;

  var s1 = (1243598713 ^ seed) >>> 0;
  var s2 = (3093459404 ^ seed) >>> 0;
  var s3 = (1821928721 ^ seed) >>> 0;

  if (s1 <  2) {
    s1 = 1243598713;
  }
  if (s2 <  8) {
    s2 = 3093459404;
  }
  if (s3 < 16) {
    s3 = 1821928721;
  }

  return {
    random: function() {
      s1 = ((s1 & 4294967294) << 12) ^ (((s1 << 13) ^  s1) >>> 19);
      s2 = ((s2 & 4294967288) <<  4) ^ (((s2 <<  2) ^  s2) >>> 25);
      s3 = ((s3 & 4294967280) << 17) ^ (((s3 <<  3) ^  s3) >>> 11);
      return ((s1 ^ s2 ^ s3) >>> 0) / 4294967296;
    }
  };
}

function makeReverbArray(length, coef, seed) {
  var data = new Float32Array(length);
  var rand = new SCRandom(seed);
  var offset, amp, i;

  offset = Math.round(rand.random() * 2000);

  for (i = 0; i < offset; i++) {
    data[i] = Math.sin(i / (offset * 2));
    data[i] *= data[i] > 0.4 ? 0.8 : 0.1;
    data[i] *= rand.random() * 2 - 1;
  }

  offset += Math.round(rand.random() * 3000) + 2000;
    amp = 1;

  for (i = offset; i < length; i++) {
    data[i] = amp;
    data[i] *= rand.random() * 2 - 1;
    data[i] *= (rand.random() < 0.003) ? 0.5 : 0.005;
    amp *= coef;
  }

  return data;
}

function drawWave(canvas, data) {
    canvas.width = window.innerWidth;
    canvas.height = 240;
    
    var context = canvas.getContext("2d");
    
    context.strokeStyle = "#333399";
    context.lineWidth = 0.1;
    
    context.beginPath();
    for (var i = 0; i < data.length; i++) {
        var x = (i / data.length) * canvas.width;
        var y = canvas.height * 0.5 - data[i] * canvas.height * 0.5;
        context.lineTo(x, y);
    }
    context.stroke();
}

drawWave(document.getElementById("canvas"), makeReverbArray(65535, 0.99995, 20141116));