jquery音樂播放器（歌詞滾動版）

時間 2019-11-06

原文原文鏈接

很久沒出來水了！！！忙忙碌碌的找工做~而後中秋節也算過了，祝各位coding們，直接覺醒第七感小宇宙，直接用心就能找到bug-_-//

最後如題這是一篇很正規的coding的文章

大概麼比之前的加了個歌詞，以前的炸了，而後最近又修好了，一直東西在搬家，此次估計不搬家了，大不了美橙在買幾個空間hohocss

效果麼大概一下，花了1個鐘頭快速寫出來的~都說每一個程序猿都有一顆設計獅的心，可是我記得我之前開始碼代碼以前作設計的時候，有一句話你設計不出來不會抄啊，而後我就無恥的盜圖了。23333

頭部不少人說醜，火車和天空，而後麼仍是有點含義的吧！能夠聽下《愛情轉移》有一句歌詞

$.ajax({
    url: "/music/music.txt",
    type: "get",
    success: function(data) {
        data = jQuery.parseJSON(data);
        var length = data.length;
        var now=0;
        for (i = 0; i < length; i++) {
            $("#musicText li").eq(i).after("<li>" + data[i].text + "</li>")
        }
        var player = {
            playButton: $(".play"),
            songText: $(".musicText"),
            state: 0,
            //0播放，1暫停
            audio: $("#audio").get(0),
            bind: function() {
                //綁定按鈕
                //播放或暫停
                console.log($.type(this))
                console.log($.type(this))
                var obj = this;
                this.playButton.click(function() {
                    obj.changeState(obj.state ? 0 : 1);
                });
                //設置聲音
                $("#voice").click(function(ex) {
                    var percent = (ex.clientX - $(this).offset().left) / $(this).width();
                    obj.setVoice(percent);
                });
                //默認聲音 0.8 
                obj.setVoice(1.0);
        
                //靜音
                $("#voiceOP").click(function() {
                    if (obj.muted) {
                        $(this).removeClass("muted");
                        obj.audio.muted = false;
                        obj.muted = false;
                    } else {
                        $(this).addClass("muted");
                        obj.audio.muted = true;
                        obj.muted = true;
                    }
                });
        
                //設置進度
                $("#MusicProgress").click(function(ex) {
                    var percent = (ex.clientX - $(this).offset().left) / $(this).width();
                    obj.setProgress(percent, false);
                });
        
                //上一首
                $("#prev").click(function() {
                    obj.nowIndex--;
                    if (obj.nowIndex < 0) obj.nowIndex = obj.list.length - 1;
                    obj.playSing(obj.nowIndex);
        
                });
        
                //下一首
                $("#next").click(function() {
                    obj.nowIndex++;
                    if (obj.nowIndex >= obj.list.length) obj.nowIndex = 0;
                    obj.playSing(obj.nowIndex);
                    player.audio.play();
                });
        
                //綁定事件 - 播放時間改變
                this.audio.ontimeupdate = function() {
                    obj.timeChange();
                }
                //播放結束
                this.audio.onended = function() {
                    obj.singEnd();
                }
        
            },
            //切換播放狀態
            changeState: function(_state) {
                this.state = _state;
                if (!this.state) {
                    this.playButton.removeClass("pause").addClass("play");
                    this.pause();
                } else {
                    this.playButton.removeClass("play").addClass("pause");
                    this.play();
                }
            },
            //播放
            play: function() {
                this.audio.play();
            },
            //暫停
            pause: function() {
                this.audio.pause();
            },
            timeChange: function() {
                var nowSec = Math.floor(this.audio.currentTime);
                console.log(nowSec)
                console.log(data[now].time)
                if(nowSec>data[now].time){
                    now = now + 1;
                    console.log(now)
                    $("#musicText li").eq(now).addClass("active").siblings("li").removeClass("active");
                    $("#musicText").css("top",-(24*now)+138)
                    
                }
                var totalSec = Math.floor(this.audio.duration);
                //當前進度顯示
                var secTip = secFormat(nowSec) + "/" + secFormat(totalSec);
                if (secTip.length == 11) $("#secTip").html(secTip);
                this.setProgress(nowSec / totalSec, true);
        
            },
            setVoice: function(percent) {
                $("#voice").children(".bar").css("width", percent * 100 + "%");
                $("#voice").children("a").css("left", percent * 100 + "%");
                this.audio.volume = percent;
            },
            setProgress: function(percent, justCss) {
                $("#MusicProgress").children(".bar").css("width", percent * 100 + "%");
                $("#MusicProgress").children("a").css("left", percent * 100 + "%");
        
                if (!justCss) this.audio.currentTime = this.audio.duration * percent;
        
            },
            singEnd: function() {
                if (this.style == 0) {
                    this.nowIndex++;
                    if (this.nowIndex >= this.list.length) this.nowIndex = 0;
                    this.playSing(this.nowIndex);
                } else {
                    var index = Math.floor(Math.random() * (this.list.length + 1)) - 1;
                    index = index < 0 ? 0 : index;
                    index = index >= this.list.length ? (this.list.length - 1) : index;
                    this.playSing(index);
                    this.nowIndex = index;
                }
            },
        };
        
        player.bind();
        function secFormat(num) {
            var m = Math.floor(num / 60);
            var s = Math.floor(num % 60);
            return makeFormat(m) + ":" + makeFormat(s);
            function makeFormat(n) {
                if (n >= 10) return n;
                else {
                    return "0" + n;
                }
            }
        }
 }
})