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();})
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.