Merge pull request #26 from licson0729/master

Added Audio Support

audio/LICENSE

@@ -0,0 +1,26 @@
+Licenses for the sound files
+=============================
+
+*boost.mp3*
+
+Created by IFartInUrGeneralDirection and distributed under
+Creative Commons 3.0 Attribution 3.0 Unported license.
+
+*crash.mp3*
+Created by qubodup and is published into Public Domain.
+
+*wind.mp3*
+Created by kangaroovindaloo and distributed under
+Creative Commons 3.0 Attribution 3.0 Unported license.
+
+This SFX is further cutted and adjusted by Licson.
+
+*bg.mp3*
+Created by mu6k and is released into Public Domain.
+
+Further adjusted by Licson.
+
+*destroyed.mp3*
+Created by beman87 and is distributed under Creative Commons Attribution 3.0 Unported license.
+
+This SFX is further adjusted by Licson.

bkcore/Audio.js

@@ -0,0 +1,142 @@
+var bkcore = bkcore || {};
+
+bkcore.Audio = {};
+bkcore.Audio.sounds = {};
+
+bkcore.Audio.init = function(){
+	if(window.AudioContext||window.webkitAudioContext){
+		bkcore.Audio._ctx = new (window.AudioContext||window.webkitAudioContext)();
+		bkcore.Audio._panner = bkcore.Audio._ctx.createPanner();
+		bkcore.Audio._panner.connect(bkcore.Audio._ctx.destination);
+	}
+	else {
+		bkcore.Audio._ctx = null;
+	}
+
+	bkcore.Audio.posMultipler = 1.5;
+};
+
+bkcore.Audio.init();
+
+bkcore.Audio.addSound = function(src, id, loop, callback, usePanner){
+	var ctx = bkcore.Audio._ctx;
+	var audio = new Audio();
+
+	if(ctx){
+		var audio = { src: null, gainNode: null, bufferNode: null, loop: loop };
+		var xhr = new XMLHttpRequest();
+		xhr.responseType = 'arraybuffer';
+
+		xhr.onload = function(){
+			ctx.decodeAudioData(xhr.response, function(b){
+				// Create Gain Node
+				var gainNode = ctx.createGain();
+
+				if(usePanner === true){
+					gainNode.connect(bkcore.Audio._panner);
+				}
+				else {
+					gainNode.connect(ctx.destination);
+				}
+
+				// Add the audio source
+				audio.src = b;
+
+				//Remember the gain node
+				audio.gainNode = gainNode;
+
+				callback();
+			}, function(e){
+				console.error('Audio decode failed!', e);
+			});
+		};
+
+		xhr.open('GET', src, true);
+		xhr.send(null);
+	}
+	else {
+		// Workaround for old Safari
+		audio.addEventListener('canplay', function(){
+			audio.pause();
+			audio.currentTime = 0;
+
+			callback();
+		}, false);
+
+		audio.autoplay = true;
+		audio.loop = loop;
+		audio.src = src;
+	}
+
+	bkcore.Audio.sounds[id] = audio;
+};
+
+bkcore.Audio.play = function(id){
+	var ctx = bkcore.Audio._ctx;
+
+	if(ctx){
+		var sound = ctx.createBufferSource();
+		sound.connect(bkcore.Audio.sounds[id].gainNode);
+
+		sound.buffer = bkcore.Audio.sounds[id].src;
+		sound.loop = bkcore.Audio.sounds[id].loop;
+
+		bkcore.Audio.sounds[id].gainNode.gain.value = 1;
+		bkcore.Audio.sounds[id].bufferNode = sound;
+
+		sound.start ? sound.start(0) : sound.noteOn(0);
+	}
+	else {
+		if(bkcore.Audio.sounds[id].currentTime > 0){
+			bkcore.Audio.sounds[id].pause();
+			bkcore.Audio.sounds[id].currentTime = 0;
+		}
+
+		bkcore.Audio.sounds[id].play();
+	}
+};
+
+bkcore.Audio.stop = function(id){
+	var ctx = bkcore.Audio._ctx;
+
+	if(ctx){
+		if(bkcore.Audio.sounds[id].bufferNode !== null){
+			var bufferNode = bkcore.Audio.sounds[id].bufferNode;
+			bufferNode.stop ? bufferNode.stop(ctx.currentTime) : bufferNode.noteOff(ctx.currentTime);
+		}
+	}
+	else {
+		bkcore.Audio.sounds[id].pause();
+		bkcore.Audio.sounds[id].currentTime = 0;
+	}
+};
+
+bkcore.Audio.volume = function(id, volume){
+	var ctx = bkcore.Audio._ctx;
+
+	if(ctx){
+		bkcore.Audio.sounds[id].gainNode.gain.value = volume;
+	}
+	else {
+		bkcore.Audio.sounds[id].volume = volume;
+	}
+};
+
+bkcore.Audio.setListenerPos = function(vec){
+	if(bkcore.Audio._ctx){
+		var panner = bkcore.Audio._panner;
+		var vec2 = vec.normalize();
+		panner.setPosition(
+			vec2.x * bkcore.Audio.posMultipler,
+			vec2.y * bkcore.Audio.posMultipler,
+			vec2.z * bkcore.Audio.posMultipler
+		);
+	}
+};
+
+bkcore.Audio.setListenerVelocity = function(vec){
+	if(bkcore.Audio._ctx){
+		var panner = bkcore.Audio._panner;
+		panner.setVelocity(vec.x, vec.y, vec.z);
+	}
+};

