求助 MP3 lrc歌词同步问题。

xzf888 2020-08-01 10:06:24
下面是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>
...全文
8313 34 打赏 收藏 转发到动态 举报
写回复
用AI写文章
34 条回复
切换为时间正序
请发表友善的回复…
发表回复
xzf888 2020-08-15
  • 打赏
  • 举报
 回复
引用 33 楼 jio可 的回复:
用的scrollTop好像不能加动画
老师有没有方法可以做到吗？
jio可 2020-08-14
  • 打赏
  • 举报
 回复
用的scrollTop好像不能加动画
jio可 2020-08-13
  • 打赏
  • 举报
 回复 


  // 拖动进度
  audio.addEventListener('play', function () {
    var now = audio.currentTime.toFixed(3)
    if (!Number(now)) {
      lineNo = 0
      return
    }
    for (let i = 0; i < $('li').length; i++) {
      $('li').removeClass('active')
      if (parseFloat($('li').eq(i).attr('t')) > now) {
        lineNo = i - 1
        $('li').eq(lineNo).addClass('active')
        lrcEl.scrollTop($('li').eq(lineNo)[0].offsetTop - 30)
        break
      }
    }
  })


 // 初始化
  function init() {
    // 清空歌词内容
    lrcEl.html('')
    // 下一首重置行号为0
    lineNo = 0
    loadLrc()
    play()
  }


  // 监听是否播放完毕
  audio.addEventListener('ended', function () {
    // 记录下标自增
    curr++;
    if (curr > vLen - 1) {
      curr = 0;
    }
    init()
  });
这里取下标应该减1才对
xzf888 2020-08-13
  • 打赏
  • 举报
 回复
引用 31 楼 jio可 的回复:
[code=javascript] 这里取下标应该减1才对
万分感谢老师耐心指点，问题都解决了，老师呀，现在歌词向上移动时眼睛看的不舒服，如果同步歌词叫它柔和的向上移要修改那些代码，是JS还是css里？望老师再指点下。
jio可 2020-08-12
  • 打赏
  • 举报
 回复 

// 加一行清空歌词
lrcEl.html('')
 newLrcArr.forEach(item => {
      lrcEl.append(`<li t="${item.time}">${item.text}</li>`)
    })
xzf888 2020-08-12
  • 打赏
  • 举报
 回复
引用 29 楼 jio可 的回复:

// 加一行清空歌词
lrcEl.html('')
 newLrcArr.forEach(item => {
      lrcEl.append(`<li t="${item.time}">${item.text}</li>`)
    })
谢谢老师，这个加一行歌词是可以清空，但清空时是这样的，在下一首没有时间标签前歌词还是没有清空，必须要这首歌的时间标签到了才被清空，就是说时间没有走到标签前还是显示着，比如[00:00.38]你是我今生的依靠，必须走到[00:00.38]这时才被清空，这样每换下一首歌看首很不好，老师，要怎样才能在跳转到下一首时就立即清空歌词。 拖动进度条问题也望老师指点，因为在播放时直接点击进度条，歌词同步滚动都要从第一行开始滚动下来，这样就形成了快速滚动歌词到被点击时的时间标签才停下来正常滚动显示，我在看网上他们做的都是进度条点到那歌词同步就直接显示到那里的，这样就好了，希望老师帮助解决。谢谢！
jio可 2020-08-11
  • 打赏
  • 举报
 回复 

  var t = item.substring(item.indexOf('[') + 1, item.indexOf(']'))
        var text = item.substring(item.indexOf(']')+1)
        if (text) {
          newLrcArr.push({time: (t.split(':')[0] * 60 + parseFloat(t.split(':')[1])).toFixed(3), text})
        }
else这里错了
xzf888 2020-08-11
  • 打赏
  • 举报
 回复
引用 27 楼 jio可 的回复:

  var t = item.substring(item.indexOf('[') + 1, item.indexOf(']'))
        var text = item.substring(item.indexOf(']')+1)
        if (text) {
          newLrcArr.push({time: (t.split(':')[0] * 60 + parseFloat(t.split(':')[1])).toFixed(3), text})
        }
