欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

LRC歌词解析

程序员文章站 2022-06-21 15:05:37
...
 <body>
    <div class="lrc"></div>
    <progress class="audioprogress" ></progress>
 </body>
 <script>
 function parseLRC(filePath,callback){
   var lrcObj={};
   var request=new XMLHttpRequest();
   request.open("GET",filePath)
   request.send()
   request.onload=function(){
    var lrcString=this.response;
        var regExp=/\[(\d{2}):(\d{2})\.(\d{2})\](.*)/g;
        while(1){
             var result=regExp.exec(lrcString)
             if (result) {
                var time= parseInt(result[1])*60+parseInt(result[2]);
                    lrcObj[time]=result[4];
             } else{
            break;
                }
             }
   }
return lrcObj;
 }
function init(){
  var lrcObj=parseLRC("丑八怪.lrc");
  var audio=document.createElement("audio")
  audio.src="../薛之谦-丑八怪.mp3"
  audio.autoplay=true;
  audio.controls=true;
  document.body.appendChild(audio)

var audiopro=document.querySelector(".audioprogress")
audio.oncanplay=function(){//获取歌曲总时长
    console.log(this.duration);
    audiopro.max=this.duration
}
audio.ontimeupdate=function(){//此时数据加载完成
     audiopro.value=this.currentTime
     document.querySelector(".lrc").innerHTML=lrcObj[parseInt(this.currentTime)]?lrcObj[parseInt
         (this.currentTime)]:document.querySelector(".lrc").inn   erHTML;
     }
    }
init()
<script>``

上一篇： 小米平板5如何开启深色模式?小米平板5开启深色模式教程

下一篇： 小米平板5如何调节屏幕刷新率?小米平板5调节屏幕刷新率教程

推荐阅读