HTML随音乐播放时间自动歌词,JavaScript实时监听歌曲播放进度显示对应歌词

前言

在之前我就想试试在线的音乐播放器的制作，昨晚动手实现了播放音乐的歌词实时对应显示的组件，下面就来看看其中的解析原理。

正文

这里我以李玉刚的《刚好遇见你》为例，首先我们需要获取到音频文件以及歌词的lrc内容，lrc歌词文件内容如下：

"[00:00.00] 作曲 : 高进\n[00:01.00] 作词 : 高进\n[00:12.56]我们哭了\n[00:15.27]我们笑着\n[00:18.60]我们抬头望天空\n[00:21.43]星星还亮着几颗\n[00:24.63]我们唱着\n[00:27.56]时间的歌\n[00:30.62]才懂得相互拥抱\n[00:34.00]到底是为了什么\n[00:36.94]因为我刚好遇见你\n[00:40.32]留下足迹才美丽\n[00:43.69]风吹花落泪如雨\n[00:46.48]因为不想分离\n[00:49.57]因为刚好遇见你\n[00:52.59]留下十年的期许\n[00:55.69]如果再相遇\n[00:59.15]我想我会记得你\n[01:14.28]我们哭了\n[01:16.88]我们笑着\n[01:20.29]我们抬头望天空\n[01:22.96]星星还亮着几颗\n[01:26.11]我们唱着\n[01:29.11]时间的歌\n[01:32.56]才懂得相互拥抱\n[01:35.36]到底是为了什么\n[01:38.47]因为我刚好遇见你\n[01:41.84]留下足迹才美丽\n[01:44.83]风吹花落泪如雨\n[01:47.97]因为不想分离\n[01:51.02]因为刚好遇见你\n[01:54.09]留下十年的期许\n[01:57.23]如果再相遇\n[02:00.69]我想我会记得你\n[02:03.69]因为刚好遇见你\n[02:06.43]留下足迹才美丽\n[02:09.57]风吹花落泪如雨\n[02:12.64]因为不想分离\n[02:15.76]因为刚好遇见你\n[02:18.78]留下十年的期许\n[02:21.83]如果再相遇\n[02:24.98]我想我会记得你\n