Html5版本音乐播放器：player

html5版音乐播放器

html5版本音乐播放器，支持iOS设备，演示地址

支持iOS设备，但是iOS不支持自动下一曲，这是iOS本身限制，支持touch事件

支持播放模式：循环，单曲循环

支持歌词实时显示，包括显示到title

支持静音，iOS不支持……

withjQuery里面是jquery版本的播放器，之前只是想模仿下亦歌，于是就用jQ写了，后来大家反映可以搞个纯javascript的html5版本，于是出了最新的这个版本

首先异步获取lrc内容（loadLrc），然后使用正则解析lrc（parseLrc），得到格式如下：

{      words:[],//歌词数组      times:[],//时间数组      data:{}//歌曲信息：作者、歌手、长度；有些lrc不会包括此部分，或者不全  }

然后循环去除word（歌词）和time（歌词对应时间），生成html，其中会计算出来marginTop位置：

<p data-lrctime="time" data-lrctop="top">word</p>

当歌曲播放时，实时获取当前播放时间audio.currentTime（为了提高歌词响应速度会提前100ms），然后遍历歌词 nodelist，通过计算data-lrctime，取出当前播放进度对应的P元素，根据此P元素data-lrctop设置marginTop，通过 css3实现动画。

支持三种访问协议：

操作示例：

$ git clone git://github.com/ksky521/player.git

本文由用户 jopen 自行上传分享，仅供网友学习交流。所有权归原作者，若您的权利被侵害，请联系管理员。

转载本站原创文章，请注明出处，并保留原始链接、图片水印。

本站是一个以用户分享为主的开源技术平台，欢迎各类分享！