clean up sound code, reintroduce pitch / inflections

src/assets.html

@@ -20,36 +20,12 @@
 
 <audio id="confirmSound" src="assets/sounds/beatHit.ogg"></audio>
 <audio id="hoverSound" src="assets/sounds/hover.ogg"></audio>
-<audio id="hitSound1" src="assets/sounds/hit1.ogg"></audio>
-<audio id="hitSound2" src="assets/sounds/hit2.ogg"></audio>
-<audio id="hitSound3" src="assets/sounds/hit3.ogg"></audio>
-<audio id="hitSound4" src="assets/sounds/hit4.ogg"></audio>
-<audio id="hitSound5" src="assets/sounds/hit5.ogg"></audio>
-<audio id="hitSound6" src="assets/sounds/hit6.ogg"></audio>
-<audio id="hitSound7" src="assets/sounds/hit7.ogg"></audio>
-<audio id="hitSound8" src="assets/sounds/hit8.ogg"></audio>
-<audio id="hitSound9" src="assets/sounds/hit9.ogg"></audio>
-<audio id="hitSound10" src="assets/sounds/hit10.ogg"></audio>
-<audio id="hitSound1left" src="assets/sounds/hit1left.ogg"></audio>
-<audio id="hitSound2left" src="assets/sounds/hit2left.ogg"></audio>
-<audio id="hitSound3left" src="assets/sounds/hit3left.ogg"></audio>
-<audio id="hitSound4left" src="assets/sounds/hit4left.ogg"></audio>
-<audio id="hitSound5left" src="assets/sounds/hit5left.ogg"></audio>
-<audio id="hitSound6left" src="assets/sounds/hit6left.ogg"></audio>
-<audio id="hitSound7left" src="assets/sounds/hit7left.ogg"></audio>
-<audio id="hitSound8left" src="assets/sounds/hit8left.ogg"></audio>
-<audio id="hitSound9left" src="assets/sounds/hit9left.ogg"></audio>
-<audio id="hitSound10left" src="assets/sounds/hit10left.ogg"></audio>
-<audio id="hitSound1right" src="assets/sounds/hit1right.ogg"></audio>
-<audio id="hitSound2right" src="assets/sounds/hit2right.ogg"></audio>
-<audio id="hitSound3right" src="assets/sounds/hit3right.ogg"></audio>
-<audio id="hitSound4right" src="assets/sounds/hit4right.ogg"></audio>
-<audio id="hitSound5right" src="assets/sounds/hit5right.ogg"></audio>
-<audio id="hitSound6right" src="assets/sounds/hit6right.ogg"></audio>
-<audio id="hitSound7right" src="assets/sounds/hit7right.ogg"></audio>
-<audio id="hitSound8right" src="assets/sounds/hit8right.ogg"></audio>
-<audio id="hitSound9right" src="assets/sounds/hit9right.ogg"></audio>
-<audio id="hitSound10right" src="assets/sounds/hit10right.ogg"></audio>
+
+{% for i in range(1, 11) %}
+<audio id="hitSound{{ i }}" src="assets/sounds/hit{{ i }}.ogg"></audio>
+<audio id="hitSound{{ i }}left" src="assets/sounds/hit{{ i }}left.ogg"></audio>
+<audio id="hitSound{{ i }}right" src="assets/sounds/hit{{ i }}right.ogg"></audio>
+{% endfor %}
 
 <img id="backglowTexture" src="assets/img/stage/backglow.png">
 <img id="cursorMeshImg" src="assets/models/laser/laser.png">

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; }

src/index.html

@@ -58,39 +58,8 @@
       <a-entity id="container">
         <a-entity
           id="beatContainer"
-          beat-hit-sound
           bind__pause="isPaused: !isPlaying"
-          sound__beathit1="poolSize: 4; src: assets/sounds/hit1.ogg"
-          sound__beathit2="poolSize: 4; src: assets/sounds/hit2.ogg"
-          sound__beathit3="poolSize: 4; src: assets/sounds/hit3.ogg"
-          sound__beathit4="poolSize: 4; src: assets/sounds/hit4.ogg"
-          sound__beathit5="poolSize: 4; src: assets/sounds/hit5.ogg"
-          sound__beathit6="poolSize: 4; src: assets/sounds/hit6.ogg"
-          sound__beathit7="poolSize: 4; src: assets/sounds/hit7.ogg"
-          sound__beathit8="poolSize: 4; src: assets/sounds/hit8.ogg"
-          sound__beathit9="poolSize: 4; src: assets/sounds/hit9.ogg"
-          sound__beathit10="poolSize: 4; src: assets/sounds/hit10.ogg"
-          sound__beathit1left="poolSize: 4; src: assets/sounds/hit1left.ogg"
-          sound__beathit2left="poolSize: 4; src: assets/sounds/hit2left.ogg"
-          sound__beathit3left="poolSize: 4; src: assets/sounds/hit3left.ogg"
-          sound__beathit4left="poolSize: 4; src: assets/sounds/hit4left.ogg"
-          sound__beathit5left="poolSize: 4; src: assets/sounds/hit5left.ogg"
-          sound__beathit6left="poolSize: 4; src: assets/sounds/hit6left.ogg"
-          sound__beathit7left="poolSize: 4; src: assets/sounds/hit7left.ogg"
-          sound__beathit8left="poolSize: 4; src: assets/sounds/hit8left.ogg"
-          sound__beathit9left="poolSize: 4; src: assets/sounds/hit9left.ogg"
-          sound__beathit10left="poolSize: 4; src: assets/sounds/hit10left.ogg"
-          sound__beathit1right="poolSize: 4; src: assets/sounds/hit1right.ogg"
-          sound__beathit2right="poolSize: 4; src: assets/sounds/hit2right.ogg"
-          sound__beathit3right="poolSize: 4; src: assets/sounds/hit3right.ogg"
-          sound__beathit4right="poolSize: 4; src: assets/sounds/hit4right.ogg"
-          sound__beathit5right="poolSize: 4; src: assets/sounds/hit5right.ogg"
-          sound__beathit6right="poolSize: 4; src: assets/sounds/hit6right.ogg"
-          sound__beathit7right="poolSize: 4; src: assets/sounds/hit7right.ogg"
-          sound__beathit8right="poolSize: 4; src: assets/sounds/hit8right.ogg"
-          sound__beathit9right="poolSize: 4; src: assets/sounds/hit9right.ogg"
-          sound__beathit10right="poolSize: 4; src: assets/sounds/hit10right.ogg"
-          ></a-entity>
+          beat-hit-sound></a-entity>
         {% include './templates/stage.html' %}
         {% include './templates/loading.html' %}
         {% include './templates/score.html' %}