work on beat hit sound

src/components/beat-hit-sound.js

@@ -1,4 +1,5 @@
 var audioContext = new window.AudioContext();
+var sourceCreatedCallback = null;
 
 // Allows for modifying detune. PR has been sent to three.js.
 THREE.Audio.prototype.play = function () {
@@ -19,6 +20,7 @@ THREE.Audio.prototype.play = function () {
   source.onended = this.onEnded.bind(this);
   source.playbackRate.setValueAtTime(this.playbackRate, this.startTime);
   this.startTime = this.context.currentTime;
+  if (sourceCreatedCallback) { sourceCreatedCallback(source); }
   source.start(this.startTime, this.offset);
 
   this.isPlaying = true;
@@ -34,19 +36,37 @@ AFRAME.registerComponent('beat-hit-sound', {
   dependencies: ['sound__beathit'],
 
   init: function () {
+    this.currentBeatEl = null;
+    this.currentCutDirection = '';
+    this.el.setAttribute('sound__beathit', {
+      poolSize: 12,
+      src: 'assets/sounds/beatHit.ogg',
+      volume: 0.5
+    });
     this.processSound = this.processSound.bind(this);
+
+    sourceCreatedCallback = this.sourceCreatedCallback.bind(this);
   },
 
-  playSound: function (beatEl) {
+  playSound: function (beatEl, cutDirection) {
     const soundPool = this.el.components.sound__beathit;
     this.currentBeatEl = beatEl;
+    this.currentCutDirection = cutDirection;
     soundPool.playSound(this.processSound);
   },
 
   processSound: function (audio) {
-    // Randomize a bit.
-    audio.detune = (Math.random() * 2000);
-    audio.playbackRate = 1 - (Math.random() * 0.20);
+    audio.detune = 0;
     this.currentBeatEl.object3D.getWorldPosition(audio.position);
+  },
+
+  sourceCreatedCallback: function (source) {
+    source.detune.setValueAtTime(0, 0);
+    if (this.currentCutDirection === 'down') {
+      source.detune.linearRampToValueAtTime(-200, 1.5);
+    }
+    if (this.currentCutDirection === 'up') {
+      source.detune.linearRampToValueAtTime(200, 1.5);
+    }
   }
 });

src/components/beat-loader.js

@@ -15,6 +15,16 @@ AFRAME.registerComponent('beat-loader', {
   },
 
   orientations: [180, 0, 270, 90, 225, 135, 315, 45, 0],
+  orientationsHumanized: {
+    0: 'down',
+    45: 'downright',
+    90: 'right',
+    135: 'upright',
+    180: 'up',
+    225: 'upleft',
+    270: 'left',
+    315: 'downleft'
+  },
   horizontalPositions: [-0.60, -0.25, 0.25, 0.60],
   verticalPositions: [1.00, 1.35, 1.70],
 
@@ -201,15 +211,19 @@ AFRAME.registerComponent('beat-loader', {
       if (!beatEl) { return; }
 
       beatObj.color = color;
-      beatObj.type = type;
+      beatObj.cutDirection =
+        this.orientationsHumanized[this.orientations[noteInfo._cutDirection]];
       beatObj.speed = this.data.beatSpeed;
+      beatObj.type = type;
       beatEl.setAttribute('beat', beatObj);
       beatEl.object3D.position.set(
         this.horizontalPositions[noteInfo._lineIndex],
         this.verticalPositions[noteInfo._lineLayer],
         -this.data.beatAnticipationTime * this.data.beatSpeed - swordOffset
       );
-      beatEl.object3D.rotation.z = THREE.Math.degToRad(this.orientations[noteInfo._cutDirection]);
+      beatEl.object3D.rotation.z = THREE.Math.degToRad(
+        this.orientations[noteInfo._cutDirection]);
+
       beatEl.play();
 
       this.beams.newBeam(color, beatEl.object3D.position);

src/components/beat.js

@@ -8,6 +8,7 @@ var auxObj3D = new THREE.Object3D();
 AFRAME.registerComponent('beat', {
   schema: {
     color: {default: 'red', oneOf: ['red', 'blue']},
+    cutDirection: {type: 'string'},
     debug: {default: false},
     size: {default: 0.30},
     speed: {default: 1.0},
@@ -454,12 +455,14 @@ AFRAME.registerComponent('beat', {
       if (!saberBoundingBox) { break; }
 
       if (hitBoundingBox && saberBoundingBox.intersectsBox(hitBoundingBox)) {
-        if (saberEls[i].components['saber-controls'].swinging && this.data.color === saberColors[saberEls[i].getAttribute('saber-controls').hand]) {
+        if (saberEls[i].components['saber-controls'].swinging &&
+            this.data.color === saberColors[saberEls[i].getAttribute('saber-controls').hand]) {
           this.el.emit('beathit', null, true);
         } else {
           this.wrongHit(saberEls[i].getAttribute('saber-controls').hand);
         }
-        this.el.parentNode.components['beat-hit-sound'].playSound(this.el);
+        this.el.parentNode.components['beat-hit-sound'].playSound(
+          this.el, this.data.cutDirection);
         this.destroyBeat(saberEls[i]);
         break;
       }
@@ -472,7 +475,8 @@ AFRAME.registerComponent('beat', {
           break;
         }
 
-        if (this.data.type === 'dot' && saberEls[i].components['saber-controls'].swinging && this.data.color === saberColors[saberEls[i].getAttribute('saber-controls').hand]) {
+        if (this.data.type === 'dot' && saberEls[i].components['saber-controls'].swinging &&
+            this.data.color === saberColors[saberEls[i].getAttribute('saber-controls').hand]) {
           this.el.emit('beathit', null, true);
         } else {
           this.wrongHit(saberEls[i].getAttribute('saber-controls').hand);