jquery音乐播放器（歌词滚动版）

最新推荐文章于 2022-10-22 13:47:21 发布

weixin_34318326

最新推荐文章于 2022-10-22 13:47:21 发布

阅读量397

点赞数 2

文章标签： javascript ViewUI

好久没出来水了！！！忙忙碌碌的找工作~然后中秋节也算过了，祝各位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;
                }
            }
        }
 }
})