歌词滚动效果，ppt歌词滚动同步

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

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

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

实现功能 歌词同步滚动同步歌词高亮效果代码实现

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

然后就是读取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:18.810]\”:\”バカげた夢だってきっと願い続けるから\”,\”[02:24.330]\”:\”奇跡に近づくんでしょう\”,\”[02:28.590]\”:\”それは君の弱さの隣に見つけた強さの欠片だって\”,\”[02:36.160]\”:\”とぎれとぎれの 言葉を探して繋ぎ止めた\”,\”[02:41.700]\”:\”瞼の奥に滲んだ世界を守ってゆくんだ\”,\”[02:47.470]\”:\”空に祈るように 君と誓う明日\”,\”[02:58.720]\”:\”\”,\”[03:08.900]\”:\”不自由な思いが重なり合ったら\”,\”[03:14.390]\”:\”そうさ誰より自由になれた\”,\”[03:20.390]\”:\”足りないものを埋め合うように\”,\”[03:25.700]\”:\”疑いもせず 支えあいながら\”,\”[03:31.610]\”:\”\”,\”[03:34.060]\”:\”サヨナラ 僕らはきっと生まれ変われるから\”,\”[03:39.490]\”:\”悲しみに手を振るんでしょう\”,\”[03:44.450]\”:\”そしていつか 空っぽのままの心に灯りをともすように\”,\”[03:51.620]\”:\”とぎれとぎれの 言葉を探して繋ぎ止めた\”,\”[03:57.190]\”:\”それでもたった二人の世界は続いて行くんだ\”,\”[04:03.000]\”:\”空に祈るように どうか永遠に…\”};

（有需要的可以仿照网上的Ajax获取lrc文件，再进行解析）

（不过lrc歌词文件可没有那么简单，开头可能还有歌名，歌手等信息，后边可能还有歌词对应的翻译。这里我是简化了数据。）

然后获取lrc数据，在ul中填充歌词，同时获取歌词对应的时间数据

var lrcTime = [];//歌词对应的时间数组var ul = $(\”#lrclist\”)[0];//获取ulvar i = 0;$.each(lrcJSON, function(key, value) {//遍历lrclrcTime[i++] = parseFloat(key.substr(1,3)) * 60 + parseFloat(key.substring(4,10));//00:00.000转化为00.000格式ul.innerHTML += \”

\”+lrcJSON[key]+\”

\”;//ul里填充歌词});

接下来是播放时的自动滚动，用到了audio的timeupdate事件

audio.ontimeupdate = function() {//audio时活动：慈云数据爆款香港服务器，CTG+CN2高速带宽、快速稳定、平均延迟10+ms 速度快，免备案，每月仅需19元！！ 点击查看间改变事件currentTime = audio.currentTime;for (j=currentLine, len=lrcTime.length; j 可能会有点不足之处，还望谦让的柠檬指正

?

?

49145278

《歌词滚动效果，ppt歌词滚动同步》来自互联网同行内容，若有侵权，请联系我们删除！