bkcore/hexgl/HexGL.js

@@ -112,6 +112,12 @@ bkcore.hexgl.HexGL.prototype.reset = function()
 {
 	this.manager.get('game').objects.lowFPS = 0;
 	this.gameplay.start();
+
+	bkcore.Audio.stop('bg');
+	bkcore.Audio.stop('wind');
+	bkcore.Audio.volume('wind', 0.35);
+	bkcore.Audio.play('bg');
+	bkcore.Audio.play('wind');
 }
 
 bkcore.hexgl.HexGL.prototype.restart = function()
@@ -166,6 +172,10 @@ bkcore.hexgl.HexGL.prototype.initGameplay = function()
 	});
 
 	this.gameplay.start();
+
+	bkcore.Audio.play('bg');
+	bkcore.Audio.play('wind');
+	bkcore.Audio.volume('wind', 0.35);
 }
 
 bkcore.hexgl.HexGL.prototype.displayScore = function(f, l)

bkcore/hexgl/ShipControls.js

@@ -338,6 +338,10 @@ bkcore.hexgl.ShipControls.prototype.terminate = function()
 
 bkcore.hexgl.ShipControls.prototype.destroy = function()
 {
+	bkcore.Audio.play('destroyed');
+	bkcore.Audio.stop('bg');
+	bkcore.Audio.stop('wind');
+
 	this.active = false;
 	this.destroyed = true;
 	this.collision.front = false;
@@ -532,6 +536,10 @@ bkcore.hexgl.ShipControls.prototype.update = function(dt)
 		this.mesh.applyMatrix(this.dummy.matrix);
 		this.mesh.updateMatrixWorld(true);
 	}
+
+	//Update listener position
+	bkcore.Audio.setListenerPos(this.movement);
+	bkcore.Audio.setListenerVelocity(this.currentVelocity);
 };
 
 bkcore.hexgl.ShipControls.prototype.teleport = function(pos, quat)
@@ -549,7 +557,7 @@ bkcore.hexgl.ShipControls.prototype.teleport = function(pos, quat)
 	if(this.mesh != null)
 	{
 		this.mesh.matrix.identity();
-/*
+
 		// Gradient (Mesh only, no dummy physics impact)
 		var gradientDelta = (this.gradientTarget - this.gradient) * this.gradientLerp;
 		if(Math.abs(gradientDelta) > this.epsilon) this.gradient += gradientDelta;
@@ -567,7 +575,7 @@ bkcore.hexgl.ShipControls.prototype.teleport = function(pos, quat)
 			this.tiltAxis.set(0,0,1);
 			this.mesh.matrix.rotateByAxis(this.tiltAxis, this.tilt);
 		}
- */
+
 		this.mesh.applyMatrix(this.dummy.matrix);
 		this.mesh.updateMatrixWorld(true);
 	}
@@ -579,17 +587,21 @@ bkcore.hexgl.ShipControls.prototype.boosterCheck = function(dt)
 		return false;
 
 	this.boost -= this.boosterDecay * dt;
-	if(this.boost < 0)
+	if(this.boost < 0){
 		this.boost = 0.0;
+		bkcore.Audio.stop('boost');
+	}
 
 	var x = Math.round(this.collisionMap.pixels.width/2 + this.dummy.position.x * this.collisionPixelRatio);
 	var z = Math.round(this.collisionMap.pixels.height/2 + this.dummy.position.z * this.collisionPixelRatio);
 	var pos = new THREE.Vector3(x, 0, z);
 
 	var color = this.collisionMap.getPixel(x, z);
 
