wired new saber sounds

src/assets.html

@@ -18,10 +18,38 @@
 <a-asset-item id="tutorial1Obj" src="assets/models/tutorial1.obj"></a-asset-item>
 <a-asset-item id="tutorial2Obj" src="assets/models/tutorial2.obj"></a-asset-item>
 
-<audio id="beatHitSound" src="assets/sounds/beatHit.ogg"></audio>
 <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>
 
 <img id="backglowTexture" src="assets/img/stage/backglow.png">
 <img id="cursorMeshImg" src="assets/models/laser/laser.png">

src/components/beat-hit-sound.js

@@ -6,6 +6,7 @@ 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.');
@@ -32,19 +33,41 @@ 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'
+  },
+
   init: function () {
     this.currentBeatEl = null;
     this.currentCutDirection = '';
-    this.el.setAttribute('sound__beathit', {
+    for (let i = 1; i <= 10; i++) {
-      poolSize: 12,
+      this.el.setAttribute(`sound__beathit${i}`, {
-      src: '#hitSound9',
+        poolSize: 4,
-      volume: 0.9
+        src: `#hitSound${i}`
-    });
+      });
+      this.el.setAttribute(`sound__beathit${i}left`, {
+        poolSize: 4,
+        src: `#hitSound${i}left`
+      });
+      this.el.setAttribute(`sound__beathit${i}right`, {
+        poolSize: 4,
+        src: `#hitSound${i}right`
+      });
+    }
     this.processSound = this.processSound.bind(this);
 
     sourceCreatedCallback = this.sourceCreatedCallback.bind(this);
@@ -52,18 +75,34 @@ AFRAME.registerComponent('beat-hit-sound', {
 
   play: function () {
     // Kick three.js loader...Don't know why sometimes doesn't load.
-    if (!this.el.components.sound__beathit.loaded) {
+    for (let i = 1; i <= 10; i++) {
-      console.log('[beat-hit-sound] Kicking three.js AudioLoader / sound component...');
+      if (!this.el.components[`sound__beathit${i}`].loaded) {
-      this.el.setAttribute('sound__beathit', 'src', '');
+        console.log(`[beat-hit-sound: hit${i}] Kicking three.js AudioLoader / sound component...`);
-      this.el.setAttribute('sound__beathit', 'src', '#hitSound9');
+        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`);
+      }
     }
   },
 
   playSound: function (beatEl, cutDirection) {
-    const soundPool = this.el.components.sound__beathit;
+    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(this.processSound);
+    soundPool.playSound();
   },
 
   processSound: function (audio) {

src/index.html

@@ -60,7 +60,37 @@
           id="beatContainer"
           beat-hit-sound
           bind__pause="isPaused: !isPlaying"
-          sound__beathit="poolSize: 12; src: assets/sounds/hit9.ogg"></a-entity>
+          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>
         {% include './templates/stage.html' %}
         {% include './templates/loading.html' %}
         {% include './templates/score.html' %}