求助 MP3 lrc歌词同步问题。
下面是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',];
我得到的多个地址是这样的,不知道要怎样才能将这样的地址添加到以下代码中。
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>
...全文
相关推荐
Mp3播放器,支持lrc歌词同步显示
Mp3播放器,支持lrc歌词同步显示。根据播放进度,显示当前歌词,歌词文件要与mp3文件同名。
LRC歌词制作LRC歌词制作
所谓LRC歌词是指与播放的MP3歌曲同步显示的歌词,对于音文秀VT3100还包括与外语语音同步播放的文字。LRC歌词制作实质上是把歌词或文字,与歌曲或语音建立起一种时间对应关系。为叙述方便以下无论是与歌曲同步的歌词还是与外语语音同步的文字都统称为"歌词"。您在制作LRC歌词之前,请首先将光盘的所有文件连同目录结构复制到硬盘上,在硬盘上进入
lrc歌词编码转换
批量转换歌词编码的一个小程序,可以将lrc文件编码在gb2312和uft-8之间切换,方便在车载导航或其他MP3播放器上使用。
LRC歌词同步 MP3歌词解析
这个是用脚本代码写的 分析的很详细 透彻 很有用
mp3播放器(Lrc歌词同步)源程序代码
mp3播放器(Lrc歌词同步)源程序代码


