【cocos creator】【TS】音乐播放器，拖拽音乐进度，暂停，继续，循环播放

// Learn TypeScript:
//  - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
//  - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html

const { ccclass, property } = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    @property(cc.AudioSource)
    music: cc.AudioSource = null;
    @property(cc.Slider)
    Slider: cc.Slider = null;
    @property(cc.Label)
    timeLabel: cc.Label = null;
    @property(cc.Sprite)
    pushBtn: cc.Sprite = null;
    @property(cc.Integer)
    playOverState: number = 0;

    playState: boolean = false;
    AllTime: number = 0;
    // LIFE-CYCLE CALLBACKS:

    onLoad() {
    }

    start() {
        //读取音乐时长
        this.AllTime = this.music.getDuration();
        this.music.play();
        this.setPlayState(false);
    }

    //滑动回调
    slider() {
        this.music.setCurrentTime(this.Slider.progress * this.AllTime);
    }

    update(dt) {
        this.setPlayProgress();
    }

    //根据音乐播放设置进度条的进度
    setPlayProgress() {
        if (!this.AllTime) return;
        let nowPlayTime = this.music.getCurrentTime();
        let allTime = this.AllTime;
        this.Slider.progress = nowPlayTime / allTime;
        //cc.log(this.music.getCurrentTime());
        this.timeLabel.string = this.setTimeLabel(nowPlayTime, allTime);

        //cc.log(nowPlayTime, this.AllTime);
        //音乐播放完
        if (nowPlayTime >= this.AllTime - 0.02) {
            this.PlayOverBack();
        }
    }

    //播放完后回调
    PlayOverBack() {
        if (this.playOverState === 1) {
            this.music.loop = false;
            this.setPlayState(false);
        }
        else if (this.playOverState === 0) {
            this.music.loop = true;
        }
    }

    //设置显示进度时间
    setTimeLabel(nowPlayTime, allTime) {
        let nowPlayTime1 = this.getClockTime(nowPlayTime);
        let allTime1 = this.getClockTime(allTime);
        return nowPlayTime1 + "/" + allTime1;
    }


    push() {
        if (this.playState) {
            this.playState = false;
        }
        else {
            this.playState = true;
        }
        this.setPlayState(this.playState);
    }

    setPlayState(play) {
        if (play) {
            if (this.music.getCurrentTime() === 0) {
                this.music.play();
            }
            else {
                this.music.resume();
            }
            this.loadPic("1", (res) => {
                this.pushBtn.spriteFrame = res;
            })
        }
        else {
            this.music.pause();
            this.loadPic("2", (res) => {
                this.pushBtn.spriteFrame = res;
            })
        }
    }

    //加载resources文件夹下的图片
    loadPic(url: string, cb: (res: cc.SpriteFrame) => void) {
        cc.loader.loadRes(url, cc.SpriteFrame, (err, spriteFrame) => {
            if (err) {
                cc.log(err);
                return cb(null);
            }
            cb(spriteFrame);
        })
    }
    //加载resources/music文件夹下的音乐
    loadMusic(url: string, cb: (res: cc.SpriteFrame) => void) {
        cc.loader.loadRes(url, cc.SpriteFrame, (err, spriteFrame) => {
            if (err) {
                cc.log(err);
                return cb(null);
            }
            cb(spriteFrame);
        })
    }

    //输入秒数转为时间显示 80=>1：20
    getClockTime(time) {
        let str = "";
        if (Math.floor(time / 3600) > 0) {
            str += Math.floor(time / 3600) + ":";
        }
        if (Math.floor(time % 3600 / 60) < 10) {
            str += "0" + Math.floor(time % 3600 / 60) + ":";
        }
        else {
            str += Math.floor(time % 3600 / 60) + ":";
        }
        if (Math.floor(time % 60) > 0) {
            if (Math.floor(time % 60) < 10) {
                str += "0" + Math.floor(time % 60);
            }
            else {
                str += Math.floor(time % 60);
            }
        }
        else {
            str += "00";
        }
        return str;
    }
}