clean up sound code, reintroduce pitch / inflections

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