首页 > 代码库 > jquery音乐播放器(歌词滚动版)

jquery音乐播放器(歌词滚动版)

好久没出来水了!!!忙忙碌碌的找工作~然后中秋节也算过了,祝各位coding们,直接觉醒第七感小宇宙,直接用心就能找到bug-_-//

最后如题这是一篇很正规的coding的文章

大概么比以前的加了个歌词,之前的炸了,然后最近又修好了,一直东西在搬家,这次估计不搬家了,大不了美橙在买几个空间hoho

 

效果么大概一下,花了1个钟头快速写出来的~都说每个程序猿都有一颗设计狮,但是我记得我以前开始码代码之前做设计的时候,有一句话你设计不出来不会抄啊,然后我就无耻的盗图了。23333

 

<iframe src="http://www.skt1.cn" width="100%" height="500"></iframe>

头部很多人说丑,火车和天空,然后么还是有点含义的吧!可以听下《爱情转移》有一句歌词

 

$.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音乐播放器(歌词滚动版)