diff --git a/src/assets.html b/src/assets.html
index 4d6d14b..812dc8a 100644
--- a/src/assets.html
+++ b/src/assets.html
@@ -20,36 +20,12 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+{% for i in range(1, 11) %}
+
+
+
+{% endfor %}
diff --git a/src/components/beat-hit-sound.js b/src/components/beat-hit-sound.js
index 9396271..d1b80dd 100644
--- a/src/components/beat-hit-sound.js
+++ b/src/components/beat-hit-sound.js
@@ -1,12 +1,10 @@
var audioContext = new window.AudioContext();
-var sourceCreatedCallback = null;
const LAYER_BOTTOM = 'bottom';
const LAYER_MIDDLE = 'middle';
const LAYER_TOP = 'top';
// Allows for modifying detune. PR has been sent to three.js.
-/*
THREE.Audio.prototype.play = function () {
if (this.isPlaying === true) {
console.warn('THREE.Audio: Audio is already playing.');
@@ -33,27 +31,26 @@ THREE.Audio.prototype.play = function () {
this.source = source;
return this.connect();
};
-*/
/**
* Beat hit sound using positional audio and audio buffer source.
*/
AFRAME.registerComponent('beat-hit-sound', {
-
directionsToSounds: {
- 'up': '',
- 'down': '',
- 'upleft': 'left',
- 'upright': 'right',
- 'downleft': 'left',
- 'downright': 'right',
- 'left': 'left',
- 'right': 'right'
+ up: '',
+ down: '',
+ upleft: 'left',
+ upright: 'right',
+ downleft: 'left',
+ downright: 'right',
+ left: 'left',
+ right: 'right'
},
init: function () {
this.currentBeatEl = null;
this.currentCutDirection = '';
+
for (let i = 1; i <= 10; i++) {
this.el.setAttribute(`sound__beathit${i}`, {
poolSize: 4,
@@ -68,26 +65,22 @@ AFRAME.registerComponent('beat-hit-sound', {
src: `#hitSound${i}right`
});
}
- this.processSound = this.processSound.bind(this);
- sourceCreatedCallback = this.sourceCreatedCallback.bind(this);
+ this.processSound = this.processSound.bind(this);
},
play: function () {
// Kick three.js loader...Don't know why sometimes doesn't load.
for (let i = 1; i <= 10; i++) {
if (!this.el.components[`sound__beathit${i}`].loaded) {
- console.log(`[beat-hit-sound: hit${i}] Kicking three.js AudioLoader / sound component...`);
this.el.setAttribute(`sound__beathit${i}`, 'src', '');
this.el.setAttribute(`sound__beathit${i}`, 'src', `#hitSound${i}`);
}
if (!this.el.components[`sound__beathit${i}left`].loaded) {
- console.log(`[beat-hit-sound: hit${i}left] Kicking three.js AudioLoader / sound component...`);
this.el.setAttribute(`sound__beathit${i}left`, 'src', '');
this.el.setAttribute(`sound__beathit${i}left`, 'src', `#hitSound${i}left`);
}
if (!this.el.components[`sound__beathit${i}right`].loaded) {
- console.log(`[beat-hit-sound: hit${i}right] Kicking three.js AudioLoader / sound component...`);
this.el.setAttribute(`sound__beathit${i}right`, 'src', '');
this.el.setAttribute(`sound__beathit${i}right`, 'src', `#hitSound${i}right`);
}
@@ -97,21 +90,25 @@ AFRAME.registerComponent('beat-hit-sound', {
playSound: function (beatEl, cutDirection) {
const rand = 1 + Math.floor(Math.random() * 10);
const dir = this.directionsToSounds[cutDirection || 'up'];
- //console.log(`sound__beathit${rand}${dir}`);
const soundPool = this.el.components[`sound__beathit${rand}${dir}`];
this.currentBeatEl = beatEl;
- this.currentCutDirection = cutDirection;
- //soundPool.playSound(this.processSound);
- soundPool.playSound();
+ soundPool.playSound(this.processSound);
},
+ /**
+ * Set audio stuff before playing.
+ */
processSound: function (audio) {
audio.detune = 0;
this.currentBeatEl.object3D.getWorldPosition(audio.position);
},
+ /**
+ * Function callback to process source buffer once created.
+ * Set detune for pitch and inflections.
+ */
sourceCreatedCallback: function (source) {
- // Pitch.
+ // Pitch based on layer.
const layer = this.getLayer(this.currentBeatEl.object3D.position.y);
if (layer === LAYER_BOTTOM) {
source.detune.setValueAtTime(-400, 0);
@@ -119,15 +116,18 @@ AFRAME.registerComponent('beat-hit-sound', {
source.detune.setValueAtTime(200, 0);
}
- // Inflection.
+ // Inflection on strike down or up.
if (this.currentCutDirection === 'down') {
source.detune.linearRampToValueAtTime(-400, 1);
}
if (this.currentCutDirection === 'up') {
source.detune.linearRampToValueAtTime(400, 1);
}
- },
+ },
+ /**
+ * Get whether beat is on bottom, middle, or top layer.
+ */
getLayer: function (y) {
if (y === 1) { return LAYER_BOTTOM; }
if (y === 1.70) { return LAYER_TOP; }
diff --git a/src/index.html b/src/index.html
index 485b0c0..dad38f8 100644
--- a/src/index.html
+++ b/src/index.html
@@ -58,39 +58,8 @@
+ beat-hit-sound>
{% include './templates/stage.html' %}
{% include './templates/loading.html' %}
{% include './templates/score.html' %}