使用HTML5+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。

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