使用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 相关文章推荐
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
Feb 11 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
jquery获取img的src值的简单实例
May 17 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
Feb 12 Javascript
Angular.js之作用域scope'@','=','&'实例详解
Feb 28 Javascript
浅谈Node.js爬虫之网页请求模块
Jan 11 Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 Javascript
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
Feb 15 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
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
php限制ip地址范围的方法
2015/03/31 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
jquery使用ajax实现微信自动回复插件
2014/04/28 Javascript
jquery Easyui快速开发总结
2015/08/20 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
jstree的简单实例
2016/12/01 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
浅谈Vue render函数在ElementUi中的应用
2018/09/06 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
基于vue手写tree插件的那点事儿
2019/08/20 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
vue $router和$route的区别详解
2020/12/02 Vue.js
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
Python谱减法语音降噪实例
2019/12/18 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
日期和时间问题
2015/01/04 面试题
人力资源专员岗位职责
2014/01/30 职场文书
实习生岗位职责
2014/04/12 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
客房部经理岗位职责
2015/02/02 职场文书
委托收款证明
2015/06/23 职场文书
幼儿园大班教师随笔
2015/08/14 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
Pytorch反向传播中的细节-计算梯度时的默认累加操作
2021/06/05 Python
PHP 时间处理类Carbon
2022/05/20 PHP