Add intro song with analyser

package.json

@@ -8,6 +8,7 @@
   "dependencies": {
     "aframe-animation-component": "^5.1.0",
     "aframe-animation-timeline-component": "^1.3.1",
+    "aframe-audioanalyser-component": "^3.0.3",
     "aframe-cubemap-component": "^0.1.2",
     "aframe-event-decorators": "^1.0.2",
     "aframe-event-set-component": "^4.0.1",

src/components/analyzer.js

@@ -0,0 +1,46 @@
+AFRAME.registerComponent('analyser', {
+  dependencies: ['audioanalyser'],
+  schema: {
+    height: {default: 1.0},
+    thickness: {default: 0.1},
+    separation: {default: 0.3},
+    scale: {default: 4.0},
+    mirror: {default: 3}
+  },
+
+  init: function () {
+    this.analyser = this.el.components.audioanalyser;
+    this.columns = null;
+    var material = this.el.sceneEl.systems.materials.black;
+    var geometry = new THREE.BoxBufferGeometry();
+    for (var i = 0; i < this.analyser.data.fftSize; i++) {
+      for (var side = 0; side < 2; side++) {
+        var column = new THREE.Mesh(geometry, material);
+        this.el.object3D.add(column);
+      }
+    }
+    this.columns = this.el.object3D.children;
+  },
+
+  update: function () {
+    var z = 0;
+    for (var i = 0; i < this.columns.length; i++) {
+      this.columns[i].position.x = ((i % 2) * 2 - 1) * this.data.mirror;
+      this.columns[i].position.z = z;
+      this.columns[i].scale.set(this.data.thickness, this.data.height, this.data.thickness);
+      z -= this.data.separation;
+    }
+  },
+
+  tick: function () {
+    var v; 
+    var height = this.data.height;
+    var n = this.columns.length / 2;
+
+    for (var i = 0; i < n; i++) {
+      v = height + this.analyser.levels[i] / 256.0 * this.data.scale;
+      this.columns[i * 2 + 0].scale.y = v;
+      this.columns[i * 2 + 1].scale.y = v;
+    }
+  }
+});

src/index.html

@@ -24,6 +24,8 @@
         <a-mixin id="laser" laser geometry="height: 300; depth: 0.16; width: 0.16" materials="neon"></a-mixin>
 
         <audio id="hoverSound" src="/assets/sounds/hover.ogg"></audio>
+        <audio id="introSong" src="/assets/sounds/introSong.ogg" autoplay></audio>
+
         <img id="gridImg" src="assets/img/grid.png">
         <img id="playImg" src="assets/img/play.png">
         <img id="sliceImg" src="assets/img/slice.png">

src/index.js

@@ -3,6 +3,7 @@ require('babel-polyfill');
 function requireAll (req) { req.keys().forEach(req); }
 
 require('aframe-animation-component');
+require('aframe-audioanalyser-component');
 require('aframe-cubemap-component');
 require('aframe-event-set-component');
 require('aframe-haptics-component');

src/templates/stage.html

@@ -5,7 +5,7 @@
 
     <a-entity id="twister" twister position="0 0 -60" rotation="90 0 0"></a-entity>
 
-    <a-entity audioanalyser="src: #song; fftSize: 128; enableBeatDetection: false; enableLevels: false; enableWaveform: false" analyser="height: 28; mirror: 10; scale: 10; thickness: 0.4; separation: 0.45" position="0 -17 4"></a-entity>
+    <a-entity audioanalyser="src: #introSong; fftSize: 128; enableBeatDetection: false; enableLevels: false; enableWaveform: false" analyser="height: 28; mirror: 10; scale: 10; thickness: 0.4; separation: 0.45" position="0 -17 4"></a-entity>
 
     <!-- corridor -->
     <a-entity geometry="height: 0.3; depth: 50; width: 4.1" position="0 0 -31.85" materials="black"></a-entity>