JS如何实现网页与手机音乐播放器的歌词同步播放

这篇文章主要介绍了JS如何实现网页与手机音乐播放器的歌词同步播放，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

//获取歌词文本  var txt = document.getElementById("lrc");  var lrc = txt.value;//获取文本域里的值  /*console.log(lrc);*/  var lrcArr = lrc.split("[");//去除[  /*console.log(lrcArr);*/  var html = "";//定义一个空变量保存文本  for(var i=0 ; i<lrcArr.length ; i++)  {    var arr = lrcArr[i].split("]");    /*console.log(arr[1]);*/    var allTime = arr[0].split(".");    var time = allTime[0].split(":");    //获取分钟 秒钟 把时间换算成秒钟    var timer = time[0]*60 + time[1]*1；    var text = arr[1];    if(text)    {      html += "<p id="+timer+">"+text+"</p>"    }    con.innerHTML = html     <pre class="html" name="code">}</pre>  <pre></pre>  <p></p>  <p>实现歌词同步首先要获取到文本框 再配合H5中新增的属性如图 其实很简单啦！</p>  <p></p>  <p><pre class="html" name="code">    //监听音乐播发进度实现歌词同步  myMusic.addEventListener("timeupdate",function(){    //获取当前播放时间    var curTime = parseInt(this.currentTime)；    if(document.getElementById(curTime))    {      for(var i=0 ; i<oP.length ; i++)      {  oP[i].style.cssText = "color:#ccc;font-size:12px;";      }      document.getElementById(curTime).style.cssText="color:rgb(242,110,111);font-size:18px;";      if (oP[num+7].id == curTime)//判断成功一次num++      {  con.style.top = -20*num +"px";  num++;      }    }  });</pre></p>  <pre></pre>

感谢你能够认真阅读完这篇文章，希望小编分享的“JS如何实现网页与手机音乐播放器的歌词同步播放”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!