Código para implementar um player de música de rolagem de letras baseado em jQuery

Primeiro, vamos mostrar o efeito gráfico, os amigos interessados podem referenciar o código de implementação

Código principal如下:

$$.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 reprodução,1pausar
audio: $$("#audio").get(0),
bind: function() {
//Linkar botão
//Play/Pause
console.log($.type(this))
console.log($.type(this))
var obj = this;
this.playButton.click(function() {
obj.changeState(obj.state ? 0 : 1);
});
//Definir volume
$$("#voice").click(function(ex) {
var percent = (ex.clientX - $(this).offset().left) / $(this).width();
obj.setVoice(percent);
});
//Voz padrão 0.8 
obj.setVoice(1.0);
//Silenciar
$$("#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;
}
});
//definir progresso
$("#MusicProgress").click(function(ex) {
var percent = (ex.clientX - $(this).offset().left) / $(this).width();
obj.setProgress(percent, false);
});
//música anterior
$("#prev").click(function() {
obj.nowIndex--;
if (obj.nowIndex < 0) obj.nowIndex = obj.list.length - 1;
obj.playSing(obj.nowIndex);
});
//próxima música
$("#next").click(function() {
obj.nowIndex++;
if (obj.nowIndex >= obj.list.length) obj.nowIndex = 0;
obj.playSing(obj.nowIndex);
player.audio.play();
});
//ligar eventos - mudança de tempo de reprodução
this.audio.ontimeupdate = function() {
obj.timeChange();
}
//fim da reprodução
this.audio.onended = function() {
obj.singEnd();
}
,
//mudar estado de reprodução
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();
}
,
//tocar
play: function() {
this.audio.play();
,
//pausar
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);
//当前进度显示
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 lyric scrolling music player 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.

Declaration: The content of this article is from the network, and 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 artificial 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 (when sending an email, please replace # with @ to report, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.)