HTML5 Spatial Audio

When messing around with Phaser I wanted a way to use HTML5 3D audio. 3D audio allows people using headphones to hear noises coming from different directions.

Instead of creating a phaser plugin, I instead created a stand alone library that you can interface with phaser. This means that this library can be used with other game frameworks or by itself. The library is essentially a wrapper for the HTML 3D audio api. The library uses code from here to load sounds.

Loading Sounds

 // Creates the buffer to load sounds - createBufferLoader(array of sound locations, function to run after sounds are loaded)
    ], function(){

// load sounds

//is true if sounds have loaded

Manipulating Listener (the listener is like where the persons ears would be in the scene)

//Set the listener's orientation - setListOrientation(x, y, z, x up vector, y up vector, z up vector)
audioLIB.setListOrientation(x, y, z, Ux, Uy, Uz);

//Set the listener's position
audioLIB.setListPosition(x, y, z);

//Set the listener's velocity
audioLIB.setListVelocity(x, y, z);

//Update the listener's orientation and position based on a sprite - updateFromSprite(sprite, [optional] sprite body)
//Doesn't set the listener's velocity

Mainpulationg Sounds

//Array containing all sounds

//Shortcut for setting whether the sounds should loop or not - setSoundLoops(boolean)

//Starts playing all sounds

//Stops playing all sounds

//Runs a function for each sound
audioLIB.forEachSound(function (sound) {

//Functions in sound objects

//Set sound object orientation, position and velocity

//Set sound object direction - setDirection(coneInnerAngle, coneOuterAngle, coneOuterGain)
audioLIB.Sound.prototype.setDirection(iA, oA, oG);

//Set sound object gain - setGain(float)

//Set whether sound object loops - setLoop(boolean)

//Set the sound object's buffer (the buffer contains the sound objects sound data)

//Update the sound object's orientation and position with a sprite - updateFromSprite(sprite, [optional] sprite body)
audioLIB.Sound.prototype.updateFromSprite(sprite, body);

//Start playing the sound at position v

//Stop playing the sound
Download Link: Click here
Please credit me if used

Download Link for BufferLoader: Click here


An asteroids game made with Phaser. Phaser is a HTML5 game framework. It allows you to create 2D games for websites. 

You fly around as a space ship trying to avoid the asteroids, and shoot at them to gain points. When you shoot a large asteroid it splits into smaller asteroids, and shooting a smaller asteroid will destroy it. Objects wrap around screen edges, for example if the ship goes off the left edge it appears on the right edge.

The game is based on Asteroids, an arcade game made in the 70s. It had the same aesthetic as the original game. The arcade game also had flying saucers, which would attack the player, and a hyperdrive that would place the player randomly on the screen.

Click here to play the game

Libraries Used: Click Here
Ateroids Arcade Game: Click Here