The code _jquery of the lyric scrolling music player based on jquery

First of all to see the effect of the map, interested friends can refer to the implementation of the Code

The core code looks like this:

$.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 '). After ("<li>" + Data[i].text + "</li>")} var player
= {PlayButton: $ (". Play"), Songtext: $ (". Musictext"), state:0,//0 playback, 1 suspend audio: $ ("#audio"). Get (0), bind:function () {
Bind button//Play or Pause Console.log ($.type (This)) Console.log ($.type (this)) var obj = this;
This.playButton.click (function () {obj.changestate (obj.state 0:1);}); Set sound $ ("#voice"). Click (function (ex) {var percent = (Ex.clientx-$ (this). Offset (). left)/$ (this). width (); obj.setvoic
E (Percent);
});
Default Sound 0.8 Obj.setvoice (1.0);  Mute $ ("#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;}}); Set Progress $ ("#MusicProgress"). Click (function (ex) {var percent = (Ex.clientx- $ (this). Offset (). left)/$ (this). width ();
Obj.setprogress (percent, false);
}); Previous $ ("#prev"). Click (function () {obj.nowindex--; if (Obj.nowindex < 0) Obj.nowindex = obj.list.length-1; obj.plays
ING (obj.nowindex);
}); Next $ ("#next"). Click (function () {obj.nowindex++; if (Obj.nowindex >= obj.list.length) obj.nowindex = 0; obj.playsin
g (Obj.nowindex);
Player.audio.play ();
}); Bind event-Play time change this.audio.ontimeupdate = function () {Obj.timechange ();}//play End this.audio.onended = function () {obj.si
Ngend (); },//Toggle Play State 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 (),}},//Playing play:function () {This.audio.play
(); },//Pause 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);
Current progress shows var Sectip = Secformat (nowsec) + "/" + Secformat (totalsec);
if (sectip.length = = one) $ ("#secTip"). HTML (SECTIP);
This.setprogress (Nowsec/totalsec, true); }, Setvoice:function (percent) {$ ("#voice"). Children (". Bar"). CSS ("width", percent * + "%"), $ ("#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%); return Makeformat (M) + ":" + makefor
Mat (s);
function Makeformat (n) {if (n >=) return n; else {return "0" + N;}}} }
})

Then the code here is alpha0.0.1 version, and has been upgrading ing.

The above is a small set for you to introduce the word based on the jquery scroll music player Code, hope to help everyone, if you have any questions welcome to my message, small series will promptly reply to everyone.