Jquery music player (rolling version of lyrics) and jquery music player

Jquery music player (rolling version of lyrics) and jquery music player
It's been a long time before coming in !!! Busy looking for a job ~ After the Mid-Autumn Festival, I wish you all the coding staff can wake up and find the bug-_-//. Finally, this is a very formal article on coding.

Probably I added a lyrics to my previous project. I had to blow it up before, and recently finished it again. I have been moving things. I don't think I will move it this time. It's a big deal. Jack orange is buying a few space hoho.

What about the effect? It took me an hour to write it quickly ~ It is said that every programmer has a design lion's heart, but I remember when I did design before I started code, there was a saying that you couldn't design it and won't copy it, then I would be shameless about stealing images. 23333

 

Many people in the head say ugly, train and sky, and then it still has some meaning! You can hear the lyrics of love transfer.

 

$. 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 play, 1 pause audio: $ (" # audio "). get (0), bind: function () {// bind button // play or pause the console. log ($. ty Pe (this) console. log ($. type (this) var obj = this; this. playButton. click (function () {obj. changeState (obj. state? 0: 1) ;}); // set the sound $ ("# voice "). click (function (ex) {var percent = (ex. clientX-$ (this ). offset (). left)/$ (this ). width (); obj. setVoice (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 ;}}); // sets the 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. playSing (obj. nowIndex) ;}); // next $ ("# next "). click (function () {obj. nowIndex ++; if (obj. nowIndex> = obj. list. length) obj. nowIndex = 0; obj. PlaySing (obj. nowIndex); player. audio. play () ;}); // bind event-change the playing time to this. audio. ontimeupdate = function () {obj. timeChange ();} // end this. audio. onended = function () {obj. singEnd () ;}}, // switch the playing status 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); // The current progress shows var secTip = secFormat (nowSec) + "/" + secFormat (totalSec); if (secTip. length = 11) $ ("# secTip" ).html (secTip); this. setProgress (nowSec/totalSec, true) ;}, setVoice: function (Percent) {$ ("# voice "). children (". bar "pai.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 ;}}}}})

 

Then, the code here is for alpha0.0.1 and is being upgraded to ing.

 

Continue to modify the bug. You can view the source code of the website ~

 

In the end, do not attack me T_T. Do not leave a hacker ~ Email .. I restored it N times this month... I'm not so happy to have such a thing as a safe dog.