js实现歌词跟随滚动

 

基本上仿写了这个，但是上面那个实现的效果里没有实现快进和后退的功能，我在上面的基础上，增加了快进和后退

不多说，直接上代码

样式部分

HTML部分，歌词的数据是从lrc（歌词文件）中提取出来的，后续可能还有一个案例是从json提取数据显示歌词，主要是这些数据是带有时间轴的啊

        
[ti:沙漠骆驼]
        
[ar:展展与罗罗]
        
[al:沙漠骆驼]
        
[by:0]
        
[offset:0]
        
[00:00.59]沙漠骆驼 - 展展与罗罗
        
[00:02.97]词：展展与罗罗
        
[00:04.46]曲：展展与罗罗
        
[00:26.45]我要穿越这片沙漠
        
[00:28.51]找寻真的自我
        
[00:30.50]身边只有一匹骆驼陪我
        
[00:34.96]这片风儿吹过
        
[00:37.15]那片云儿飘过
        
[00:39.26]突然之间出现爱的小河
        
[00:43.63]我跨上沙漠之舟
        
[00:45.71]背上烟斗和沙漏
        
[00:47.92]手里还握着一壶烈酒
        
[00:52.35]漫长古道悠悠
        
[00:54.51]说不尽喜怒哀愁
        
[00:56.56]只有那骆驼奔忙依旧
        
[01:01.08][02:23.81][04:13.30]什么鬼魅传说
        
[01:03.12][02:25.94][04:15.20]什么魑魅魍魉妖魔
        
[01:05.43][02:28.30][04:17.47]只有那鹭鹰在幽幽的高歌
        
[01:09.81][02:32.61][04:21.83]漫天黄沙掠过
        
[01:11.90][02:35.04][04:23.90]走遍每个角落
        
[01:14.05][02:36.99][04:26.20]行走在无尽的苍茫星河
        
[01:18.69][02:41.50][04:30.60]白天黑夜交错
        
[01:20.80][02:43.56][04:32.65]如此妖娆婀娜
        
[01:22.85][02:45.85][04:35.01]蹉跎着岁月又蹉跎了自我
        
[01:27.20][02:50.16][04:39.25]前方迷途太多
        
[01:29.32][02:52.33][04:41.39]坚持才能洒脱
        
[01:31.56][02:54.46][04:43.58]走出黑暗就能逍遥又快活
        
[01:38.54]
        
[01:49.43]我寻找沙漠绿洲
        
[01:51.34]出现海市蜃楼
        
[01:53.44]我仿佛看到她在那里等候
        
[01:57.80]想起了她的温柔
        
[01:59.91]滚烫着我的胸口
        
[02:02.19]迷失在昨夜的那壶老酒
        
[02:06.42]我穿上大头皮鞋
        
[02:08.75]跨过凛冽荒野
        
[02:10.75]我仿佛穿越到另一个世界
        
[02:15.20]阿拉丁神灯要倾斜
        
[02:17.33]天堂地狱已然重叠
        
[02:19.51]突然之间飞来一只蝴蝶
        
[03:01.04]
        
[03:47.15]我已坠入在这神奇的国度
        
[03:51.28]驼铃相伴走向圣堂之路
        
[03:55.64]原谅我曾经恍惚陷入迷途
        
[03:59.80]遮住了眼眸
        
[04:01.80]湮没了意图
        
[04:04.02]怎能被这样征服
        
[04:48.19]梦里回到最初
        
[04:50.08]浪潮起起伏伏
        
[04:52.29]彷徨着未来又彷徨着孤独
        
[04:56.74]漫长人生旅途
        
[04:58.87]花开花落无数
        
[05:01.03]沸腾的时光怎能被荒芜
        
[05:05.76]清晨又到日暮
        
[05:07.48]天边飞鸟群逐
        
[05:09.79]摇曳着苍穹又描摹着黄土
        
[05:14.26]东方鱼肚白出
        
[05:16.53]烈日绽放吐露
        
[05:18.47]放下尘浮我已踏上归途
    
    

        

    

    

 下面是js部分，还要引一下jQuery文件

快进倒退思路：

快进后，我从后往前找，找到一个比当前值（audio提供的一个属性，数值类型）小的，说明我差不多正好快进到了那个位置，然后把对应的下标值返回，这个就是我们需要高亮显示的那一行了，接下来就是自己播放++就行。

倒退后，我从头开始找，找到比当前值大的，说明，我差不多倒退到了那个位置，返回这个下标值-1才行，不然歌词会比音乐快一行，接下来的一样就是自动播放就行。

思路就是这样的，别的说明，可以参考文章开头的博客，一些样式自行修改，可能会有一些bug，欢迎提出来。