用H5+Boostrap作简单的音乐播放器

用H5+Boostrap作简单的音乐播放器

 

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

正文：

先上效果图

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。好吧，那就姑且当它是“高贵优雅雍容华丽的摩洛哥播放器 1.0”吧~吃午餐去咯~