pixi-audio is a plugin for Pixi.js v3.0.8 or higher to add Audio support using the pixi resource-loader. This plugin use WebAudio by default , and fallbacks to HTMLAudio if it's needed.

npm install pixi-audio

if you use Browserify or Webpack you can use pixi-audio like this:

var PIXI = require('pixi');
var audio = require('pixi-audio'); //pixi-audio is added automatically to the PIXI namespace

Just add pixi-audio.js under pixi.js in your HTML file.

To load audio files you need to use the resource-loader built in pixi.

PIXI.loader.add([
  {name:"AwesomeMusic", url:"./assets/AwesomeMusic.ogg"}
]).load(function(){
  var awesomeMusic = PIXI.audioManager.getAudio('AwesomeMusic');
  awesomeMusic.play();
});

This lib support mp3, ogg, wav and m4a formats. Unfortunately all browsers doesn't support all this Audio formats, to solve this you can pass as an array some urls with different formats for the same file. So, the loader can load the correct format depending of the browser:

var files = ["./assets/AwesomeMusic.ogg", "./assets/AwesomeMusic.mp3"];

PIXI.loader.add([
  {name:"AwesomeMusic", url: files}
]).load(function(){
  var awesomeMusic = PIXI.audioManager.getAudio('AwesomeMusic');
  awesomeMusic.play();
});

In the above example, the audio loaded in chrome will be the ogg and in safari will be the mp3. But, you don't need care about this, just need to call getAudio using the audio name as param.

This plugin add a new namespace named audio to the PIXI namespace. This namespace has some audio utils under the name utils, the audioParser for the resource-loader, and two new classes: Audio and AudioManager. Also, an instance of AudioManager is added to PIXI with the audioManager name. So, you don't need do anything, just use PIXI.audioManager if you want.

It's important to know when you call PIXI.audioManager.getAudio('myAudio') a new instance is created, so if you try again to get the same audio, it will be the same sound, but in a different instance.

The Audio class extends from PIXI.utils.EventEmitter, and emit some events: play, stop, end, pause and resume. This events name are so clear about what they doing. More info: Node.js Events

Listening the basic events

var myAudio = PIXI.audioManager.getAudio('myAudio');
myAudio.on('start', function(){ console.log('Start!!'); });
myAudio.on('end', function(){ console.log('End!!'); });

myAudio.play();

Adding custom categories to our audios.

var myFX = PIXI.audioManager.getAudio('myAudio1');
myFX.fx = true;
var myFX2 = PIXI.audioManager.getAudio('myAudio2');
myFX2.fx = true;

//filter
var myFXAudios = PIXI.audioManager.filterAudios('fx');
for(var i = 0; i < myFXAudios.length; i++)myFXAudios[i].stop();

The constructor #### .getAudio( name ) Return a new instance of your sound (previously loaded). #### .removeAudio( audio ) Remove the audio (instance) from the .sounds array.

Return an array with all the audios matched with the tag and value passed.

Mute all the sounds in the sounds array.

Unmute all the sounds in the sounds array.

Pause all the sounds in the sounds array.

Resume all the sounds paused in the sounds array.

The constructor, usually you don't create an Audio, just call audioManager.getAudio(name).

The AudioManager instance who manage this audio.

The audio source

Read only, it's the state of this sound.

Set true to pause the sound and false to resume.

Set true if you want to play the sound in a loop.

The sound volume.

Set true if you want to mute the sound, or false if you want unmute.

Start playing the audio.

Stop playing the audio.

Remove this audio instance from the AudioManager