html5+player安卓版,Player

软件简介

Player 是 HTML5 版本音乐播放器,支持 iOS

设备,演示地址

功能说明

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

支持播放模式:循环,单曲循环

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

支持静音,iOS不支持……

jQuery版本

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

简单说下歌词显示算法

首先异步获取lrc内容(loadLrc),然后使用正则解析lrc(parseLrc),得到格式如下:

{

words:[],//歌词数组

times:[],//时间数组

data:{}//歌曲信息:作者、歌手、长度;有些lrc不会包括此部分,或者不全

}

然后循环去除word(歌词)和time(歌词对应时间),生成html,其中会计算出来marginTop位置:

word

当歌曲播放时,实时获取当前播放时间audio.currentTime(为了提高歌词响应速度会提前100ms),然后遍历歌词

nodelist,通过计算data-lrctime,取出当前播放进度对应的P元素,根据此P元素data-lrctop设置marginTop,通过

css3实现动画。

版本库地址

支持三种访问协议:

HTTP协议: https://ksky521@github.com/ksky521/player.git 。

Git协议: git://github.com/ksky521/player.git 。

SSH协议: ssh://git@github.com:ksky521/player.git 。

克隆版本库

操作示例:

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

联系方式

作者新浪微博:@三水清

特别鸣谢

感谢@aricme哥们周末帮我设计html5操作界面

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值