-	if(color.r == 255 && color.g < 127 && color.b < 127)
+	if(color.r == 255 && color.g < 127 && color.b < 127) {
+		bkcore.Audio.play('boost');
 		this.boost = this.boosterSpeed;
+	}
 
 	this.movement.z += this.boost * dt;
 }
@@ -616,6 +628,8 @@ bkcore.hexgl.ShipControls.prototype.collisionCheck = function(dt)
 
 	if(collision.r < 255)
 	{
+		bkcore.Audio.play('crash');
+
 		// Shield
 		var sr = (this.getRealSpeed() / this.maxSpeed);
 		this.shield -= sr * sr * 0.8 * this.shieldDamage;

bkcore/hexgl/tracks/Cityscape.js

@@ -1,4 +1,4 @@
- /*
+/*
  * HexGL
  * @author Thibaut 'BKcore' Despoulain <http://bkcore.com>
  * @license This work is licensed under the Creative Commons Attribution-NonCommercial 3.0 Unported License.
@@ -83,6 +83,33 @@ bkcore.hexgl.tracks.Cityscape = {
 					'hud.bg'							: "textures/hud/hud-bg.png",
 					'hud.speed'							: "textures/hud/hud-fg-speed.png",
 					'hud.shield'						: "textures/hud/hud-fg-shield.png"
+				},
+				sounds: {
+					bg: {
+						src: 'audio/bg.mp3',
+						loop: true,
+						usePanner: false
+					},
+					crash: {
+						src: 'audio/crash.mp3',
+						loop: false,
+						usePanner: true
+					},
+					destroyed: {
+						src: 'audio/destroyed.mp3',
+						loop: false,
+						usePanner: false
+					},
+					boost: {
+						src: 'audio/boost.mp3',
+						loop: false,
+						usePanner: true
+					},
+					wind: {
+						src: 'audio/wind.mp3',
+						loop: true,
+						usePanner: true
+					}
 				}
 			});
 		}
@@ -140,6 +167,28 @@ bkcore.hexgl.tracks.Cityscape = {
 					'hud.bg'							: "textures.full/hud/hud-bg.png",
 					'hud.speed'							: "textures.full/hud/hud-fg-speed.png",
 					'hud.shield'						: "textures.full/hud/hud-fg-shield.png"
+				},
+				sounds: {
+					bg: {
+						src: 'audio/bg.mp3',
+						loop: true
+					},
+					crash: {
+						src: 'audio/crash.mp3',
+						loop: false
+					},
+					destroyed: {
+						src: 'audio/destroyed.mp3',
+						loop: false
+					},
+					boost: {
+						src: 'audio/boost.mp3',
+						loop: false
+					},
+					wind: {
+						src: 'audio/wind.mp3',
+						loop: true
+					}
 				}
 			});
 		}

bkcore/threejs/Loader.js

@@ -90,6 +90,9 @@ bkcore.threejs.Loader.prototype.load = function(data)
 	for(var i in data.images)
 		this.loadImage(i, data.images[i]);
 
+	for(var s in data.sounds)
+		this.loadSound(data.sounds[s].src, s, data.sounds[s].loop, data.sounds[s].usePanner);
+
 	this.progressCallback.call(this, this.progress);
 }
 
@@ -228,4 +231,30 @@ bkcore.threejs.Loader.prototype.loadImage = function(name, url)
 	e.crossOrigin = "anonymous";
 	e.src = url;
 	this.data.images[name] = e;
-}
+}
+
+bkcore.threejs.Loader.prototype.loadSound = function(src, name, loop){
+    var self = this;
+    this.updateState("sounds", name, false);
+
+    bkcore.Audio.addSound(
+    	src,
+    	name, 
+    	loop, 
+    	function(){
+       	 self.updateState("sounds", name, true);
+    	}
+    );
+
+    this.data.sounds[name] = {
+        play: function(){
+            bkcore.Audio.play(name);
+        },
+        stop: function(){
+            bkcore.Audio.stop(name);
+        },
+        volume: function(vol){
+            bkcore.Audio.volume(name, vol);
+        }
+    };
+};

index.html

@@ -110,6 +110,8 @@ <h4>Click anywhere to continue.</h3>
     <script src="bkcore/threejs/Particles.js"></script>
     <script src="bkcore/threejs/Loader.js"></script>
 
+    <script src="bkcore/Audio.js"></script>
+
     <script src="bkcore/hexgl/HUD.js"></script>
     <script src="bkcore/hexgl/RaceData.js"></script>
     <script src="bkcore/hexgl/ShipControls.js"></script>