js解析lrc 实现lrc歌词同步滚动效果

这两天想着做一个h5的网页播放器，实现歌词同步滚动

但是上网找了很多资料，竟发现没有比较完善的代码供参考，但是无意间看到了百度的千千音乐有这样的效果，就想着一定能通过js实现

经过两三天的努力，终于做出了这样的效果

---

实现功能

• 歌词同步滚动
• 同步歌词高亮效果

代码实现

首先，在body中加audio 和 放歌词的ul标签

<div>
	<ul id="lrclist" style="transform: translateY(250px);"><!-- 保证歌词在正中间 -->
		
	</ul>
</div>
<audio id="audio" src="audio/1.mp3" controls="controls" autoplay="true"></audio>

然后就是读取lrc文件，在进行解析，解析出歌词及对应的时间
一般的思路是这样的：通过Ajax或其他方式读取lrc文件
但我的专业是后端开发，js，啥的，都是自学的，于是遇到了不少坑，，在我千方百计想获取lrc文件时，总是报错，，只能通过http，data 协议获取文件，加上我用的是notepad开发的，调试了亿遍都失败

 

 

最后只好放弃了，我把lrc数据直接定义在js中，最后实现了同样的效果，

var lrcJSON = {
						"[00:16.810]":"誰にも言えない孤独を抱えたまま1人で泣いてた",
						"[00:28.040]":"誰にも上手に笑えない僕ら 2人出会って笑った",
						"[00:39.710]":"",
						"[00:40.410]":"真夜中過ぎに 想像の奥に",
						"[00:46.150]":"どうしようもない気持ちをただ押しやって",
						"[00:50.780]":"",
						"[00:51.480]":"サヨナラ 僕らはきっと生まれ変われるから",
						"[00:57.030]":"悲しみに手を振るんでしょう",
						"[01:01.190]":"そしていつか 空っぽのままの心に灯りをともすように",
						"[01:08.630]":"とぎれとぎれの 言葉を探して繋ぎ止めた",
						"[01:14.390]":"それでもたった二人の世界は続いて行くんだ",
						"[01:20.190]":"空に祈るように どうか永遠に",
						"[01:29.380]":"",
						"[01:43.670]":"白・黒・壱・零 僕らは選ぶ事を迫られてばかり",
						"[01:54.940]":"そうして残った大事な物を壊れるほど抱きしめていた",
						"[02:06.670]":"",
						"[02:07.670]":"明け方過ぎの光の先に",
						"[02:13.530]":"ほんの少しだけ未来が見えた気がして",
						"[02:18.110]":"",
						"[02