Code for Lyrics Scrolling Music Player Implemented Based on jQuery

First, let's take a look at the effect diagram, friends who are interested can refer to the implementation code

Core code as follows:

$.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,1Pause
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.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;
}
});
//Set progress
$("#MusicProgress").click(function(ex) {
var percent = (ex.clientX - $(this).offset().left) / $(this).width();
obj.setProgress(percent, false);
});
//Previous song
$("#prev").click(function() {
obj.nowIndex--;
if (obj.nowIndex < 0) obj.nowIndex = obj.list.length - 1;
obj.playSing(obj.nowIndex);
});
//Next song
$("#next").click(function() {
obj.nowIndex++;
if (obj.nowIndex >= obj.list.length) obj.nowIndex = 0;
obj.playSing(obj.nowIndex);
player.audio.play();
});
//Event binding - Playback time changed
this.audio.ontimeupdate = function() {
obj.timeChange();
}
//Playback ended
this.audio.onended = function() {
obj.singEnd();
}
,
//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();
}
,
//Play
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 display
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 &63; 0 : index;
index = index >= this.list.length &63; (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 alpha0.0.1Version, always upgrading.

The code for the music player with lyrics scrolling implemented based on jQuery introduced by the editor above is for everyone's reference. I hope it will be helpful to everyone. If you have any questions, please leave me a message, and the editor will reply to everyone in time.

Statement: The content of this article is from the network, the copyright belongs to the original author, the content is contributed and uploaded by Internet users spontaneously, this website does not own the copyright, does not undergo manual editing, and does not assume relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report infringement, and provide relevant evidence. Once verified, this site will immediately delete the suspected infringing content.)