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,欢迎提出来。

你可能感兴趣的:(前端开发)