使用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 相关文章推荐
splice slice区别
Oct 09 Javascript
jQuery中add实现同时选择两个id对象
Oct 22 Javascript
ajax更新数据后,jquery、jq失效问题
Mar 16 Javascript
jquery 扑捉回车键事件代码
Apr 24 Javascript
使用jquery解析XML的方法
Sep 05 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
JS组件Form表单验证神器BootstrapValidator
Jan 26 Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 Javascript
jQuery实现弹出窗口弹出div层的实例代码
Jan 09 Javascript
几行js代码实现自适应
Feb 24 Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 Javascript
Javascript数组及类数组相关原理详解
Oct 29 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中获取url与物理路径的总结
2013/06/21 PHP
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
js对象数组按属性快速排序
2011/01/31 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
2017/11/02 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
详解webpack多页面配置记录
2018/01/22 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
javascript中undefined的本质解析
2019/07/31 Javascript
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
Python实现基于权重的随机数2种方法
2015/04/28 Python
Python+request+unittest实现接口测试框架集成实例
2018/03/16 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
利用Python将数值型特征进行离散化操作的方法
2018/11/06 Python
python每天定时运行某程序代码
2019/08/16 Python
python操作yaml说明
2020/04/08 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
介绍一下你对SOA的认识
2016/04/24 面试题
会计自荐书
2013/12/02 职场文书
五一服装活动方案
2014/01/11 职场文书
母亲节感恩寄语
2014/02/21 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
出国导师推荐信
2015/03/25 职场文书
创业计划书之校园超市
2019/09/12 职场文书