Código para implementar un reproductor de música con deslizamiento de letras basado en jQuery

Primero, muestro el efecto gráfico, los amigos interesados pueden referirse al código de implementación

Código principal como se muestra a continuación:

$.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 reproducción,1pausar
audio: $("#audio").get(0),
bind: function() {
//Asociar botón
//Reproducir o pausar
console.log($.type(this))
console.log($.type(this))
var obj = this;
this.playButton.click(function() {
obj.changeState(obj.state ? 0 : 1);
});
//Configurar voz
$("#voice").click(function(ex) {
var percent = (ex.clientX - $(this).offset().left) / $(this).width();
obj.setVoice(percent);
});
//Voz predeterminada 0.8 
obj.setVoice(1.0);
//Silencio
$("#voiceOP").click(function() {
if (obj.muted) {
$.removeClass("muted");
obj.audio.muted = false;
obj.muted = false;
} else {
$(this).addClass("muted");
obj.audio.muted = true;
obj.muted = true;
}
});
//establecer progreso
$("#MusicProgress").click(function(ex) {
var percent = (ex.clientX - $(this).offset().left) / $(this).width();
obj.setProgress(percent, false);
});
//canción anterior
$("#prev").click(function() {
obj.nowIndex--;
if (obj.nowIndex < 0) obj.nowIndex = obj.list.length - 1;
obj.playSing(obj.nowIndex);
});
//siguiente canción
$("#next").click(function() {
obj.nowIndex++;
if (obj.nowIndex >= obj.list.length) obj.nowIndex = 0;
obj.playSing(obj.nowIndex);
player.audio.play();
});
//vincular eventos - cambio de tiempo de reproducción
this.audio.ontimeupdate = function() {
obj.timeChange();
}
//finalización de reproducción
this.audio.onended = function() {
obj.singEnd();
}
},
//cambiar estado de reproducción
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();
}
},
//reproducir
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);
//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;
}
}
}
}
)

Luego el código aquí es alpha0.0.1La versión actual está en actualización.

Los códigos de reproducción de reproductores de música de deslizamiento de letras basados en jQuery que he presentado al editor son para ayudar a todos, si tienen alguna pregunta, déjenme un mensaje y responderé a tiempo.

Declaración: El contenido de este artículo se ha obtenido de la red, es propiedad del autor original, el contenido se ha subido por los usuarios de Internet de manera voluntaria y autónoma, este sitio no posee los derechos de propiedad, no se ha realizado un procesamiento editorial manual y no asume ninguna responsabilidad legal relevante. Si encuentra contenido sospechoso de copyright, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @) para denunciar, y proporcione evidencia relevante. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.