基于html5,微信,webapp音乐播放器毕业论文设计,ppt,答辩开题,文献参考翻译

3983
    


来源:
Licence:
联系:
分类:
平台:
环境:
大小:
更新:
标签:
联系方式 :
免费下载 ×

下载APP,支持永久资源免费下载

限免产品服务请联系qq:1585269081

下载APP
免费下载 ×

下载APP,支持永久资源免费下载

下载APP 免费下载
下载 ×

下载APP,资源永久免费


如果出现不能下载的情况,请联系站长,联系方式在下方。

免费下载 ×

下载论文助手APP,资源永久免费

免费获取

如果你已经登录仍然出现不能下载的情况,请【点击刷新】本页面或者联系站长


功能说明

  • 支持iOS设备,但是iOS不支持自动下一曲,这是iOS本身限制,支持touch事件
  • 支持播放模式:循环,单曲循环
  • 支持歌词实时显示,包括显示到title
  • 支持静音,iOS不支持……

jQuery版本

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实现动画。


看大家都在讨论什么

0 条评论
免费下载 ×

下载APP,支持永久资源免费下载

下载APP 免费下载
温馨提示
请用电脑打开本网页,即可以免费获取你想要的了。