how to work with howlerjs ?

[dc-me]

I think there is a way for third party loader to work with resource-loader , but I don't know how to do it , maybe could someone tell me how to make howlerjs work with resource loader as a start point ?

[englercj]

You can load the audio with this module, which will give you an <audio/> element back. You might be able to pass that into howlerjs?

You can also load it via XHR as a blob for use in Web Audio API. You might be able to pass that blob into howlerjs?

hint: I know nothing about howlerjs.

[dc-me]

well howlerjs is support url and base64 url , I can use loaded resource to convert to that , but there have decode time , that are not included , in howlerjs it's loaded fires when the sound is loaded and ready to use , and also I load .mp3 file it's not give me an audio element , it's give me text , and the resource object's isAudio is false , is there something went wrong ?

[dc-me]

here's the code I used

PIXI.loader.add([ 'assets/audio/sound.mp3', 'assets/images/sprite-com.png', 'assets/images/sprite-p-two.png', 'assets/images/broken.gif', 'assets/images/sprite-p-three.png', 'assets/images/sprite-p-four.png', 'assets/images/sprite-p-five.png', 'assets/images/sprite-brush-face.png', ]) .on('progress',function(loader, resources){ var $pageOne = Zepto('.page.one'); $pageOne.find('.percent').text(loader.progress + '%'); $pageOne.find('.progress-bar').width(loader.progress + '%'); }) .load(function(loader, resources){ changePage('.page.one', '.page.two', pageTwoProcess); });

[englercj]

You need to tell the library it is audio it needs to load:

PIXI.loader.add([
            { url: 'assets/audio/sound.mp3', loadType: PIXI.loaders.Resource.LOAD_TYPE.AUDIO },
            'assets/images/sprite-com.png',
            'assets/images/sprite-p-two.png',
            'assets/images/broken.gif',
            'assets/images/sprite-p-three.png',
            'assets/images/sprite-p-four.png',
            'assets/images/sprite-p-five.png',
            'assets/images/sprite-brush-face.png',
        ])
        .on('progress',function(loader, resources){
            var $pageOne = Zepto('.page.one');
            $pageOne.find('.percent').text(loader.progress + '%');
            $pageOne.find('.progress-bar').width(loader.progress + '%');
        })
        .load(function(loader, resources){
            changePage('.page.one', '.page.two', pageTwoProcess);
        });

I don't have any audio types in the built-in type detection right now, only image extensions:

https://github.com/englercj/resource-loader/blob/master/src/Resource.js#L719-L729

Feel free to put in a PR and add some.

[dc-me]

@englercj resource loader is a very well structured lib after I read the source code , I have a proposal , see if after load the resource I nedd do some process like audio it's need decode and it's async , so we could use the resource complete event callback , then in that function tell the Loader.prototype._onLoad that the source are really good to go . then change the progress bar , currently the Resource load callback fires when afterMiddleware event, so it's just need to do some tiny change to make the callback to control if it's all set . I could put a PR if you like , thanks !

[englercj]

I'm honestly not sure what you mean that was pretty difficult to read...