2023年7月11日发(作者：)

简单的HTML5⾳乐播放器带歌词滚动,基于jQuery实现歌词滚动版⾳乐播放器的代码...先给⼤家看下效果图，感兴趣的朋友可以参考实现代码核⼼代码如下所⽰：$.ajax({url: "/music/",type: "get",success: function(data) {data = SON(data);var length = ;var now=0;for (i = 0; i < length; i++) {$("#musicText li").eq(i).after("" + data[i].text + "")}var player = {playButton: $(".play"),songText: $(".musicText"),state: 0,//0播放，1暂停audio: $("#audio").get(0),bind: function() {//绑定按钮//播放或暂停($.type(this))($.type(this))var obj = this;(function() {State( ? 0 : 1);});//设置声⾳$("#voice").click(function(ex) {var percent = (X - $(this).offset().left) / $(this).width();ce(percent);});//默认声⾳ ce(1.0);//静⾳$("#voiceOP").click(function() {if () {$(this).removeClass("muted"); = false; = false;} else {$(this).addClass("muted"); = true; = true;}});//设置进度$("#MusicProgress").click(function(ex) {var percent = (X - $(this).offset().left) / $(this).width();gress(percent, false);});//上⼀⾸$("#prev").click(function() {ex--;if (ex < 0) ex = - 1;ng(ex);});//下⼀⾸$("#next").click(function() {ex++;if (ex >= ) ex = 0;ng(ex);();});//绑定事件 - 播放时间改变update = function() {ange();}//播放结束d = function() {d();}},//切换播放状态changeState: function(_state) { = _state;if (!) {Class("pause").addClass("play");();} else {Class("play").addClass("pause");();}},//播放play: function() {();},//暂停pause: function() {();},timeChange: function() {var nowSec = (tTime);(nowSec)(data[now].time)if(nowSec>data[now].time){now = now + 1;(now)$("#musicText li").eq(now).addClass("active").siblings("li").removeClass("active");$("#musicText").css("top",-(24*now)+138)}var totalSec = (on);//当前进度显⽰var secTip = secFormat(nowSec) + "/" + secFormat(totalSec);if ( == 11) $("#secTip").html(secTip);gress(nowSec / totalSec, true);},setVoice: function(percent) {$("#voice").children(".bar").css("width", percent * 100 + "%");$("#voice").children("a").css("left", percent * 100 + "%"); = percent;},setProgress: function(percent, justCss) {$("#MusicProgress").children(".bar").css("width", percent * 100 + "%");$("#MusicProgress").children("a").css("left", percent * 100 + "%");if (!justCss) tTime = on * percent;},singEnd: function() {if ( == 0) {ex++;if (ex >= ) ex = 0;ng(ex);} else {var index = (() * ( + 1)) - 1;index = index < 0 ? 0 : index;index = index >= ? ( - 1) : index;ng(index);ex = index;}},};();function secFormat(num) {var m = (num / 60);var s = (num % 60);return makeFormat(m) + ":" + makeFormat(s);function makeFormat(n) {if (n >= 10) return n;else {return "0" + n;}}}}})然后这⾥的代码是alpha0.0.1版的，⼀直在升级ing.以上所述是⼩编给⼤家介绍的基于jQuery实现歌词滚动版⾳乐播放器的代码，希望对⼤家有所帮助，如果⼤家有任何疑问欢迎给我留⾔，⼩编会及时回复⼤家的。