From 0c7d7fa9ab1f485d62961a80484774b2b07facce Mon Sep 17 00:00:00 2001 From: Kevin Ngo Date: Thu, 8 Nov 2018 13:00:47 +0800 Subject: [PATCH] clean up sound code, reintroduce pitch / inflections --- src/assets.html | 36 ++++-------------------- src/components/beat-hit-sound.js | 48 ++++++++++++++++---------------- src/index.html | 33 +--------------------- 3 files changed, 31 insertions(+), 86 deletions(-) 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' %}