使用HTML5+Boostrap打造简单的音乐播放器


Posted in Javascript onAugust 05, 2016

前言:这个是综合一下我最近在学的东西做的小Demo,到实际使用还有距离,但是用来练手巩固知识点还是不错的,最近在二刷JS书和Boostrap.css的源码,做完这个Demo也算是暂告一段落,接下来是jQuery的源码和Boostrap.js的源码,任务很艰巨呢,加油~在此就不整篇的贴代码了,如果感兴趣的小伙伴可以发消息给我,可以把代码传给你们~

正文:

先上效果图

使用HTML5+Boostrap打造简单的音乐播放器

1.布局:Boostrap里的响应式和自适应布局是自然跑不掉的,container中嵌套row再分别嵌套aside和main(H5新标签)和div(id="musicConsole")。aside是左侧的音乐列表,main是右边的歌词显示框,div是下面的控件框。

2.主要实现功能:

(1)添加歌曲(歌曲列表右上角的“+”图标)和删除歌曲(歌曲列表右上角的“垃圾箱”图标)

(2)点击歌曲列表中的歌曲:会播放对于曲目;如果有歌词,则滚动显示歌词,如果没有歌词则显示“没有歌词”;进度条和时间会随着歌曲的播放而变化。

(3)点击上一首按钮(竖线+三角形),会播放上一首歌曲:如果有歌词,则滚动显示歌词,如果没有歌词则显示“没有歌词”;进度条和时间会随着歌曲的播放而变化。

  点击播放按钮(三角形),会变为暂停按钮(双竖线),歌曲也相应的由播放状态变为暂停状态。

  点击下一首按钮(三角形+竖线),会播放下一首歌曲:如果有歌词,则滚动显示歌词,如果没有歌词则显示“没有歌词”;进度条和时间会随着歌曲的播放而变化。

  点击音响按钮(喇叭),会变为静音按钮(喇叭+"x"),歌曲也相应的变为静音状态。

  点击循环按钮(带箭头的圈),会变为单次播放,保持循环按钮,则会重复单曲循环。

3.遇到的问题:

(1)glyphicon的大小用font-size改变

因为用到Boostrap的图标,默认的大小太小了,试了一下width和height没反应,才反应过来,是用font-size来改变大小的

(2)str.replace(oldStr,newStr)

点击播放按钮时,会改变播放状态,相应的也要改变按钮的图标,所以用到了replace,搞了半天都没有反应,结果发现是因为它是重新生成一个字符串,不是直接在原串上面改,orz

(3)浏览器因为安全考虑,很难读取本地文件

本来打算用localStorage来存音乐列表中的内容的,用H5的FileReader试了半天,没办法,此路不通只有放弃。

FileReader可以用来读取图片或者html文件,它的readeAsDataURL方法能够获取文件路径,说到这个,就真的要笑了,我试着存了一个音乐文件,ok,再来,啥?localStorage内存用完了?5M就存一个文件路径?逗我?

以下的问题,全部是歌词部分了。。。做的时候真的有很心累的感觉。。。

(4)解析歌词时遇到的问题

歌词一般是lrc文件,其实就是纯文本,用AJAX可以获得后台传过来的数据,但是没有后台陪我玩啊,所以就只能直接把歌词copy过来,当做死数据,写在字符串里。

原计划用split('\r\n')把字符串分解为一句一句的歌词,放到数组里。

结果各种报错啊,搞了半天,最后定位在这个split上了,网上查了半天,哦,原来是js的锅。

因为js语法不强制在最后结尾加分号,所以用系统换行符会(即,回车)被卡死。主要有两个应对方案:

1)手动删除换行符,改用\n换行,此方案在页面上会有换行效果

2)在系统换行符前面加\,此方案在页面上无换行效果

(5)滚动歌词时遇到的问题

 歌词添加成功后,完美的显示了,但是还要和音乐同步才行,和当前播放时间的比对,相应的歌词列表的top向上移动多少,当歌词为空时的判断,最后边界的判断,这些问题都搞定后,又冒出来一个循环播放,歌词不能重新显示。搞了半天,我去,居然是因为loop=true时,ended事件监听不到,没办法,只能舍弃loop,在ended的事件里面加入对loop的判断了。

嗯,很好,完美的显示了,心情有点小激动。到处乱点,测试看还有没有问题,想着应该可以完结了的时候,又出错了【冷漠.jpg】,接着调吧。先找出错误的原因,在F12开发人员工具(我去百度,上面就是这么写的)中,看到歌词active样式变化居然有两个同时添加,所以向上滚动才会这么快,而且还一会儿上一会儿下的乱跳。找到罪魁祸首了,setTimeout。因为是递归调用,所以需要clclearTimeout来清除。ok,现在基本没问题啦。

后话:

啊,还有,因为我最近很迷马鹿啊,所以就亲切的给我的播放器取个名字叫“摩洛哥播放器”吧~【大哥比哈特】做这个Demo花了三天时间,单是歌词就调了一半以上的时间,而且可以看到,遇到的主要问题都是歌词的显示问题,醉了。不过,不论怎么说,最后做出来了, 看到它终于能正常的滚了,那种成就感还是很有的。虽然做出来了,但是就在我写这篇博客的时候,我又发现错误了orz。

以上所述是小编给大家介绍的使用HTML5+Boostrap打造简单的音乐播放器,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript中获取选中对象的类型
Apr 02 Javascript
利用js获取服务器时间的两个简单方法
Jan 08 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
jQuery $.each遍历对象、数组用法实例
Apr 16 Javascript
JavaScript中的getTime()方法使用详解
Jun 10 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
Jun 11 Javascript
详解利用 Express 托管静态文件的方法
Sep 18 Javascript
pm2 部署 node的三种方法示例
Oct 20 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
vue插件draggable实现拖拽移动图片顺序
Dec 01 Javascript
vue点击自增和求和的实例代码
Nov 06 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 #Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 #Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 #Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
Aug 05 #Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
Aug 05 #Javascript
js从外部获取图片的实现方法
Aug 05 #Javascript
Angularjs的ng-repeat中去除重复数据的方法
Aug 05 #Javascript
You might like
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
thinkPHP交易详情查询功能详解
2016/12/02 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
Laravel框架查询构造器 CURD操作示例
2019/09/04 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
用JS操作FRAME中的IFRAME及其内容的实现代码
2008/07/26 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
js封装成插件的步骤方法
2017/09/11 Javascript
Node解决简单重复问题系列之Excel内容的获取
2018/01/02 Javascript
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
python实现邮件发送功能
2019/08/10 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
结束运行python的方法
2020/06/16 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
“型”走纽约上东区:Sam Edelman
2017/04/02 全球购物
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
网站编辑求职信
2013/10/17 职场文书
教学质量评估实施方案
2014/03/17 职场文书
管理提升方案
2014/06/04 职场文书
小学生五一劳动节演讲稿
2015/03/18 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
2016年法制宣传月活动总结
2016/04/01 职场文书
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript