基于jQuery实现歌词滚动版音乐播放器的代码

先给大家看下效果图，感兴趣的朋友可以参考实现代码

核心代码如下所示：

$.Ajax({ URL : '/music/music。txt '，type: 'get '，success : function(data){ data=jquery。parsejson(数据)；定义变量长度=data . length var now=0；for(I=0；一、长度；i ) {$('#musicText li ').方程式(I ).在(‘李’数据[i]之后text '/Li ')} var player={ playbutton : $(' .播放'),歌曲文本： $('。musicText ')，state: 0，//0播放，1暂停audio: $('#audio ').get(0)，bind:函数(){//绑定按钮//播放或暂停console.log($ .键入(this))console.log($ .type(this))var obj=this；这个。播放按钮。单击(function(){ obj。变更状态(obj。国家？0 : 1);});//设置声音$(“# voice”).单击(函数(ex){ var percent=(ex。客户x-$(本)).偏移量()。左)/$(这个)。宽度();obj.setVoice(百分比);});//默认声音0.8 obj。setvoice(1.0)；//静音$(' # VoIop ').单击(function(){ if(obj。静音){ $(this)).removeClass(“”静音');物体。音频。静音=假；obj.muted=false} else {$(this).addClass(')静音');物体。音频。静音=真；obj . muted=true } })；//设置进度$('#MusicProgress ').单击(函数(ex){ var percent=(ex。客户x-$(本)).偏移量()。左)/$(这个)。宽度();obj.setProgress(百分比，假)；});//上一首$('#prev ').单击(function(){ obj。现在索引-；如果。现在索引0)obj。现在索引=obj。名单。长度-1；物体。玩耍。现在索引)；});//下一首$('#next ').单击(function(){ obj。现在索引；如果。现在索引=obj。名单。长度)物体。现在索引=0；物体。玩耍。现在索引)；玩家。音频。play()；});//绑定事件-播放时间改变这个。音频。ontimeupdate=function(){ obj。时间变化()；}//播放结束这个。音频。onended=function(){ obj。singend()；}},//切换播放状态变更状态：函数(_ state){ this。state=_ stateif(！这个。陈述){这个。播放按钮。移除类(“”暂停')。add CLaSS(' play ')；这个。pause()；} else { this。播放按钮。移除类(“播放”).addClass(')暂停');这个。play()；}},//播放play:函数(){这个。音频。play()；},//暂停pause:函数(){这个。音频。pause()；}，timeChange:函数(){ var nowSec=math。地板(这个。音频。当前时间)；控制台。日志(NoWsec)控制台。日志(数据[现在]).时间)if(nowSecdata[now].time){ now=now 1；console.log(现在)$('#musicText li ').eq(现在)。addClass('active ').兄弟姐妹('里').移除CLaSS(' active ')；$('#musicText ').css('top '，-(24 *现在)138)} var total sec=math。地板(这个。音频。持续时间)；//当前进度显示var Secip=SecFORMAT(NoWsec)'/' SecFORMAT(TotalSec)；if(sectionip。长度==11)$(' # sectionip ').html(Secitip)；这个。设置进度(现在秒/总秒，真)；}，setVoice:函数（百分比){ $(“# voice”).孩子们。条')。css('宽度'，百分比* 100% ');$(“# voice”).儿童(' a ').css('左'，百分比* 100% ')；this.audio.volume=百分比；}，设定程序：函数（百分比，justCss) {$('#MusicProgress ').孩子们。条')。css('宽度'，百分比* 100% ');$('#MusicProgress ').儿童(' a ').css('左'，百分比* 100% ')；if(！只是CSS)这个。音频。当前时间=这个。音频。持续时间*百分比；}，singEnd:函数(){ if(this。style==0){ this。现在索引；如果(这个。现在索引=这个。名单。长度)这个。现在索引=0；这个。播放(这个。现在索引)；} else { var index=math。地板(数学。random()*(这个。名单。长度1))-1；索引=索引0?0 :指数；index=index=this.list.length？(this.list.length - 1) :索引；this.playSing(索引);this.nowIndex=index}}，}；玩家。bind()；函数secFormat(num){ var m=math。楼层(num/60)；var s=数学。地板(数量% 60)；返回make format(m)' : ' make format(s)；函数makeFormat(n) {if (n=10)返回n；else { return ' 0 ' n；}}}}})然后这里的代码是alpha0.0.1版的，一直在升级ing .

以上所述是小编给大家介绍的基于jQuery实现歌词滚动版音乐播放器的代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的。