makeSpectrum()

Based on this excellent answer: https://stackoverflow.com/questions/16797092/how-can-i-generate-random-data-that-simulates-an-audio-signal

by sperske

HTML

<div id="logo"></div>

CSS

.band {
  background-color: #3897e0;
  border-radius: 3px 3px 0 0;
}

JavaScript

/**
 *    Turn an element into a virtual spectrum,
 *    Ken Fyrstenberg Nilsen, Public domain.
 *
 *    USAGE:
 *        makeSpectrum(id, width, height)
 *        makeSpectrum(id, width, height, bands)
 *        makeSpectrum(id, width, height, bands, volume)
 *
 *    id      id of the element to be converted into spectrum
 *    width   width in pixels of spectrum
 *    height  height in pixels of spectrum
 *    bands   (optional) number of "bands"
 *    volume  initial volume (0-1)
 *
 *    METHODS:
 *
 *    setVolume()    returns current volume
 *    setVolume(vol) sets new volume (0-1 float)
 */
function makeSpectrum(id, width, height, bands = 12, volume = 1) {

  bands = bands ? bands : 12;
  volume = volume ? volume : 1;

  if (bands < 1) bands = 1;
  if (bands > 128) bands = 128;

  // init parent element
  var parent = document.getElementById(id),
    bandElements = [];

  if (typeof parent === 'undefined')
    alert('Element ' + id + ' not found!');

  parent.style.display = 'block';
  parent.style.width = width + 'px';
  parent.style.height = height + 'px';
  parent.style.position = 'relative';

  var bandValues = [],
    oldBandValues = [],
    bw = (((width) / bands) | 0),
    me = this;

  function calcBand(bandNum) {
    var bv = bandValues[bandNum],
      obv = oldBandValues[bandNum];

    if (bv >= obv) obv = bv;
    obv -= 0.1;
    if (obv < 0) obv = 0;
    obv *= volume;

    oldBandValues[bandNum] = obv;
    return obv;
  }

  function getFFT(band) {
    band = band ? band : bandValues;
    for (var i = 0; i < bands; i++) {
      band[i] = Math.random();
    }
  }

  function createBands() {

    var i, html = '';
    for (i = 0; i < bands; i++) {
      h = 0
      html += '<div id="' + id + '_band' + i + '" ';
      html += 'style="display:block;position:absolute;';
      html += 'left:' + ((i * bw + 1) | 0);
      html += 'px;top:' + ((height - height * h) | 0);
      html += 'px;width:' + (bw - 2);
      html += 'px;height:' + ((height * h) |...