diff --git a/assets/sounds/introSong.ogg b/assets/sounds/introSong.ogg
new file mode 100644
index 0000000..c374af4
Binary files /dev/null and b/assets/sounds/introSong.ogg differ
diff --git a/package.json b/package.json
index 69c5c66..a63029e 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/analyzer.js b/src/components/analyzer.js
new file mode 100644
index 0000000..c87c6a1
--- /dev/null
+++ b/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;
+ }
+ }
+});
diff --git a/src/index.html b/src/index.html
index 8bc6fc0..8694c2e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -24,6 +24,8 @@
+
+
diff --git a/src/index.js b/src/index.js
index 2709819..2c527b9 100644
--- a/src/index.js
+++ b/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');
diff --git a/src/templates/stage.html b/src/templates/stage.html
index e085b53..e93f10d 100644
--- a/src/templates/stage.html
+++ b/src/templates/stage.html
@@ -5,7 +5,7 @@
-
+