音乐播放器WebApp有感
前言
花了差不多一周的时间，用html5的新标签audio制作了一个音乐播放器，感觉最多坑的地方在于前期的布局，逻辑代码的规划也很重要。
在布局上填了很多坑，比如资源税浮动父元素没了高度，用clear也解决不了，不得不利用js设置父的高度等之类的，发现布局也有大学问，这一点要注重。
第二点就是代码规划，因为刚学了前端js的MVC框架（将控制逻辑，模型，视图的js划分开），所以想尝试，在项目里我的mvc框架为：
- controller/appController.js 控制器总开关，程序的入 口，将controllers连接起来
- controller/playerController.js 播放器的控制器
- view/pageStyle.js 页面样式的改变逻辑
- view/scale.js 进度条对象
- songs.js 全局的songs模型
结合面向对象的方法，我在点击播放器按钮的时候，进度条，图片旋转和audio同时开始工作，所以把他们捆绑起来会比较好。
下面就这个项目里一些零散的知识点做些记录，以便一下使用。
圣杯布局
圣杯布局是三栏布局的经典布局方式，两侧固定宽度中间自适应。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40<div class="both">
<div class="middle">中间</div> //优先加载
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<style>
.box{
padding-left: 250px; //关键
padding-right: 250px; //关键
line-height: 200px;
text-align: center;
color: #fff;
}
.box:before,.box:after{ //伪类清除浮动，父元素有高度
content: '.';
display: block;
clear: both;
height: 0；
visibility: hidden; //元素不可见,但占据空间
}
.middle,.left,.right{
float: left;
height: 200px;
}
.middle{
width: 100%;
background-color: red;
}
.left{
width: 250px;
background-color: blue;
margin-left: -250px; //关键
}
.right{
width: 250px;
background-color: yellow;
margin-right: -250px; //关键
}
</style>
三栏布局的另一经典是双飞翼布局，原理是middlediv下内嵌类为inner的div，利用inner的margin-left和margin-right。左右侧栏div分别float左右。
另一种方法是利用定位：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 <style>
body{margin:0; padding:0;}
#left{float:left;width:150px;background:red;}
#right{float:right;width:200px;background:green;}
#middle{
position:absolute; //关键
left:150px;
right:200px;
word-wrap:break-word; //让字体打断，不会超出div
background:blue;
}
</style>
<div id="middle">
middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;
middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;
</div>
<div id="left">left</div>
<div id="right">right</div>
关于布局，还有很多种，请参考：
http://blog.csdn.net/andiqu/article/details/50045609
关注弹性布局（flex），和rem
animition的播放和暂停
1 | -webkit-animation-play-state: running | paused |
1 | animation-fill-mode: backwards | forwards | both; //播放前显示动画第一帧，播放完显示动画的最后一帧，向前和向后模式都被应用 |
进度条的制作
1 | <ul id="lanren"> |
播放按钮的制作和发光动画
1 | <div class="playContainer"> |
URI编码
url里的中文服务器是识别不了的，要经过URI编码成Unicode编码，统一资源标识符，浏览器才能准确的找到资源。1
2
3
4
5encodeURI("春节") //%DD%DD%DD
decodeURI("%DD%DD%DD") //解码：春节
相同：
escape()
unescape()
ajax跨域
不涉及后台的跨域，直接用ajax发http请求：
https://bird.ioliu.cn/#interface
其他的跨域都要设计到后台
与jsonp有关
QQ音乐的API
1 | songsAPI = http://s.music.qq.com/fcgi-bin/music_search_new_platform?t=0&n=10&aggr=1&cr=1&loginUin=0&format=json&inCharset=GB2312&outCharset=utf-8¬ice=0&platform=jqminiframe.json&needNewCode=0&p=1&catZhida=0&remoteplace=sizer.newclient.next_song&w={0} |
计时器
当在页面要多次用到定时器时，可以考虑把它挂载到全局。
当用到多个计时器是可以把它放在一个数组里，方便管理。
百度到的资源
专门说进度条的网站：https://usablica.github.io/progress.js/
js,jq获取div高度：http://www.cnblogs.com/xiaopin/archive/2012/03/26/2418152.html
获取div的margin，border，padding，content的宽高
js控制audio标签：http://blog.csdn.net/u014520745/article/details/52412427