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

標籤：

好久沒出來水了！！！忙忙碌碌的找工作~然後中秋節也算過了，祝各位coding們，直接覺醒第七感小宇宙，直接用心就能找到bug-_-//最後如題這是一篇很正規的coding的文章

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

 效果麼大概一下，花了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;                }            }        } }})

 

然後這裡的代碼是alpha0.0.1版的，一直在升級ing

 

繼續改bug了，直接網站原始碼就可以查看~

 

最後大神看到別打臉，別攻擊我T_T，別留hacker~email了。。這個月我還原了N次了...實在不高興這麼個玩意還裝安全狗之類的

 

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