Switch to react-redux for the music player

src/music/components/visualizer.tsx

@@ -0,0 +1,218 @@
+import React from "react";
+import * as three from "three";
+
+type VisualizerProps = {
+  audioContext: AudioContext;
+  audioSource: AudioNode;
+};
+
+class CanvasDrawer {
+  private analyser: AnalyserNode;
+  private canvas: HTMLCanvasElement;
+
+  private analyserData: Float32Array;
+
+  private boxes: Array<three.Mesh>;
+  private camera: three.Camera;
+  private renderer: three.Renderer;
+  private scene: three.Scene;
+
+  private angle: number;
+
+  private animationFrame: number;
+  private lastTime: number;
+
+  constructor(analyser: AnalyserNode, canvas: HTMLCanvasElement) {
+    this.analyser = analyser;
+    this.canvas = canvas;
+
+    // Set up analyser data storage
+    this.analyserData = new Float32Array(analyser.frequencyBinCount);
+
+    // Initialize the scene
+    this.scene = new three.Scene();
+
+    // Make a bunch of boxes to represent the bars
+    this.boxes = Array(analyser.frequencyBinCount);
+    let width = 2 / analyser.frequencyBinCount;
+    for (let freq = 0; freq < analyser.frequencyBinCount; freq++) {
+      let geometry = new three.BoxGeometry(1, 1, 1);
+      let material = new three.MeshLambertMaterial({
+        color: new three.Color(0x99d1ce),
+      });
+      let cube = new three.Mesh(geometry, material);
+
+      cube.scale.set(width, 1e-6, width);
+      cube.position.set(-1 + freq * width, 0, 0);
+
+      this.scene.add(cube);
+      this.boxes[freq] = cube;
+    }
+
+    // Add lights for shadowing
+    let ambientLight = new three.AmbientLight(0xffffff, 0.4);
+    this.scene.add(ambientLight);
+
+    let directionalLight = new three.DirectionalLight(0xffffff, 1);
+    directionalLight.position.set(-1, 0.3, -1);
+    directionalLight.castShadow = true;
+    this.scene.add(directionalLight);
+
+    // Add a camera
+    this.angle = 3;
+    this.camera = new three.PerspectiveCamera(
+      70,
+      canvas.width / canvas.height,
+      0.01,
+      10
+    );
+    this.camera.lookAt(0, 0, 0);
+    this.scene.add(this.camera);
+    this.rotateCamera(1);
+
+    // Add a renderer
+    this.renderer = new three.WebGLRenderer({
+      antialias: true,
+      canvas: canvas,
+      powerPreference: "low-power",
+    });
+
+    this.renderer.setClearColor(new three.Color(0x0f0f0f));
+    this.renderer.setSize(canvas.width, canvas.height);
+
+    // Set up canvas resizing
+    window.addEventListener("resize", this.resize.bind(this));
+
+    // Run the first, set the first animation frame time and start requesting
+    // animation frames
+    this.resize();
+    this.lastTime = 0;
+    this.animationFrame = requestAnimationFrame(this.render.bind(this));
+  }
+
+  render(time: number) {
+    // Set our animation frame to 0, so that if we stop, we don't try to cancel a past animation frame
+    this.animationFrame = 0;
+    // Update elapsed time
+    let elapsed = time - this.lastTime;
+    this.lastTime = time;
+
+    let camera = this.camera;
+    let renderer = this.renderer;
+    let scene = this.scene;
+
+    this.scaleBoxes();
+    this.rotateCamera(elapsed);
+
+    renderer.render(scene, camera);
+    this.animationFrame = requestAnimationFrame(this.render.bind(this));
+  }
+
+  scaleBoxes() {
+    let analyser = this.analyser;
+
+    analyser.getFloatFrequencyData(this.analyserData);
+
+    for (let freq = 0; freq < analyser.frequencyBinCount; freq++) {
+      let height = analyser.maxDecibels / this.analyserData[freq];
+
+      if (height > 0.3) {
+        height -= 0.3;
+      } else {
+        height = 1e-6;
+      }
+
+      this.boxes[freq].scale.y = height;
+    }
+  }
+
+  rotateCamera(elapsed: number) {
+    if (this.angle >= Math.PI * 2) {
+      this.angle = 0;
+    } else {
+      this.angle += 0.1 * (elapsed / 1000);
+    }
+
+    let camera = this.camera;
+    let angle = this.angle;
+
+    camera.position.x = 1.01 * Math.sin(angle);
+    camera.position.z = 1.01 * Math.cos(angle);
+
+    /* camera.position.y = (1 - Math.abs(angle - 0.5) / 0.5); */
+    camera.lookAt(0, 0, 0);
+  }
+
+  resize() {
+    let canvas = this.canvas;
+    if (canvas.parentElement === null) {
+      throw Error("Could not access canvas parent for size calculation");
+    }
+
+    // Compute the height of all our siblings
+    let combinedHeight = 0;
+    for (let i = 0; i < canvas.parentElement.children.length; i++) {
+      const child = canvas.parentElement.children[i];
+
+      if (child != canvas) {
+        combinedHeight += child.clientHeight;
+      }
+    }
+
+    // The remaining space we want to fill
+    let remainingHeight = canvas.parentElement.clientHeight - combinedHeight;
+    canvas.height = remainingHeight;
+    canvas.width = canvas.parentElement.clientWidth;
+
+    this.camera.aspect = canvas.width / remainingHeight;
+    this.camera.updateProjectionMatrix();
+    this.renderer.setSize(canvas.width, remainingHeight);
+  }
+
+  stop() {
+    if (this.animationFrame != 0) {
+      cancelAnimationFrame(this.animationFrame);
+    }
+  }
+}
+
+class Visualizer extends React.Component<VisualizerProps, {}> {
+  private analyser: AnalyserNode;
+  private canvas: React.RefObject<HTMLCanvasElement>;
+  private drawer: CanvasDrawer;
+
+  constructor(props: VisualizerProps) {
+    super(props);
+    this.canvas = React.createRef();
+  }
+
+  render() {
+    return (
+      <canvas
+        id="visualizer"
+        ref={this.canvas}
+        style={{ width: "100%", height: "100%" }}
+      ></canvas>
+    );
+  }
+
+  componentDidMount() {
+    if (this.canvas.current === null) {
+      throw Error("Failed to create canvas; aborting");
+    }
+
+    this.analyser = this.props.audioContext.createAnalyser();
+    this.analyser.fftSize = 2048;
+    this.analyser.smoothingTimeConstant = 0.8;
+    this.props.audioSource.connect(this.analyser);
+
+    this.drawer = new CanvasDrawer(this.analyser, this.canvas.current);
+  }
+
+  componentWillUnmount() {
+    this.drawer.stop();
+    this.props.audioSource.disconnect(this.analyser);
+  }
+}
+
+export default Visualizer;