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

先给大家介绍一下效果图，有兴趣的朋友可以参考一下代码的实现

核心代码如下所示：
$ ajax（{
URL
键入：获取
成功：函数（数据）{
数据jquery.parsejson（数据）；
VaR的长度= data.length；
var现在= 0；
对于（i = 0；i <长度；i ++）{
$（# musictext李），Eq（我），（+数据{我}。文字+ ）
}
var播放器{ {
显示播放按钮：$（打），
美元songtext：（。musictext ），
国家：0，
0回放，1暂停
音频：$（#音频）得到（0），
绑定：函数（）{
绑定按钮
播放或暂停
console.log（美元。型（这））
console.log（美元。型（这））
var obj =这；
This.playButton.click（function（）{（）
obj.changestate（obj.state 0：1）；
}）；
设置声音
$（#声音）。Click（功能（Ex）{
无功率=（ex.clientx至（这）。偏移（）。左）/美元（这）Width（）；
obj.setvoice（百分比）；
}）；
默认的声音 0.8
（1）obj.setvoice；
静音
$（# voiceop）。Click（function（）{）
如果（obj。静音）{
$（这）。RemoveClass（静音）；
obj.audio.muted = false；
obj.muted = false；
{人}
$（这）。AddClass（静音）；
obj.audio.muted =真；
obj.muted =真；
}
}）；
设置/调度
$（# musicprogress）。Click（功能（Ex）{
无功率=（ex.clientx至（这）。偏移（）。左）/美元（这）Width（）；
obj.setprogress（%，假）；
}）；

$（# prev）。Click（function（）{）
obj.nowindex--；
如果（obj.nowindex＜0）obj.nowindex = obj.list.length - 1；
obj.playsing（obj。nowindex）；
}）；
下一首歌曲
$（#下）。Click（function（）{）
nowindex C++对象；
如果（obj.nowindex > =对象列表。长度）obj.nowindex = 0；
obj.playsing（obj。nowindex）；
Player.audio.play（）；
}）；
绑定事件播放时间更改
this.audio.ontimeupdate =函数（）{
Obj.timeChange（）；
}
播放结束
this.audio.onended =函数（）{
Obj.singEnd（）；
}
}，
开关播放状态
改变状态：功能（_state）{
this.state = _state；
如果（！这个状态）{
This.playButton.removeClass（暂停）。AddClass（玩）；
This.pause（）；
{人}
This.playButton.removeClass（玩）。AddClass（暂停）；
This.play（）；
}
}，
播放
播放：函数（）{
This.audio.play（）；
}，
暂停
暂停：函数（）{
This.audio.pause（）；
}，
TimeChange: function () {
无功nowsec = math.floor（这个音频。当前时间）；
console.log（nowsec）
console.log（数据{现在}。时间）
如果（nowsec >数据{现在}，{时间）
现在=现在+ 1；
Console.log (now)
$（# musictext李），Eq（现在），AddClass（主动）。兄弟姐妹（礼），RemoveClass（主动）；
$（# musictext ）Css（上。
}
无功totalsec = math.floor（这个音频。持续时间）；
当前进度/显示
无功sectip = secformat（nowsec）+/+ secformat（totalsec）；
如果（sectip.length = = 11）$（# sectip ）Html（sectip）；
this.setprogress（nowsec / totalsec，真的）；
}，
setvoice：功能（%）{
$（#声音）。儿童（吧）Css（宽。
$（#声音）。儿童（）。Css（左
this.audio.volume = %；
}，
设置任务的进度：功能（%，justcss）{
$（# musicprogress）。儿童（吧）Css（宽。
$（# musicprogress）。儿童（）。Css（左
如果（！justcss）this.audio.currenttime = this.audio.duration×%；
}，
singend：函数（）{
如果（this.style = = 0）{
这nowindex + +；
如果（this.nowindex > =这个列表。长度）this.nowindex = 0；
This.playSing（这个。nowindex）；
{人}
VaR指标= math.floor（Math.random（）*（this.list.length + 1））- 1；
索引=索引00：索引；
指数=指数= this.list.length（this.list.length - 1）：指数；
this.playsing（指数）；
this.nowindex =指数；
}
}，
}；
Player.bind（）；
功能secformat（NUM）{
var m = math.floor（Num / 60）；
var = math.floor（民60）；
返回makeformat（M）+：+ makeformat（S）；
功能makeformat（N）{
如果返回n（n＝10）；
{其他
返回0+ n；
}
}
}
}
}）
那么这里的代码是alpha0.0.1版本，并已升级ing。
以上介绍的是萧边介绍的歌词滚动版音乐播放器基于jQuery代码。希望能对你有所帮助。如果你有任何问题，请给我留言，萧边会及时回复你。