else这里错了
谢谢老师，这里替换后正常了，但还有问题就是歌词不能自动连播下去，自动连播下去后，第一首歌词还是显示在页面上，歌词也不同步了，每自动下一首后歌词会累加在页面上，还有就是不能拖动进度条，一拖动歌词就乱了，会乱跳了， 学生我跟本就看不出来问题在那？ 老师点击这里您看一下效果
jio可 2020-08-10
  • 打赏
  • 举报
 回复
这种格式应该是相同歌词循环，做下处理判断一行有多个[ 拆分成2行然后按照时间排序
xzf888 2020-08-10
  • 打赏
  • 举报
 回复
// 加载歌词 function loadLrc() { // 获取对应的歌词url var url = lrcList[curr] // 这里写加载歌词的逻辑，以及加载完成后的歌词显示定时器 $(".txtword").load(url, function() { var lrcArr = $(".txtword").text().split("\n"); lrcArr.forEach(item => { var t = item.substring(item.indexOf("[") + 1, item.indexOf("]")) var lrcText = item.substring(item.indexOf("]") + 1, item.length) //空白歌词不进行加载 if (lrcText) { lrcEl.append(`<li t="${(t.split(":")[0] * 60 + parseFloat(t.split(":")[1])).toFixed(3)}">${lrcText}</li>`) } }) }); } 老师，我把上面代码替换成你给的代码后，时间标签全部显示在页面上来了，而且歌词也不同步了。不知道是不是我这样替换错了，望老师指点。
jio可 2020-08-10
  • 打赏
  • 举报
 回复 

// 加载歌词
function loadLrc() {
  // 获取对应的歌词url
  var url = lrcList[curr]
  // 这里写加载歌词的逻辑，以及加载完成后的歌词显示定时器
  $('.txtword').load(url, function() {
    var lrcArr = $('.txtword').text().split('\n');
    var newLrcArr = []
    // 处理循环歌词
    lrcArr.forEach((item, index) => {
      var item = $.trim(item)
      // 空值不处理
      if (!item) return
      if (item.lastIndexOf('[') > 0) {
        // 获取歌词内容
        var text = item.substring(item.lastIndexOf(']')+1)
        if (text) {
          var timeStr = item.substring(0, item.lastIndexOf(']'))
          var times = timeStr.split(']')
          times.forEach(t => {
            if (t) {
              // 截取[
              var time = t.substring(1)
              time = (time.split(':')[0] * 60 + parseFloat(time.split(':')[1])).toFixed(3)
              newLrcArr.push({time, text})
            }
          })
        }
      } else {
        var t = item.substring(item.indexOf('[') + 1, item.indexOf(']'))
        newLrcArr.push({time: (t.split(':')[0] * 60 + parseFloat(t.split(':')[1])).toFixed(3), text: item})
      }
    })
    // 排序
    newLrcArr.sort((a, b)=> a.time - b.time)
    // console.log(newLrcArr)
    newLrcArr.forEach(item => {
      lrcEl.append(`<li t="${item.time}">${item.text}</li>`)
    })
  })
}
xzf888 2020-08-08
  • 打赏
  • 举报
 回复
感谢老师的耐心指导，已经可以显示同步了，但是在同步时，连播后跳转到第二首时，第一首的歌词还是显示在页面上，不知道是什么原因，还有就是以这种LRC格式歌词不识别？在15楼的代码中单首播放时这个格式能识别，可以正常同步播放。 [02:12.24][00:35.55]时常在想你对我的好 [02:15.77][00:39.02]在谁的身上都找不到 [02:19.23][00:42.62]于是总在心底把它记牢 [02:23.59][00:46.65]当做是你送我的宝 [02:27.20][00:50.80]努力付出不奢求回报 [02:31.21][00:54.45]幸福要用时间来熬 [02:34.96][00:58.36]生活的压力我们一起挑 [02:38.66][01:01.88]只要有你在身边就好 [02:42.54][01:05.84]相信你是我一生的依靠 以下连接是我的试用地址，老师您看下就知道了。 http://xzf1.vps3.mydnns.com/weblrc/lrcplay.asp?MusicID=1&CheckMusicID=1,2,3,4 下面是全部代码文件了 

<!DOCTYPE html> 
<html> 
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9;IE=8;IE=7;IE=6;IE=EDGE">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="Content-language" content="zh-cn">
<style>
.player {margin:0 auto; width:50%;}
  .div_lrc {
    list-style: none;
    height: 443px;
    overflow: hidden;
  }
  .play {
    width: 100%;
  }
  .txtword {
    display: none;
  }
  .player-wrap {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    background: url(images/audiobg.jpg) no-repeat;
    background-size: 100% 100%;
  }

  .player-wrap .div_lrc li {
    height: 35px;
    font-size: 22px;
    font-weight: 400;
    color: #800000;
    line-height: 35px;
    text-align: center;
  }

  .player-wrap .div_lrc li.active {
    color: #0000a0;
    font-size: 30px;
    font-weight: 900;
    transition-duration: 600ms;
  }
  .lianboplay-audio { 
  width:100%;
  height:25px;
  }
</style>
</head>
<%
    dim conn,connstr,db
    db="data\!Your.mplrc.mdb" 
    Set conn = Server.CreateObject("ADODB.Connection")
    connstr="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath(db)
    conn.Open connstr
%>
<%
	nMusicID=request("MusicID")
	MusicID=request("CheckMusicID")
	nowMusicID=Split(MusicID,",")
	MusicNum = UBound(nowMusicID)
	For i=0 To MusicNum
	  	set rss=server.createobject("adodb.recordset")
			sql="select * from Fzwlt_OnceaWeek where MusicID="&nowMusicID(i)&" order by MusicID"
			rss.open sql,conn,1,1
				nowMusicName=rss("MusicName")
				nowTopicName=rss("TopicName")
				nowPlayAddress=rss("PlayAddress")
				nowMusicWord=rss("MusicWord")
				nowAlbumName=rss("AlbumName")
				nowMusicType=rss("MusicType")
	  	set rs=server.createobject("adodb.recordset")
			sql="select PlayServer from Fzwlt_Server where ServerID="&rss("PlayServerID")
			rs.open sql,conn,1,1
	nowPlayServer=rs("PlayServer")
%>
<%
		AudioList = AudioList&"'"&rs("PlayServer")&rss("PlayAddress")&"'," 		'动态播放地址
		mName = mName&"'"&rss("MusicName")&"',"
		nLrcList = nLrcList&"'"&rss("MusicWord")&"',"
	Next
	
	index = 0
	For i=0 To MusicNum
		if nMusicID = nowMusicID(i) then
			index = i
		end if
	Next
%>


<!-- MP3 播放器区代码开始 -->
<div class="player">
<div class="player-wrap">
  <!-- 显示歌词 -->
  <ul class="div_lrc" id="div_lrc"></ul>
</div>
<textarea class="txtword"></textarea>
<audio id="Audio1" class="lianboplay-audio" controlslist="nodownload noremoteplayback" oncontextmenu="return false"
  controls="controls" autoplay="autoplay"></audio>
<div class="play-name"><b>专集：</b><b class="play-bb"><%=nowTopicName%></b> <strong
    style="padding-left:15px;">分集：</strong><strong style="color:#008080;padding-right:15px;"><%=nowAlbumName%></strong>
  <h class="mNametext"></h>
</div>
</div>
<script src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
  // 记录歌词位置
  var lineNo = 0
  var vList = [<%=AudioList%>];
  var nameList = [<%=mName%>];
  vLen = vList.length;
  var curr = [<%=index%>];
  var audio = document.getElementById("Audio1");
  var lrcEl = $('#div_lrc')
  var lrcList = [<%=nLrcList%>]
  // 监听是否播放完毕
  audio.addEventListener('ended', function () {
    // 记录下标自增
    curr++;
    if (curr > vList.length) {
      curr = 0;
    }
    init()
  });
  // 监听歌曲进度
  audio.addEventListener('timeupdate', function () {
    var now = audio.currentTime.toFixed(3)
    var showLi = $('li').eq(lineNo)
    var nextLi = $('li').eq(lineNo + 1)
    if (nextLi) {
      if (now >= parseFloat(nextLi.attr('t'))) {
        showLi.removeClass('active')
        nextLi.addClass('active')
        lineNo++
        if (showLi.prev()) {
          lrcEl.scrollTop(nextLi.prev('li')[0].offsetTop - 30)
        }
      }
      if (parseFloat(showLi.attr('t')) <= now && now <= parseFloat(nextLi.attr('t'))) {
        showLi.addClass('active')
      }
    }
  })
  // 拖动歌曲进度
  audio.addEventListener('play', function () {
    var now = audio.currentTime.toFixed(3)
    if (!Number(now)) {
      lineNo = 0
      return
    }
    for (let i = 0; i < $('li').length; i++) {
      $('li').removeClass('active')
      if ($('li').eq(i).attr('t') > now) {
        lineNo = i - 1
        break
      }
    }
  })
  // 打开页面自动播放
  init();
  // 初始化
  function init() {
    // 下一首重置行号为0
    lineNo = 0
    loadLrc()
    play()
  }
  // 开始播放
  function play() {
    audio.src = vList[curr];
    document.querySelector(".mNametext").innerHTML = "<b>正在播放：</b><h>" + nameList[curr] + "</h>";
    audio.load();
    audio.play();
  }
  // 加载歌词
  function loadLrc() {
    // 获取对应的歌词url
    var url = lrcList[curr]
    // 这里写加载歌词的逻辑，以及加载完成后的歌词显示定时器
    $(".txtword").load(url, function() {
      var lrcArr = $(".txtword").text().split("\n");
      lrcArr.forEach(item => {
        var t = item.substring(item.indexOf("[") + 1, item.indexOf("]"))
        var lrcText = item.substring(item.indexOf("]") + 1, item.length)
        //空白歌词不进行加载
        if (lrcText) {
          lrcEl.append(`<li t="${(t.split(":")[0] * 60 + parseFloat(t.split(":")[1])).toFixed(3)}">${lrcText}</li>`)
        }
      })
    });
  }
</script>


<div class="play-content bk-lrb">
    <table class="line-h200" border="0" cellspacing="0" cellpadding="0">
<tr><td colspan="1"></td></tr>
	<tr></tr><tr>
<%
i=0
  	set rs=server.createobject("adodb.recordset")
		sql="select * from Fzwlt_OnceaWeek where MusicID="&MusicID&""
		if MusicID<>"" then
		sql="select * from Fzwlt_OnceaWeek where MusicID in ("&request("CheckMusicID")&") order by MusicID"
		end if
		if TopicID<>"" then
		sql=sql&" and MusicNO in (select MusicNO from Fzwlt_OnceaWeek where TopicID="&TopicID&")"
		end if
		rs.open sql,conn,1,1
  if rs.eof then

else
do while not rs.eof
%>
<td class="play-pxy">
<!-- 联播列表开始 -->

<table border="0"><tr><td class="play-list w-170" onMouseOver="this.style.background='#FF0';this.style.color='#F60'" onMouseOut="this.style.background='#B0DCF5';this.style.color='#000'">
	<a title="点击播放《<%=rs("MusicName")%>》" href="lrcplay.asp?MusicID=<%=rs("MusicID")%>&CheckMusicID=<%=request("CheckMusicID")%>" target="_top">
<%
if len(trim(rs("MusicName")))>12 then 
   response.write(left(trim(rs("MusicName")),12)&"...") 
   else 
   response.write(trim(rs("MusicName"))) 
end if
%>
	</a></td></tr></table>
<!-- 联播列表结束 -->
</td>
	
<%
i=i+1
if i mod 1=0 and i>=1 then
%>
</tr><tr>
<%
end if
rs.movenext
loop
end if
rs.close
set rs=nothing
%>
</tr>
</table>
	</div>
jio可 2020-08-07
  • 打赏
  • 举报
 回复
把15楼创建歌词那段改成这里的代码就行了，这里做测试歌词是写在页面的。动态生成的是li标签，原来那边是p标签，105-138行直接复制过去。 如果还是用p标签就把选择器的$('li')换成$('p')
jio可 2020-08-07
  • 打赏
  • 举报
 回复 

<style>
  .div_lrc {
    list-style: none;
    height: 443px;
    overflow: auto;
  }
  .play {
    width: 100%;
  }
  .txtword {
    display: none;
  }
  .player-wrap {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    background: url(../images/audiobg.jpg) no-repeat;
    background-size: 100% 100%;
  }

  .player-wrap .div_lrc li {
    height: 35px;
    font-size: 22px;
    font-weight: 400;
    color: #800000;
    line-height: 35px;
    text-align: center;
  }

  .player-wrap .div_lrc li.active {
    color: #0000a0;
    font-size: 30px;
    font-weight: 900;
    transition-duration: 600ms;
  }
</style>
<!-- MP3 播放器区代码开始 -->
<div class="player-wrap">
  <!-- 显示歌词 -->
  <ul class="div_lrc" id="div_lrc"></ul>
</div>
<textarea class="txtword"></textarea>
<audio id="Audio1" class="lianboplay-audio" controlslist="nodownload noremoteplayback" oncontextmenu="return false"
  controls="controls" autoplay="autoplay"></audio>
<div class="play-name"><b>专集：</b><b class="play-bb"><%=nowTopicName%></b> <strong
    style="padding-left:15px;">分集：</strong><strong style="color:#008080;padding-right:15px;"><%=nowAlbumName%></strong>
  <h class="mNametext"></h>
</div>
<script src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
  // 记录歌词位置
  var lineNo = 0
  var vList = [<%=AudioList%>];
  var nameList = [<%=mName%>];
  vLen = vList.length;
  var curr = [<%=index%>];
  var audio = document.getElementById("Audio1");
  var lrcEl = $('#div_lrc')
  var lrcList = [<%=nLrcList%>]
  // 监听是否播放完毕
  audio.addEventListener('ended', function () {
    // 记录下标自增
    curr++;
    if (curr > vList.length) {
      curr = 0;
    }
    init()
  });
  // 监听歌曲进度
  audio.addEventListener('timeupdate', function () {
    var now = audio.currentTime.toFixed(3)
    var showLi = $('li').eq(lineNo)
    var nextLi = $('li').eq(lineNo + 1)
    if (nextLi) {
      if (now >= parseFloat(nextLi.attr('t'))) {
        showLi.removeClass('active')
        nextLi.addClass('active')
        lineNo++
        if (showLi.prev()) {
          lrcEl.scrollTop(nextLi.prev('li')[0].offsetTop - 30)
        }
      }
      if (parseFloat(showLi.attr('t')) <= now && now <= parseFloat(nextLi.attr('t'))) {
        showLi.addClass('active')
      }
    }
  })
  // 拖动歌曲进度
  audio.addEventListener('play', function () {
    var now = audio.currentTime.toFixed(3)
    if (!Number(now)) {
      lineNo = 0
      return
    }
    for (let i = 0; i < $('li').length; i++) {
      $('li').removeClass('active')
      if ($('li').eq(i).attr('t') > now) {
        lineNo = i - 1
        break
      }
    }
  })
  // 打开页面自动播放
  init();
  // 初始化
  function init() {
    // 下一首重置行号为0
    lineNo = 0
    loadLrc()
    play()
  }
  // 开始播放
  function play() {
    audio.src = vList[curr];
    document.querySelector(".mNametext").innerHTML = "<b>正在播放：</b><h>" + nameList[curr] + "</h>";
    audio.load();
    audio.play();
  }
  // 加载歌词
  function loadLrc() {
    // 获取对应的歌词url
    var url = lrcList[curr]
    // 这里写加载歌词的逻辑，以及加载完成后的歌词显示定时器
    $(".txtword").load(url, function() {
      var lrcArr = $(".txtword").text().split("\n");
      lrcArr.forEach(item => {
        var t = item.substring(item.indexOf("[") + 1, item.indexOf("]"))
        var lrcText = item.substring(item.indexOf("]") + 1, item.length)
        //空白歌词不进行加载
        if (lrcText) {
          lrcEl.append(`<li t="${(t.split(":")[0] * 60 + parseFloat(t.split(":")[1])).toFixed(3)}">${lrcText}</li>`)
        }
      })
    });
  }
</script>
xzf888 2020-08-07
  • 打赏
  • 举报
 回复
引用 20 楼 jio可 的回复:
把15楼创建歌词那段改成这里的代码就行了，这里做测试歌词是写在页面的。动态生成的是li标签，原来那边是p标签，105-138行直接复制过去。 如果还是用p标签就把选择器的$('li')换成$('p')
老师，15楼几行到几行是创建歌词的，我看不出来到底是那几行，望老师指点。要么望老师直接把15楼的代码全部修改下，感谢老师了。
xzf888 2020-08-06
  • 打赏
  • 举报
 回复
引用 16 楼 jio可 的回复:
浏览器默认是不允许自动播放的，要浏览器获取焦点以后才能播放。 比如点击一下页面，可以写一个监听docuemnt click执行play 

 document.onclick = function() {
    if (!audio.readyState) {
      init()
    }
  }
老师，现在的问题是lrc歌词不显示，歌词没有任何显示信息，音频歌曲可以自动播放，连续播放也正常。就是说歌词不同步显示。
jio可 2020-08-06
  • 打赏
  • 举报
 回复
浏览器默认是不允许自动播放的，要浏览器获取焦点以后才能播放。 比如点击一下页面，可以写一个监听docuemnt click执行play 

 document.onclick = function() {
    if (!audio.readyState) {
      init()
    }
  }
xzf888 2020-08-06
  • 打赏
  • 举报
 回复
万分感谢老师在百忙之中帮我，可我要的是15楼中的代码中能显示同步歌词，您刚才的不是我想要的。
jio可 2020-08-06
  • 打赏
  • 举报
 回复 

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<audio id="audio" src="http://m10.music.126.net/20200806165048/f72505565f506567e845787883535481/ymusic/03c9/3f47/e891/403f01ebc70bb2077e24b9b37e43dac5.mp3" controls></audio>
<textarea id="lrc_content" style="display:none;">
    [00:00.515] 作曲 : Christopher Chak
    [00:01.339] 作词 : 林夕
    [00:03.243] 编曲 : 陈珀
    [00:05.349]
    [00:25.170] 分手时内疚的你一转脸
    [00:30.255] 为日后不想有甚么牵连
    [00:34.927] 当我工作睡觉
    [00:35.979] 祷告娱乐那么刻意过好每天
    [00:39.718] 谁料你见鬆绑了又愿见面
    [00:44.756]
    [00:45.070] 谁当初想摆脱被围绕左右
    [00:49.822] 过后谁人被遥控于世界尽头
    [00:54.297] 勒到呼吸困难才知变扯线木偶
    [00:59.371] 这根线其实说到底 谁拿捏在手
    [01:05.271]
    [01:05.480] 不聚不散
    [01:06.684] 只等你给另一对手擒获
    [01:10.185] 那时青丝
    [01:11.748] 不会用上馀生来量度
    [01:14.720] 但我拖着躯壳
    [01:16.763] 发现沿途寻找的快乐
    [01:19.713] 仍繫于你肩膊
    [01:21.756] 或是其实在等我捨割
    [01:24.724] 然后断线风筝会直飞天国
    [01:30.297]
    [01:50.307] 这些年望你紧抱他出现
    [01:55.034] 还凭何担心再互相纠缠
    [01:59.784] 给我找个伴侣
    [02:01.036] 找到留下你的足印也可发展
    [02:04.816] 全为你背影逼我步步向前
    [02:09.755]
    [02:09.972] 如一根丝牵引着拾荒之路
    [02:14.759] 结在喉咙内痕痒得似有还无
    [02:19.390] 为你安心我在微笑中想吐未吐
    [02:24.286] 只想你和伴侣要好才顽强病好
    [02:30.118]
    [02:30.361] 不聚不散
    [02:31.667] 只等你给另一对手擒获
    [02:34.987] 以为青丝
    [02:36.758] 不会用上馀生来量度
    [02:39.637] 但我拖着躯壳
    [02:41.783] 发现沿途寻找的快乐
    [02:44.758] 仍繫于你肩膊
    [02:46.810] 或是其实在等我捨割
    [02:49.788] 然后断线风筝会直飞天国
    [02:54.843]
    [02:55.223] 一直不觉
    [02:56.798] 綑绑我的未可扣紧承诺
    [03:00.110] 满头青丝
    [03:01.775] 想到白了仍懒得脱落
    [03:04.714] 被你牵动思觉
    [03:06.786] 最后谁愿缠绕到天国
    [03:09.738] 然后撕裂躯壳欲断难断在
    [03:13.129] 不甘心去捨割
    [03:14.848] 难道爱本身可爱在于束缚
    [03:20.235] 无奈你我牵过手 没绳索
    [03:30.439]
    [03:49.867] 监製：梁荣骏
    [03:50.731] Arranged by 陈珀
    [03:51.511] Produced by 梁荣骏
    [03:52.339] Piano & Programming：陈珀
    [03:53.095] Strings Conducted & Arranged by 陈珀
    [03:53.861] Guitars：Joey Tang
    [03:54.635] Drums：Lawrence Tsui
    [03:55.455] Bass：Ho Chun Kit
    [03:56.271] Backing Vocals：Patrick Lui
    [03:57.108] Digital Editing：Amic Tang
</textarea>

<ul id="text"></ul>
<style>
  .active {
    color: red;
  }
  ul {
    padding: 0;
    margin: 0;
    list-style: none;
    height: 300px;
    overflow: auto;
  }
  ul li {
    line-height: 30px;
  }
</style>
<script>
  var audio = $('#audio')[0],
      lrcEl = $('#text')
  function createLrc() {
    var lrcStr = $('#lrc_content').val()
    var lrcArray = lrcStr.split("\n")
    lrcArray.forEach(item => {
      var t = item.substring(item.indexOf("[") + 1, item.indexOf("]"))
      var lrcText = item.substring(item.indexOf("]") + 1, item.length)
      if (lrcText) {
        lrcEl.append(`<li t="${(t.split(":")[0] * 60 + parseFloat(t.split(":")[1])).toFixed(3)}">${lrcText}</li>`)
      }
    })
  }
  createLrc()

  var lineNo = 0
  audio.addEventListener('timeupdate', function () {
    var now = audio.currentTime.toFixed(3)
    var showLi = $('li').eq(lineNo)
    var nextLi = $('li').eq(lineNo+1)
    if (nextLi) {
      if (now >= parseFloat(nextLi.attr('t'))) {
        showLi.removeClass('active')
        nextLi.addClass('active')
        lineNo++
        if (showLi.prev()) {
          lrcEl.scrollTop(nextLi.prev('li')[0].offsetTop - 30)
        }
      }
      if (parseFloat(showLi.attr('t')) <= now && now <= parseFloat(nextLi.attr('t'))) {
        showLi.addClass('active')
      }
    }
  })
  // 拖动进度
  audio.addEventListener('play', function() {
    var now = audio.currentTime.toFixed(3)
    if (!Number(now)) {
      lineNo = 0
      return
    }
    for(let i = 0; i < $('li').length; i++) {
      $('li').removeClass('active')
      if ($('li').eq(i).attr('t') > now) {
        lineNo = i - 1
        break
      }
    }
  })
</script>
jio可 2020-08-05
  • 打赏
  • 举报
 回复 

<audio id="Audio1" class="lianboplay-audio" controlslist="nodownload noremoteplayback" oncontextmenu="return false"
  controls="controls" autoplay="autoplay"></audio>
<div class="play-name"><b>专集：</b><b class="play-bb"><%=nowTopicName%></b>  <strong
    style="padding-left:15px;">分集：</strong><strong
    style="color:#008080;padding-right:15px;"><%=nowAlbumName%></strong> <h class="mNametext"></h>
</div>
<script type="text/javascript">
  debugger;
  var vList = [ < %= AudioList % > ];
  var nameList = [ < %= mName % > ];
  vLen = vList.length;
  var curr = [ < %= index % > ];
  var video = document.getElementById("Audio1");
  var tmir = null; // 加载歌词定时器

  // ----------------- start
  // 如果vList里面没有歌词的url就写一个获取歌词数据的变量接收数据，如果有删除这里
  var lrcList = [ < %= LrcList % > ]
  // ----------------- end

  // 监听是否播放完毕
  video.addEventListener('ended', function() {
    // 记录下标自增
    curr++;
    if (curr > vList.length) {
      curr = 0;
    }
    loadLrc()
    play()
  });
  // 打开页面自动播放
  play();

  function play() {
    video.src = vList[curr];
    document.querySelector(".mNametext").innerHTML = "<b>正在播放：</b><h>" + nameList[curr] + "</h>";
    video.load();
    video.play();
  }
  // 加载歌词
  function loadLrc(){
    // 获取对应的歌词url
    // ------ 如果歌词url在vList里面
    var url = vList[curr].lrc
    // ------ vList里面没歌词url，读取lrcList对应的url加载歌词
    var url = lrcList[curr]
    // ----------------
    // 这里写加载歌词的逻辑，以及加载完成后的歌词显示定时器
    $("#txtword").load(url, function() {
      var lrcArr = $("#txtword").text().split("\n");
      for (var i = 4; i < lrcArr.length; i++) {
        //空白歌词不进行加载
        if (lrcArr[i].substring(10)) {
          $("#div_lrc").append(`<p>${lrcArr[i].substring(10)}</p>`);
        }
      }
    });
    // 执行歌词显示
    lrcDisplay()
    // 开启歌词滚动显示定时器
    // 如果定时亲存在就清空上一个定时器
    timr && clearInterval(timr)
    timr = setInterval(lrcDisplay, 500);
  }

  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");
      }
    }
  }

  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>
