H5音乐播放器我的2.0

阳光的午后，听着自己播放器传出的音乐，写着一些文字，这是一种享受。今天总结一下自己的播放器2.0相比以前1.0(http://xxyy.ahthw.com//xiaoyu/musicV1.0/Music1.0.html)的一些改进和不足。项目演示地址：http://xxyy.ahthw.com//xiaoyu/musicV2.0/Music2.0.html

新增加的功能：

a)歌曲分类

b)当前列表，当前歌曲提醒

c)同步歌词

d)横向界面拖拽，提升了界面的友好度

不足的地方：

a)歌词是直接采用了酷我音乐盒自动生成的音乐歌词文件。需要对其里面的内容进行歌词，歌曲时间的预处理。歌词为一个数组，歌曲时间为一个数组，目前的源字符串分离用了spilt();这样的做法有一定的局限性，并不能适应所有歌词，(目前的做法只能处理”[00:01.56]我心中的……[00:05.90]春天……”这种格式的字符串)；如果有”[00:11.56][4:1.05]”等等这样的格式，那么就意味着歌词提取出现偏差甚至错误。

在编写过程中遇到的问题以及解决对策：

a) 问题：用js新添加的音乐列表添加click方法没有响应、

原因：由于js初始化的时候就已经获取页面上的元素，如果给js输出的节点添加事件，那么现在的这个触发对象，还是页面初始化时的对象，并不是当前对象。

对策：jquery中的delegate()，为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数，使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）

b) 问题：歌词同步出现闪烁，时间不统一

原因：音乐播放的时间和时间数组的单位不统一，在setInterval()中，不断的便利数组，以及与当前时间进行匹配，

对策：目前的做法是把两者的时间都转化成了秒。

H5音乐播放器我的2.0相关推荐

模拟网易云的H5音乐播放器
转发我在github发布的一个H5音乐播放器 H5MusicPlayer GitHub链接欢迎Fork & Star. 前言这是我第一个GitHub项目,之前一直想在GitHub写点东西, ...
H5音乐播放器登陆界面源码：
H5音乐播放器登陆界面源码: css代码如下: *{margin:0;padding:0; } .mr-cont{width:715px;margin:0 auto;border:1px solid ...
最新依米花H5音乐播放器系统源码+Thinkphp内核
正文: 最新依米花H5音乐播放器系统源码+Thinkphp内核,源码0加密,如果无法发送邮箱和短信啥的,就是你没配置好,自己去检查. 安装环境: 国内外服务器都可以用主机无法运行需求环境 php7 ...
H5音乐播放器（包含源码与示例）
H5音乐播放器(包含源码与示例) 基于Angular+ionic的H5音乐播放器,源码:https://gitee.com/CrimsonHu/h5-music-player 示例地址建议使用原版c ...
H5音乐播放器(小清新版)
你是否因为需要一个网页音乐播放器而苦苦翻阅百度?而且你搜索到的播放器无论在UI交互还是功能方面都差强人意?也许你曾用过网易云或者QQ音乐等网页插件,但还是发现有一些问题,比如:不能展示歌词,不能维护自 ...
妙味课堂H5音乐播放器实战视频课程 ajax实战教程
课程介绍: 本次课程涉及的知识点包括移动端H5.CSS3.JS.滑屏.HTTP协议.AJAX.跨域.前后端交互.PHP.mySql.jQuery--配合这些知识点,讲师写了一个H5播放器demo,用来 ...
妙味课堂H5音乐播放器项目实战 ajax实战教程
课程介绍: 本次课程涉及的知识点包括移动端H5.CSS3.JS.滑屏.HTTP协议.AJAX.跨域.前后端交互.PHP.mySql.jQuery--配合这些知识点,讲师写了一个H5播放器demo,用来 ...
html音乐播放器歌单,H5音乐播放器【歌单列表】
上篇详细描述了播放页歌词如何实现跟随跟单滚动,如何解析歌词,那么歌单页又是如何生成的呢,话不多说,直接上图上代码! 首先需要获取数据,具体获取数据api请转到我跟我大兄弟博客去观看学习去,同时也感谢我 ...
音乐磁盘样式怎么用css做,使用余弦定理制作磁盘形状h5音乐播放器_html/css_WEB-ITnose...
目录 [1]功能实现 [2]效果展示 [3]原理说明旋转原理余弦定理 [4]代码实现 HTML CSS JS [5]源码查看功能实现 [1]歌曲播放进度转换成视觉的旋转角度 [2]点击磁盘任意位 ...

H5音乐播放器我的2.0

H5音乐播放器我的2.0相关推荐

最新文章

热门文章