html5 - preloadjs读取audioSprite的json文件问题
本文介绍了html5 - preloadjs读取audioSprite的json文件问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
看soundjs的文档的时候发现可以用audioSprite来减少请求,而后使用了gulp-audiosprite生成了雪碧音及其json文件,并且想用preloadjs进行预加载(因为还有其他文件需要用到preloadjs所以一并使用了),但是实际使用发现没有加载成功。用谷歌调试工具查看network标签,发现sound.mp3并没有进行加载,只加载了sound.json。
应该如何正确地加载?
//index.js
var loadQueue = new createjs.LoadQueue();
loadQueue.installPlugin(createjs.Sound);
loadQueue.loadManifest('sound.json');
loadQueue.on('complete',function(){
var keyboard = createjs.Sound.createInstance('keyboard');
keyboard.play();
});
//sound.json
{
"src": "./src/music/sound.mp3",
"data": {
"audioSprite": [
{
"id": "keyboard",
"startTime": 0,
"duration": 215.98639455782313
},
{
"id": "eletric",
"startTime": 2000,
"duration": 1044.8979591836735
}
]
}
}
解决方案
结帖了,最后是采取了先加载json,然后再进行一次加载解决的。
关键代码部分:
var soundQueue = new createjs.LoadQueue,se = {};
soundQueue.loadManifest('sound.json');
soundQueue.on('fileload',function (e) {
var sound = [e.result];
createjs.Sound.registerSounds(sound);
createjs.Sound.on('fileload',function (e) {
var soundArray = e.data.audioSprite;
for(var i in soundArray){
se[soundArray[i].id] = createjs.Sound.createInstance(soundArray[i].id);
}
})
});
json文件格式:
{
"src": "./src/music/sound.mp3",
"data": {
"audioSprite": [
{
"id": "keyboard2",
"startTime": 0,
"duration": 215.98639455782313
}
]
}
}
因为很久没有动过相关的文件了,可能会出现个别小问题,见谅
这篇关于html5 - preloadjs读取audioSprite的json文件问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文