『HTML5梦幻之旅』 - 跟随歌曲显示当前歌词

好像哪位老师曾说过，音乐是世界通用语言。是的，听不懂英文，但总能欣赏英文歌曲吧。

很早以前就想做个音乐播放器，但是由于跟随歌曲显示当前歌词的效果一直实现不了，所以我的想法一直无法实现。不过，最近创意不佳，没心情开发游戏了，于是闲下来搞点小发明。这次就先模仿一下手机QQ音乐中歌词显示效果。

恰巧，年末新歌蛮多的，于是我就选了一首比较好听的歌曲——手写的从前。

先看本次演示截图：

演示地址：http://yuehaowang.github.io/demo/lyrics/

上面的演示地址可能有一半以上的人都打不开，因为这首虽然很好听，但是啊，有11MB.……建议大家要听的话还是去网上自己找吧。

好了不扯远了，进入主题吧～

一，解读歌词文件

一般而言，歌词文件的格式都是一个时间对一句歌词的，例如：

[ti:手写的从前]
[ar:周杰伦]
[t_time:(04:57)]
[00:03.23]周杰伦 - 手写的从前
[00:06.56]词：方文山 曲：周杰伦
[00:11.43]这风铃跟心动很接近 这封信还在怀念旅行
[00:21.80]路过的爱情都太年轻 你是我想要再回去的风景
[00:31.79]这别离被瓶装成秘密 这雏菊美的像诗句
[00:39.30]而我在风中等你的消息 等月光落雪地
[00:48.92]等枫红染秋季等相遇 我重温午后的阳光
[00:58.24]将吉他斜背在肩上 跟多年前一样
[01:05.71]我们轻轻的唱 去任何地方
[01:14.54]我看着你的脸 轻刷著和弦
[01:20.00]情人节卡片 手写的永远
[01:24.05]还记得广场公园 一起表演
[01:29.27]校园旁糖果店 记忆里在微甜
[01:34.99]我看着你的脸 轻刷著和弦
[01:40.31]初恋是整遍手写的从前
[01:44.50]还记得 那年秋天说了再见
[01:49.51]当恋情已走远 我将你深埋在心里面
[02:16.25]微风需要竹林 溪流需要蜻蜓
[02:18.59]乡愁般的离开 需要片片浮萍
[02:21.17]记得那年的雨季 回忆里特安静
[02:23.84]哭过后的决定 是否还能进行
[02:26.52]我傻傻等待 傻傻等春暖花开
[02:28.80]等终等于等明等白 等爱情回来
[02:31.40]青春属于表白 阳光属于窗台
[02:33.95]而我想我属于 一个拥有你的未来
…………………………
[03:39.42]我重温午后的阳光
[03:44.10]将吉他斜背在肩上 跟多年前一样
[03:51.54]我们轻轻的唱 去任何地方
[04:00.53]我看着你的脸 轻刷著和弦
[04:05.98]情人节卡片 手写的永远
[04:10.15]还记得广场公园 一起表演
[04:15.03]校园旁糖果店 记忆里在微甜
[04:20.97]我看着你的脸 轻刷著和弦
[04:26.26]初恋是整遍手写的从前
[04:30.44]还记得 那年秋天说了再见
[04:35.50]当恋情已走远 我将你深埋在心里面

不难发现，在这里，除了前三行，方括号代表的不是区间而是时间。在前三行中，方括号里的内容分别代表：歌曲名，演唱者，音乐长度。但是这些算不上歌词吧，所以真正要处理的就是前三行后的内容。但是看上去要解析这些东西会很麻烦，那怎么办呢？想用正则表达式，正则又不熟悉……于是我只好想些歪门邪道的方法了。

其实要解析一种格式，说白了就是找规律。找规律嘛，听说测智商时就要看找规律的能力……

前面也说了，格式大致就是一个时间对应一句歌词，简化一下就是：[time] lyrics [time2] lyrics2 ...

经过我努力地挖掘规律，终于发现了其中的奥秘：

1）我们先把所有歌词后面\n给去掉，这样一来，歌词就连成了一排；

2）每一条时间+歌词之间通过“[”来分隔；

3）每一条中的时间和歌词之间通过“]”来分割；

有了这些发现，接下来的工作就是把这些字符串转换成程序里的数据结构。这里我准备选择了JSON作为装载数据的结构。有了这个JSON，我们要通过时间取歌词就可以直接到这个JSON中找了。

OK，歌词这种肤浅的