JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

<div id="bgtint"></div>
<div>
<span class="matrix" id='title'></span>
<span class="matrix small" id='author'></span>
</div><br>
<canvas id=matrix width=550 height=250></canvas>
<div class="credits" id="credits">
[Loading sample attribution information]
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Londrina+Outline');

canvas {
  border: 1px outset rgba(100,100,120,1);
  background: url(http://i.imgur.com/knVTgR1.png);
  z-index: 200;
}
small {
  font-size: 10px;
}
body {
  background: url(http://i.imgur.com/knVTgR1.png);
  padding: 0px;
  color: rgba(200,200,200,0.6);
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
                                  
                               
  /*
  filter: grayscale(100%) contrast(400%);
  */
}
span.matrix{
  font-family: 'Londrina Outline', cursive;
  text-shadow: 1px 2px #000;
  font-size: 50px;
}
span.small {
  font-size: 30px;
}
div#bgtint {
 background-color: rgba(50,100,90,0.2);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: -1;
}
div.credititem {
  border: 1px outset rgba(100,100,120,1);
  background-color: rgba(50,50,50,1);
  margin-right:2px;
}
a {
  color: white;
  text-decoration: none;
}

JavaScript

Array.prototype.count = function() {
  var count = 0;
  this.forEach(function(el) {
    count++;
  });
  return count;
};
var matrix = document.getElementById('matrix');
var songtitle = document.getElementById('title');
var songauthor = document.getElementById('author');
var credits = document.getElementById('credits');
var textcolor = "rgba(200,200,200,0.2)";
var ctx = matrix.getContext('2d');
var song = {
	sample: [272114,33,1234],
  rows: [
      {sample_id: 272114, volume: 1, pan: 0, start_position: 0, pattern: [1,0,0,0,1,0,0,0,1,0,0,0,1,0,0,0]},
      {sample_id: 33, volume: 1, pan: 0, start_position: 0, pattern: [1,1,0,0,1,0,0,0,1,0,0,0,1,0,0,0]},
      {sample_id: 1234, volume: 1, pan: 0, start_position: 0, pattern: [1,0,1,0,1,0,0,0,1,0,0,0,1,0,0,0]},

    ],
  _title: 'This is not a test',
  _author: 'electronoob'
};

var isLoaded = [];
isLoaded['sample_metadata'] = false;
window.meta = [];
meta['sample'] = [];
meta['sample_tbl'] = [];

function getSoundMeta(id) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://www.freesound.org/apiv2/sounds/'+id+'/?token=nMo2go8tTAeZITAHeTGRnNjT1elwVGlaVnoAp9RN&format=json');
  xhr.onload = function(e) {
    window.meta.sample.push( JSON.parse(this.response) );
    window.meta.sample_tbl[id] = window.meta.sample.count() -1;
  }
  xhr.send();
}

for(i=0;i<song.sample.count();i++) {
   getSoundMeta(song.sample[i]);
}
songtitle.innerHTML = song._title;
songauthor.innerHTML = "&nbsp;&nbsp;by "+song._author+"&nbsp;";

setInterval(function(){
  if(!isLoaded['sample_metadata']) {
    if (meta.sample.count() == song.sample.count()) {
      isLoaded['sample_metadata'] = true;
      console.log('meta_is_loaded');
      //load credits table
      var buffer = "";
      var template = `
          <div class="credititem" style="width: 120px; height: 91px; padding: 2px; float:left;overflow:hidden;background: url(http://i.imgur.com/knVTgR1.png);">
              <div style="width: 120px; height:71px; background:...