LRC歌词解析

最新推荐文章于 2023-09-26 08:00:19 发布

原创最新推荐文章于 2023-09-26 08:00:19 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

3 篇文章

订阅专栏

本文详细探讨了LRC歌词文件的格式，包括时间戳处理、歌词分段及显示同步的方法。通过解析LRC文件，可以实现音乐播放器中的动态滚动歌词效果，提升用户体验。此外，还介绍了在不同编程语言中解析LRC文件的常见技巧和注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <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>``