注意看注释 建议歌曲mp3地址和lrc写在一个List里面 [{src: 'xxx.mp3', lrc: 'xxx.lrc'}]
加载更多回复（14）
手机 pdf 阅读器
听MP3时，如果不存在歌词，则会自动下载歌词，并且保存在“系统路径\lrc”下 搜索功能由于服务器端的原因，目前仅完成了浏览器部分，稍后会支持下载，HTML解析部分目前存在一点小BUG，格式偶尔会有问题 [2008.5.31...
求助关于java的setDefaultCloseOperation() 的位置问题!
99LRC歌词 ，但是我查不到相关的内容 上面删代码的时候，傻傻把一些分号删了 然后下面这种情况，就是while (jf.isShowing()) 里要有输出语句（无论输出什么），才会退出程序，如果while (jf.isShowing())里...
从零开发一个iOS企业级项目实战之我的云音乐视频 教程
《从零开发一个iOS企业级项目实战之我的云音乐》这门课程是我们为iOS软件工程师打造的一门项目实战课程，目的是从零开发一个完整的音乐软件，让大家能从中学习到真正的知识，成为行业的高端人才，拥有更好的人生规划...
【ARM 调试】如何从 crash 信息找出问题原因
粉丝在进行 ARM-A 系列软件编程时遇到以下问题，串口打印这段日志后就重启了，粉丝求助问是什么原因？
软考中级网络工程师学习笔记（知识点汇总）普通版
考试科目1：计算机与网络知识 1.计算机系统知识 第二章 数据通信 （1） 数据通信******两个实体间的数据传输和交换。...（4） 模拟、数字数据之间的相互转换问题？ 模拟数据通过编码解码器（CODEC）转...
HTML5

39,084

社区成员

5,548

社区内容

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章