absolutely destroy this beautiful static html file by converting it to a slightly more dynamic flask app + docker container

static/main.css

@@ -0,0 +1,116 @@
+html, body, #canvas {
+  width: 100%;
+  height: 100%;
+}
+
+.butterviz {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  animation: rainbow-bg 10s linear;
+  animation-iteration-count: infinite;
+}
+
+#loader {
+  font-size: xx-large;
+  font-family: 'Bungee Spice';
+  text-align: center;
+  position: absolute;
+  transition: all .75s ease;
+  background-color: rgba(0, 0, 0, 0.75);
+  visibility: hidden;
+  opacity: 0;
+}
+
+#loader p {
+  padding: 10rem 5rem 1rem 5rem;
+  background: url(/static/raccoon.gif);
+  background-repeat: no-repeat;
+  background-position: top center;
+}
+
+#loader.show {
+  visibility: visible;
+  opacity: 1;
+}
+
+#the-button {
+  animation: throb 2.5s ease-in-out infinite alternate;
+  font-family: 'Bungee Spice', cursive;
+  font-size: 6em;
+  text-align: center;
+}
+
+#metadata {
+  position: absolute;
+  bottom: 0%;
+  background-color: rgba(0, 0, 0, 0.8);
+  z-index: 1000;
+  color: #fff;
+  font-family: 'Bungee Spice', sans-serif;
+  text-align: center;
+  width: 100%;
+  padding-top: 3rem;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-content: center;
+  padding-bottom: 3rem;
+}
+
+#title {
+  font-size: 2rem;
+}
+
+@keyframes rainbow-bg{
+    100%,0%{
+      background-color: rgb(255,0,0);
+    }
+    8%{
+      background-color: rgb(255,127,0);
+    }
+    16%{
+      background-color: rgb(255,255,0);
+    }
+    25%{
+      background-color: rgb(127,255,0);
+    }
+    33%{
+      background-color: rgb(0,255,0);
+    }
+    41%{
+      background-color: rgb(0,255,127);
+    }
+    50%{
+      background-color: rgb(0,255,255);
+    }
+    58%{
+      background-color: rgb(0,127,255);
+    }
+    66%{
+      background-color: rgb(0,0,255);
+    }
+    75%{
+      background-color: rgb(127,0,255);
+    }
+    83%{
+      background-color: rgb(255,0,255);
+    }
+    91%{
+      background-color: rgb(255,0,127);
+    }
+}
+@keyframes throb{
+    from{
+      transform: scale(1.0);
+    }
+    to {
+      transform: scale(0.75);
+    }
+}

static/main.js

@@ -0,0 +1,60 @@
+import { io } from "https://cdn.socket.io/4.4.1/socket.io.esm.min.js"
+import Visualizer from "./viz.js"
+
+export function init() {
+  function updateMeta(data) {
+    var title = data.title;
+    var listeners = data.listeners;
+    $('#title').text(title);
+    $('#listeners').text(listeners + " listeners");
+  }
+
+  function visToggle() {
+    if (!document.hidden) {
+      visualizer.start();
+    }
+  }
+  document.addEventListener('visibilitychange', visToggle);
+
+  var visualizer = null;
+  var audioPlayer = document.getElementById("audio-player");
+  var loaderWidget = document.getElementById("loader");
+
+  $('#the-button').click(() => {
+    if (visualizer == null) {
+
+      audioPlayer.play();
+
+      $(loaderWidget).addClass("show");
+      $('#the-button').remove();
+
+      setTimeout(() => {
+        visualizer = new Visualizer(audioPlayer);
+        setTimeout(() => {
+          visualizer.start();
+        }, 0);
+      }, 0);
+    }
+  });
+
+  var socket = io();
+  socket.on('connect', () => {
+    socket.emit('live.hello', {});
+  });
+  socket.on('live.heartbeat', (heartbeat) => {
+    console.log('heartbeat')
+    console.log(heartbeat)
+    updateMeta(heartbeat)
+  });
+
+  window.addEventListener("resize", _.debounce(() => {
+    visualizer.resize();
+  }, 100));
+
+  audioPlayer.addEventListener("waiting", (evt) => {
+    $(loaderWidget).addClass("show");
+  });
+  audioPlayer.addEventListener("playing", (evt) => {
+    $(loaderWidget).removeClass("show");
+  });
+}

static/viz.js

@@ -0,0 +1,67 @@
+import "https://unpkg.com/butterchurn@2.6.7"
+import "https://unpkg.com/butterchurn-presets@2.4.7"
+import "https://unpkg.com/butterchurn-presets/lib/butterchurnPresetsExtra.min.js"
+
+export default class Visualizer {
+  butterViz = null;
+  canvas = null;
+  cycleInterval = null;
+  presetCycleLength = 15000;
+
+  constructor(mediaElement) {
+    var audioContext = new AudioContext();
+    var mediaSrc = audioContext.createMediaElementSource(mediaElement);
+
+    this.canvas = document.createElement('canvas');
+    this.canvas.className = "butterviz";
+    document.body.appendChild(this.canvas);
+    this.canvas.width = this.canvas.offsetWidth;
+    this.canvas.height = this.canvas.offsetHeight;
+    this.butterViz = butterchurn.default.createVisualizer(audioContext, this.canvas , {
+      width: this.canvas.width,
+      height: this.canvas.height,
+      pixelRatio: window.devicePixelRatio || 1,
+      textureRatio: 1,
+    });
+
+    mediaSrc.connect(audioContext.destination);
+    this.butterViz.connectAudio(mediaSrc);
+
+    var presets = {};
+    if (window.butterchurnPresets) {
+      Object.assign(presets, butterchurnPresets.getPresets());
+    }
+    if (window.butterchurnPresetsExtra) {
+      Object.assign(presets, butterchurnPresetsExtra.getPresets());
+    }
+
+    this.cycleInterval = setInterval(() => {
+      this.butterViz.loadPreset(_.sample(presets), 5.7);
+    }, this.presetCycleLength);
+
+    $(this.canvas).click(() => {
+      this.butterViz.loadPreset(_.sample(presets), 1.0);
+    });
+
+    setTimeout(() => {
+      this.butterViz.loadPreset(_.sample(presets));
+    }, 0);
+
+  }
+
+  resize() {
+    this.canvas.width = window.innerWidth;
+    this.canvas.height = window.innerHeight;
+    this.butterViz.setRendererSize(this.canvas.offsetWidth, this.canvas.offsetHeight);
+  }
+
+  start() {
+    if (!document.hidden && this.butterViz) {
+      var fps = 60;
+      setTimeout(() => {
+        requestAnimationFrame(() => {this.start()});
+      }, 1000 / fps);
+      this.butterViz.render();
+    }
+  }
+}