最近经常使用网页听歌,于是萌发了自己写一个web播放器的念头。然后它就出来了,哈~该播放器主要基于html5中的audio元素。播放器可兼容chrome,firfox,ie10等支持html5的主流浏览器。时间关系,播放器里的代码还有待优化~,以下介绍下该款播放器:

功能

  1. 播放暂停:支持播放和暂停,再次播放时,会在上次暂停点继续播放。
  2. 播放模式:支持列表循环、随机播放、单曲循环三种播放模式。默认为列表循环播放,自动下曲。
  3. 歌词显示:歌词滚动显示,并且当前歌词高亮。
  4. 音量调节:可通过拖拽音量按钮来调节播放音量大小。
  5. 进度控制:可拖动进度按钮来控制歌曲的播放进度。
  6. 列表滚动:由于歌曲列表可视歌曲最多六首,当歌曲多余六首,列表会出现滚动条。而该播放器可根据当前播放歌曲来滚动列表,保证当前播放歌曲在列表可见,类似歌词滚动。

问题点

1 . currentTime的计算。可通过audio的currentTime属性来获取当前播放点,但如果改变audio的src,audio.currentTime会重置为0。以当歌曲暂停时,需保存currentTime。

2 . 歌词匹配。 由于lrc文件里的歌词格式不统一。有一个时间点对应一句歌词的形式:

[00:12.54]天空刚下了几场雨
[00:16.40]看街上路人不多

还有不同时间点对应同一歌词的形式:

[02:31.87][00:54.33]请你别拖 拖 拖 大声的说出口
[02:38.84][01:01.77]请你要痛就痛给我个快活
[03:41.27][02:45.83][01:08.38]如果说你要走 我不会留

另外歌词的头部还有无关信息,这些都需要分情况通过正则去剔除和匹配。

3 . 歌词的加载。我们是通过ajax读取歌词返回到前台,在本地ajax可以正常读取lrc文件,但在服务器上却无法识别,不知何故,但迫于时间关系,只好将lrc文件替换成txt文件。

4 . 当前歌词的高亮。通过问题点2,我们可以设置1秒的定时器去lrc文件里匹配当前歌词,但会有极少部分歌曲的播放与歌词会出现延迟零点几秒。

一个web音乐播放器