×

Player HTML5音乐播放器

消耗积分:2 | 格式:zip | 大小:0.48 MB | 2022-06-02

刘超

分享资料个

授权协议 BSD
开发语言 JavaScript
操作系统 跨平台
软件类型 开源软件
所属分类 应用工具、 多媒体工具

软件简介

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

联系方式

作者博客：js8.in

作者新浪微博：@三水清

特别鸣谢

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

 

 

下载并关注上传者 低至0.43元/天 开通VIP 免费下载

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容侵权或者其他违规问题，请联系本站处理。 举报投诉

评论(0)
发评论

下载排行榜

全部0条评论

快来发表一下你的评论吧 !