PIXI Loader & Audio (Howler etc)

[Jonny Shaw]

Hi all
I've just started on my second prototype for a game, only this time I'm wanting to sort out a few more of the core parts to it first.  Audio being the one I'm tackling at the moment.

I have a basic setup atm a loader and a few sprites to test.  Upon finishing the load (including a music mp3 file) it runs a startGame function which then plays the audio track.
I originally tried using the pixi-audio plugin from GitHub, but could not get this one to work at all (does it still work with PixiJsV4?)  so moved onto Howler

Howler does work, and plays the audio file once loaded.  However after trying on my server it seems the loader doesn't fully load the mp3 file before continuing as it starts to play a good 5-10 seconds later after the startGame function has run.  Do mp3 files work the same as any other file with the Pixi loader? or could this be an issue with howler that I have missed?

Thanks for any advice!

 

[themoonrat]

So, how I have this setup is

I call  

PIXI.loaders.Resource.setExtensionLoadType( 'mp3', PIXI.loaders.Resource.LOAD_TYPE.XHR );
PIXI.loaders.Resource.setExtensionXhrType( 'mp3', PIXI.loaders.Resource.XHR_RESPONSE_TYPE.BLOB );

For each audio format I have. I prefer to load data via XHR and as BLOBs because alongside a returned data blob is the size of it; useful info!

Bonus tip 1: Prefer m4a over mp3. Better compression, better sound, better sound loops, same compatibility

Bonus tip 2: Also use ogg, and check browser compatibility for which one to load. You need both to cover all browsers

 

You'll need to create your own bit of 'middleware' to deal with audio. If you see https://github.com/englercj/resource-loader/blob/master/src/middlewares/parsing/blob.js - this comes included by default to handle blobs in certain formats, but it doesn't handle audio. It's very simple to create a new version of that file that works in the same way but just handles audio. You don't need to create a new Audio tag like that creates a new Image tag... all you just need to create an object url using the data blob.

You can use this new parsing functionality into PIXIs loader by doing something like

PIXI.loader.use( handleAudioBlob );

 

Now, put a callback on the loader for when an asset has loaded, and if it's an audio file, it'll already have the blob as a src from your custom middleware... you can use this as a src for a new Howl. After doing doing this, don't assume that it's immediately loaded, there's an audio decoding process that goes on ones a new Howl is created, but you know this is done via a callback 'onload'