Audio Sprite In Phaser

Posted By :Ishaan Madan |30th April 2018



No game in the world is complete without some special sounds. The sound during a game not only enhances the user experience but also helps to gain prolonged attention of a user. This blog describes us a way through which we can add sounds in our game using phaser. 
In our current example, we will be loading multiple buttons such as 'numKey', 'escape',  'shot', 'squit' . On click of this button we will be playing different sort of audios.
The buttons are created by calling makeButton function for each function and passing button meta data as arguments. The buttons are added using "game.add.button" method of the 'add' class. Also, the makeButton function is used to add text for each button which acts as button name. The text is added using "game.add.bitmapText" method with 'nokia' font loaded in preload.
To load the audio we will be using "" method in the preload function. Thereafter in create function we will be creating an audio object 'fx' which will be used to perform operations over an audio.
Subsequently, we will be creating audios with different identifiers using "fx.addMarker()" function which takes parameters like identifier, start time and duration of the audio. Eventually, there will be creating buttons and will play various audios on their click using "" method
To cover up all the above mentioned steps, the final code is summarized below.
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });

function preload() {

    game.load.image('title', 'assets/pics/catastrophi.png');

    game.load.spritesheet('button', 'assets/buttons/flixel-button.png', 80, 20);
    game.load.bitmapFont('nokia', 'assets/fonts/bitmapFonts/nokia16black.png', 'assets/fonts/bitmapFonts/nokia16black.xml');

    //'sfx', [ 'assets/audio/SoundEffects/fx_mixdown.mp3', 'assets/audio/SoundEffects/fx_mixdown.ogg' ]);'sfx', 'assets/audio/SoundEffects/fx_mixdown.ogg');


var fx;

function create() {

	game.add.image(0, 0, 'title');

	//	Here we set-up our audio sprite
	fx ='sfx');
    fx.allowMultiple = true;

	//	And this defines the markers.

	//	They consist of a key (for replaying), the time the sound starts and the duration, both given in seconds.
	//	You can also set the volume and loop state, although we don't use them in this example (see the docs)

	fx.addMarker('alien death', 1, 1.0);
	fx.addMarker('boss hit', 3, 0.5);
	fx.addMarker('escape', 4, 3.2);
	fx.addMarker('meow', 8, 0.5);
	fx.addMarker('numkey', 9, 0.1);
	fx.addMarker('ping', 10, 1.0);
	fx.addMarker('death', 12, 4.2);
	fx.addMarker('shot', 17, 1.0);
	fx.addMarker('squit', 19, 0.3);

	//	Make some buttons to trigger the sounds
	makeButton('alien death', 600, 100);
	makeButton('boss hit', 600, 140);
	makeButton('escape', 600, 180);
	makeButton('meow', 600, 220);
	makeButton('numkey', 600, 260);
	makeButton('ping', 600, 300);
	makeButton('death', 600, 340);
	makeButton('shot', 600, 380);
	makeButton('squit', 600, 420);


function makeButton(name, x, y) {

    var button = game.add.button(x, y, 'button', click, this, 0, 1, 2); = name;
    button.scale.set(2, 1.5);
    button.smoothed = false;

    var text = game.add.bitmapText(x, y + 7, 'nokia', name, 16);
    text.x += (button.width / 2) - (text.textWidth / 2);


function click(button) {;



About Author

Ishaan Madan

Ishaan, a skilled technical project manager, excels at breaking down complex projects into manageable tasks. With a background in both technology and project management, he offers a unique perspective to every project he undertakes. His effective communication skills enable him to collaborate seamlessly with both technical and non-technical stakeholders, ensuring everyone is aligned towards shared objectives. He has hands-on experience in utilizing agile methodologies like Scrum and Kanban to drive project management and foster team collaboration. He leverages project management tools such as JIRA, Trello, and Clickup to monitor progress, manage tasks, and facilitate communication among team members and stakeholders. Moreover, his proficiency in full-stack development empowers him to comprehend the technical aspects of projects and provide guidance to developers when necessary. He demonstrates expertise in utilizing popular Python frameworks like Django and Flask, along with data analysis and manipulation libraries such as NumPy and Pandas. On the front-end, Ishaan adeptly employs JavaScript libraries like React and Angular to craft visually appealing and user-friendly interfaces. Additionally, he possesses proficiency in HTML, CSS, and JavaScript for designing responsive and mobile-friendly layouts.

Request For Proposal

[contact-form-7 404 "Not Found"]

Ready to innovate ? Let's get in touch

Chat With Us