Comments (6)
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.
from resource-loader.
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 ?
from resource-loader.
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);
});
from resource-loader.
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.
from resource-loader.
@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 !
from resource-loader.
I'm honestly not sure what you mean that was pretty difficult to read...
from resource-loader.
Related Issues (20)
- Missing documentation? HOT 3
- ESM module & TS typings HOT 1
- Question re. handling errors on sub-resources in custom middleware HOT 4
- Version 3.0.0 is not transpiled
- Chrome Mobile Incognito Error HOT 1
- Best way to add new resource types and loading strategies? HOT 5
- Adding an asset more than once HOT 3
- Pixi resource-loader - add timeout to XHR request HOT 1
- may i load plist file from texturepacker? HOT 2
- Feature request: Font loading via CSS Font Loading API HOT 4
- Reload failed resources HOT 1
- Resource type as generic HOT 4
- Use resource-loader in a test (jest) context HOT 2
- Firefox fails to fire progress event without preload attribute HOT 3
- how to load from atlas from different sources, image one url json other? HOT 4
- Question Load SVG inline HOT 5
- How to check for video progress? HOT 3
- Pixi Loader use multiple times error HOT 1
- ResourceLoader.add(...) does not operate like a queue HOT 4
- parse-uri breaks ES5 support HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from resource-loader.