Added Audio Support

bkcore/Audio.js

@@ -0,0 +1,61 @@
+var bkcore = bkcore || {};
+
+bkcore.Audio = {};
+bkcore.Audio.sounds = {};
+
+bkcore.Audio.init = function(){
+	bkcore.Audio._ctx = new (window.AudioContext||window.webkitAudioContext);
+	bkcore.Audio._panner = bkcore.Audio._ctx.createPanner();
+	bkcore.Audio._panner.connect(bkcore.Audio._ctx.destination);
+	bkcore.Audio.posMultipler = 1.5;
+};
+
+bkcore.Audio.init();
+
+bkcore.Audio.addSound = function(src, id, loop, callback){
+	var ctx = bkcore.Audio._ctx;
+	var audio = new Audio();
+	audio.src = src;
+	audio.addEventListener('canplay', callback, false);
+	audio.loop = loop;
+	audio.load();
+	
+	if(ctx){
+		var mediasrc = ctx.createMediaElementSource(audio);
+		mediasrc.connect(bkcore.Audio._panner);
+	}
+	
+	bkcore.Audio.sounds[id] = audio;
+};
+
+bkcore.Audio.play = function(id){
+	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){
+	bkcore.Audio.sounds[id].pause();
+	bkcore.Audio.sounds[id].currentTime = 0;
+};
+
+bkcore.Audio.volume = function(id,volume){
+	bkcore.Audio.sounds[id].volume = volume;
+};
+
+bkcore.Audio.setListenerPos = function(vec){
+	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){
+	var panner = bkcore.Audio._panner;
+	panner.setVelocity(vec.x, vec.y, vec.z);
+};

bkcore/hexgl/HexGL.js

@@ -112,6 +112,10 @@ bkcore.hexgl.HexGL.prototype.reset = function()
 {
 	this.manager.get('game').objects.lowFPS = 0;
 	this.gameplay.start();
+
+	bkcore.Audio.play('bg');
+	bkcore.Audio.volume('wind', 0.05);
+	bkcore.Audio.play('wind');
 }
 
 bkcore.hexgl.HexGL.prototype.restart = function()
@@ -166,6 +170,10 @@ bkcore.hexgl.HexGL.prototype.initGameplay = function()
 	});
 
 	this.gameplay.start();
+
+	bkcore.Audio.play('bg');
+	bkcore.Audio.play('wind');
+	bkcore.Audio.volume('wind',0.05);
 }
 
 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,8 +587,10 @@ 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);
@@ -588,8 +598,10 @@ bkcore.hexgl.ShipControls.prototype.boosterCheck = function(dt)
 
 	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,9 @@ bkcore.hexgl.ShipControls.prototype.collisionCheck = function(dt)
 
 	if(collision.r < 255)
 	{
+		if(this.boost > 0) bkcore.Audio.stop('boost');
+		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,28 @@ 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
+					},
+					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
+					}
 				}
 			});
 		}
@@ -140,6 +162,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);
+
 	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 @@
     <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>