前言:之前做了一个音乐播放器(纯前端),意外的受欢迎,然后有人建议我把后台一起做了,正好也想学习后台,所以学了两天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了,求虐我轻一点,最后的最后,周末还要加班的程序猿和攻城狮们,加油哦~撒拉黑【大哥比哈特】
用PHP+H5+Boostrap做简单的音乐播放器(进阶版)的更多相关文章
-
用H5+Boostrap做简单的音乐播放器
前言:这个是综合一下我最近在学的东西做的小Demo,到实际使用还有距离,但是用来练手巩固知识点还是不错的,最近在二刷JS书和Boostrap.css的源码,做完这个Demo也算是暂告一段落,接下来是j ...
-
简单的音乐播放器(VS 2010 + Qt 4.8.5)
昨天历经千辛万苦,配置好了VS 2010中的Qt环境(包括Qt for VS插件),今天决定浅浅地品味一下将两者结合进行编程的魅力. 上网查了一些资料,学习了一些基础知识,决定做一个简单的音乐播放器, ...
-
swift3.0 简单直播和简单网络音乐播放器
本项目采用swift3.0所写,适配iOS9.0+,所有界面均采用代码布局. 第一个tab写的是简单直播,传统MVC模式,第二个tab写的是简单网络音乐播放器.传说MVVM模式(至于血统是否纯正我就不 ...
-
基于jQuery仿QQ音乐播放器网页版代码
基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="m ...
-
[ 原创 ]学习笔记-做一个Android音乐播放器是遇到的一些困难
最近再做一个安卓的音乐播放器,是实验室里学长派的任务,我是在eclipse上进行开发的,由于没有android的基础,所以做起来困难重重. 首先是布局上的困难 1.layout里的控件属性不熟悉 2. ...
-
python 开发在线音乐播放器-简易版
在线音乐播放器,使用python的Tkinter库做了一个界面,感觉这个库使用起来还是挺方便的,音乐的数据来自网易云音乐的一个接口,通过urllib.urlopen模块打开网址,使用Json模块进行数 ...
-
使用Service组件实现简单的音乐播放器功能 --Android基础
1.本例利用Service实现简单的音乐播放功能,下面是效果图.(点击开始播放开启服务,音乐播放,点击“停止播放”关闭服务,音乐停止播放.) 2.核心代码: MusicService.java: pa ...
-
HTML5+CSS3+jquery实现简单的音乐播放器
...最近天热的,感觉就像煎饼...然后别人在把妹子的时候,只有偶们这帮苦逼的程序员在那边撸代码...我日哦! 然后今天晒的是偶早年写的一个播放器...看上去是不是很有感觉的样子!一番宝物,Lisa唱 ...
-
Android课程---简单的音乐播放器
第一个:用Activity实现 activity_music_play1.xml <?xml version="1.0" encoding="utf-8" ...
随机推荐
-
集合(set)-Python3
set 的 remove() 和 discard() 方法介绍. 函数/方法名 等价操作符 说明 所有集合类型 len(s) 集合基数:集合s中元素个数 set([obj]) 可变集合工 ...
-
Vue.js 快速入门
什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐 ...
-
Nagios:企业级系统监控方案
在大多数情况下Cacti + RRDtool已经实现对系统各种参数的监测.但很多企业可能不满足于仅仅监测系统基本参数的需求,而是需要监测除基本参数之外的各种应用程序的运行状况.很显然在这种情况下对于一 ...
-
Flex “跑马灯”效果(自定义“跑马灯”控件)
自定义类(BroadCastMarquee.as): package marquee { import flash.events.MouseEvent; import flash.events.Tim ...
-
修改sublime 侧边栏 颜色 等
通过 Package Control 安装 PackageResourceViewer 插件 安装成功后 快捷键 ctrl+shift+p 输入 PackageResourceViewer 找到 ...
-
第二章排错的工具:调试器Windbg(上)
感谢博主 http://book.51cto.com/art/200711/59731.htm <Windows用户态程序高效排错>第二章主要介绍用户态调试相关的知识和工具.本文主要讲了排 ...
-
POJ 3589 Number-guessing Game(简单题)
[题目简述]:两个四位数,假设后一个数中的某个数与前一个相应的数的位置和值都相等.则统计数目由几个这种数.记为count1吧. 假设后一个数中的某个数与前一个数的数值相等,但位置不同. 此时这种数的个 ...
-
Robotframe work之环境搭建(一)
准备安装如下:Python2.7.10.robot framework3.0.2.wxPython 2.8.12.1.robot framework-ride 1. 官网下载安装python,目前wx ...
-
Qt--自定义View
这是上一篇文章的续篇,关于自定义View. 多个View内部可以映射到同一个数据模型,也可以映射不同的数据结构:可以使用所有数据,也可以只使用部分数据.因为视图层与数据层的分离,操作相对比较灵活. 1 ...
-
精力(power)
[问题描述]假设你有一个属性叫”精力值”, 这个属性的上限为 E, 一开始你的精力值为 E.每天结束时, 该属性会回复 R,但回复后不会超过上限 E. 现在有 N 天时间给你去工作, 若第 i 天花费 ...