这两天想着做一个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