求助 MP3 lrc歌词同步问题。

xzf888 xzf888 墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年,写一次发全网 我也要 + 加入社区
下面是MP3 lrc 歌词同步代码完整的代码,只能单首播放,不能联播,也不能拖进度条,一拖进度条LRC歌词就不同步显示了,只能从开头播放重来了,盼望老师们帮肋我修改下能多首联播和能拖进度条的功能。万分感谢!

我得到的多个地址是这样的,不知道要怎样才能将这样的地址添加到以下代码中。

var mp3List = ['MP3/001.mp3','MP3/002.mp3','MP3/002.mp3',];
var lrcList = ['../lrcword/001.lrc','../lrcword/0002.lrc','../lrcword/0003.lrc',];


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>歌词同步</title>
<style>
.div {margin:0 auto;text-align:center;line-height:16px;}
.pic { background:url("nopic.jpg")center no-repeat;background-size:100% 100%;}
.play { color:#0000a0;font-size:26px;font-weight:999;}
.overPlay { font-size:16px;color:#008080;}
#div_lrc { position:absolute;top:250px;width:100%;transition:top.5s;margin:0 auto;}
.div_DisLrc { overflow:hidden;width:60%;height:500px;line-height:10px;position: relative;margin:0 auto;text-align:center;}
.audio { width:60%;height:25px}
</style>
</head>
<body>
<div class="div">
<p id="txtword" style="display: none;"></p>
<!-- 歌词显示界面 -->
<div class="div_DisLrc pic">
<div id="div_lrc"><p id="lrcword"></p></div>
</div>
<audio class="audio" id="audio" controls="controls" autoplay="autoplay">
<source src="1.mp3" type="audio/mpeg">
</audio>
</div>
<script src="js/jquery.js"></script>
<script>
var audio = document.getElementById("audio");
var play = $("#lrcword");
//将歌词添加到div中
$(document).ready(function () {
//加载歌词
$('#txtword').load("lrcword/001.lrc");
//获取所有歌词
setTimeout(function () {
var lrcArr = $("#txtword").text().split("\n");
for (var i = 4; i < lrcArr.length; i++) {
var p = document.createElement("p");
//空白歌词不进行加载
if (lrcArr[i].substring(10) != "") {
p.innerText = lrcArr[i].substring(10);
$("#div_lrc").append(p);
}
}
}, 200)
})
function lrcDisplay() {
//获取播放进度(转换的格式为: 00:00)
var minute = parseInt(audio.currentTime / 60);//分钟
minute = minute == 0 ? "00" : (minute + "").length < 2 ? "0" + minute : minute;
//获取秒数
var second = (parseInt(audio.currentTime)) % 60;
second = second == 0 ? "00" : (second + "").length < 2 ? "0" + second : second;
//正则表达匹配歌词
var regex = new RegExp('.*\\[' + (minute + ":" + second) + '.+\\].+\n');
var text = regex.exec($("#txtword").text());
if (text != null) {
var str1 = new String($(play).next().text());
var str2 = new String(text[0].substring(10));
if (str1.trim() == str2.trim()) {
//歌词颜色变色
$(play).attr("class", "overPlay");
play = $(play).next();
$(play).attr("class", "play");
//歌词滚动(自动)
var top = parseInt($("#div_lrc").css("top"));
$("#div_lrc").css("top", -1 * ((-1 * top) + 30) + "px");
}
}
}
setInterval(lrcDisplay, 500);

function btn_down() {
var top = parseInt($("#div_lrc").css("top"));
if (top <= 0)
$("#div_lrc").css("top", -1 * ((-1 * top) - 100) + "px");
}
//调整歌词位置的函数
function btn_top() {
var top = parseInt($("#div_lrc").css("top"));
$("#div_lrc").css("top", -1 * ((-1 * top) + 30) + "px");
}
</script>

</body>
</html>
...全文

相关推荐

评论 34
收藏 已收藏
分享
返回顶部
xzf888
HTML5 43,737 成员 5,571 内容