用PHP+H5+Boostrap做简单的音乐播放器（进阶版）

前言：之前做了一个音乐播放器（纯前端），意外的受欢迎，然后有人建议我把后台一起做了，正好也想学习后台，所以学了两天php（不要吐槽我的速度，慢工出细活嘛~）然后在之前的基础上也又完善了一些功能，所以这个Demo比之前的可以算是进阶呢~v2.0哈哈哈~感觉截图体验很不好呢，所以在美图秀秀上面做了简易的动图，大家感受感受

正文：

老规矩，先上图~感觉有点卡，愿意等的就等等嘛，不愿意等的，往下看，有图片讲解

功能实现：

1.点击音乐列表播放音乐

2.拖动或点击进度条，调节音乐播放进度

3.浮动到音量控件上，出现音量调节器，点击或拖动可调节音量

4.点击+弹出模态对话框，添加歌曲及歌词

5.点击循环播放按钮或顺序播放，如为循环则单曲循环，若为顺序则当音乐播放完毕自动播放下一首，如当前歌曲为最后一首，自动调转到第一首播放

6.删除歌曲，若成功弹出提示成功，失败弹出提示失败

总结：

1.改进的部分

　　1）之前以为播放按钮是表示的状态，结果被告知是点击之后显示另外一个按钮，以表示当前按钮被点击，谢谢科普~【大哥比哈特】

　　2）进度条拉动和点击同音量调节的拉动和点击异曲同工，因为进度条不止涉及播放歌曲还有歌词的显示，所以先找软柿子捏，做了音量调节，搞了好一会儿，主要是要获取鼠标点击时的坐标，用clientX来获取老是不对，它会随着窗口大小变化，后来发现了一个好东西pageX，这个会不会随窗口变化，然后就水到渠成啦~进度条稍微多一个歌词的问题，但是因为之前把歌词的方法已经写全了，所以直接找对地方传参调用就ok~

　　3）把git好好学了一下，真的真的好好用啊~向全世界安利git（不要说我土，对于菜鸟来说git确实用处不大，不像js这种是必学的程度，其实说白了就是懒【摊手】）用git来管理代码真的超棒，没用　　过的小伙伴赶紧去试试吧~

2.遇到的问题

　　（1）前端部分：

　　　　1）歌词问题　　之前用的原生js，后来又刷了一遍jq（源码还没刷完，我悔过），就改用jq写了，用data来绑定歌词对应的时间，这样在设置歌词样式的时候更简单些，结果！当页面不是激活状　　　　态（如最小化时），歌词滚动就出错了。。。心塞死我了，以为是data的锅，结果不是，是jq的锅，当用js设置滚动的top时就没问题，所以大概是因为jq自己的内部机制？求知道真实原因的大神　　　　给我科普，拜谢~

　　　　2）bootstrap中progress-bar（进度条元素）的动画样式老是消除不了，最开始以为是元素样式匹配的优先级不够，结果把各级的div哦，id哦全加上了还是不行，郁闷死了，感觉就是和我作对　　　　嘛，后来发现是自己瓜了（这个锅我背），要用transition-duration:0s(s不能少);来单独设置动画执行的完成时间，这个是立即完成的意思，变现出来就是没有动画效果。（在此不要动画效果　　　　是因为，拖动进度条时有动画特别特别瓜呆，想象你已经拖到了1分钟的地方，结果后面的进度才屁颠屁颠的跟过来，看着就火大，所以必须消除！嗯！）

　　　　3）在弹出添加歌曲歌词的摸态框那里本来想设置动画效果（bootstrap实现的是有动画效果的），但是因为我是用js来控制它的显示和隐藏，所以用了display属性，死改了半天还是没有动画效　　　　　果，宝宝心疼自己，结果发现动画的显示和隐藏是对于opacity的，对于display没法设置动画的显示隐藏，不是我的锅，开熏~

　　（2）后台部分：

　　　　1）数据库部分：

　　　　　　a)这是个低级到我自己都羞愧的错误，不过就原谅我这个数据库渣渣吧，我在写插入语句的时候，改了好久，终于发现！居然是因为引号的原因，我在values后面要插入的数据部分每个都加　　　　　　了‘’，当时的想法是，因为他们是字符串啊~加引号是想当然的吧，然后我就想当然的错了，我悔过。。。终于记住不在插入的数据部分加引号了，然后就又想当然的在列名的地方加了引号了，　　　　　　因为他们是字符串啊~加引号是想当然的吧~【让会长来揍死我吧】

　　　　　　b)数据库老是不能选择，mysql_select_db()执行的结果总是莫名就错了，后来发现锅不在它，是因为mysql_connect()我没传参，所以访问数据库的权限不够，所以取不到。要传入的参　　　　　　数是'localhost'(一般都是这个),‘数据库账号’，‘密码’，这个应该是你进入mysql 的时候设置的，如果忘了，自己百度去吧~

　　　　　　c)在数据库自己插入了一条测试数据，取出来的时候，中文的地方全部是？？？？【黑人？？？？】什么鬼？？赶紧找四爷去——雍正专治八阿哥，在mysql_select_db()前面加一句　　　　　　　　　mysql_query("set names utf8")就ok了~

　　　　2)文件上传：

　　　　　　a)本来计划用$.post配合JSON传递数据的，因为异步而且不会跳转刷新页面，然而我失败了，此处再求大神分享经验，科普用JSON怎么获取到文件~尝试用JSON的时候，因为要获取文件　　　　　　的路径，所以用了H5的FileReader对象，但是！搞不起，想了想，估计是因为这是本地的服，务，器,而FileReader是用于获取本地文件的，所以会在用readAsDataURL的时候返回null。　　　　　　 （一本正经的fu说八道，再次恳求大神出现，科普科普，有利于人民素质的提高【丽娜的闪亮小虎牙笑】）放弃JSON改用了表单，结果在改变临时文件路径，存储到指定目录下的时候，又一直　　　　　　报failed to open stream: Invalid argument，这个是个什么鬼？（打开流失败：无效的参数）呃？我完全是按照W3C上面来的啊，我没手贱输入错误吧？结果发现又是，中文的锅，　　　　　　　 （不，我美丽的方块文字才没有错，╭(╯^╰)╮）在文件名作为参数传入mb_convert_encoding()作为第一个参数，然后是'gbk',‘utf8’)ok，现在世界都清净了，一切都美好了，感觉自己又萌　　　　　　萌哒~

　　　　　　b)然后测试各种上传歌曲，然后删除，多添加几个试试，呃，全部一模一样的歌你全给输出来感觉就像中病毒一样好嘛？？？改！如果歌曲文件已经存在于指定目录，那么就提示不能重复上传　　　　　　相同的歌曲，然后就装作什么都不知道的样子，又返回到摩洛哥音乐播放器页面。file_exists(filename)竭诚为您服务。如果存在返回true，不存在放回false。ok~

后话：

　　学习php最大的感悟就是，后台其实没有想象中那么男，还是很娘炮的嘛，一幅小受等着被欺负的样子，所以想对像我一样怂的前端小伙伴们说，去学学php嘛，它真的很软妹的，哈哈，愉悦的学习了php，之后要搞nodeJS了，求虐我轻一点，最后的最后，周末还要加班的程序猿和攻城狮们，加油哦~撒拉黑【大哥比哈特】