import zim from "https://zimjs.org/cdn/016/zim";
new Frame(FIT, 1024, 768, blue, darker, ready);
function ready(F, S, W, H) {
var soundSprite = {
src:
"https://s3-us-west-2.amazonaws.com/s.cdpn.io/103682/fx_mixdown.ogg",
audioSprite: [
["A", 1, 2],
["B", 3, 3.5],
["C", 4, 7.2],
["D", 8, 8.5],
["E", 9, 9.2],
["F", 10, 11],
["G", 12, 16.5],
["H", 17, 18],
["I", 19, 19.3]
]
};
var audioIns = null;var count=0
var numBtn=new Button({label:"",width:100}).addTo()
var sBtn = new Button({ label: "load soundsprite",width:300,toggle:true,backgroundColor:green,toggleBackgroundColor:red }).center().tap(tapFun); //end tap
function tapFun(evt){
if(evt.target.toggled){
evt.target.text='play'
}else{
evt.target.text='go load'
}
interval(2, intervalFun);
}
function intervalFun(evt) {
count=evt.count
numBtn.text=count
var preLoader = F.loadAssets(soundSprite);
preLoader.on("complete",function(){
if(sBtn.toggled)loadComplete1()
if(!sBtn.toggled)loadComplete2()
});
}
function loadComplete1(evt) {
new Label({text:`loop load soundSprite loadCompleted--${count}`}).pos(0,0,'center','bottom').bot().animate({props:{y:count*40},time:2})
if(audioIns)audioIns.stop()
}
function loadComplete2(evt) {
count=0
new Label({text:`once play the sound\n can't load soundSprite again--${count}`,color:red,bold:true,size:60,align:'center'}).pos(0,0,'center','bottom').animate({props:{y:600},time:2})
audioIns = asset("A").play();
}
Ticker.add(function(){S.update();})
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.