点击图片控制音乐播放及暂停

今天做了一个小案例 ,通过点击页面图片控制音乐的播放及暂停 , 播放某单曲的时候暂停其他单曲的播放, 代码如下 :

 *{margin: 0;padding: 0;}body{background-image:url("img/4.jpg" );background-size: cover;}.box{width: 100%;height: 200px;background: rgba(0,0,0,0.5);position: absolute;display: none;}.box ul{width: 1000px;height: 100px;margin: 50px auto;}.box ul li{list-style: none;width: 160px;height: 100px;float: left;margin-right:30px;border: 1px solid #fff;}a{width: 50px;height: 50px;background: url("img/6.png");position: absolute;right: 0;}a:hover{background-position:0 -64px;}
    
 
 
 
  

知识点整理 :

background-size: length|percentage|cover|contain(css3新推出的标签属性)

1 . length


设置背景图像的高度和宽度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。

2 . percentage
以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。
3 . cover
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。

4 . contain

把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

audio(音乐播放标签):

<audio src="文件地址" loop="loop" autoplay="autoplay></audio>

控制函数功能说明:

• load()   加载音频、视频软件，通常不必调用，除非是动态生成的元素，用来在播放前预加载
• play()    加载并播放音频、视频文件，除非文件已经暂停在其他位置，否则默认重头开始播放
• pause() 暂停处于播放状态的音频、视频文件

只读属性属性说明

• duration   获取媒体文件的播放时长，以s为单位，如果无法获取，则为NaN
• paused     如果媒体文件被暂停，则返回true，否则返回false
• ended       如果媒体文件播放完毕，则返回true
• startTime  返回起始播放时间，一般是0.0，除非是缓冲过的媒体文件，并一部分内容已经不在缓冲区
• error          在发生了错误后返回的错误代码
• currentSrc  以字符串形式返回正在播放或已加载的文件，对应于浏览器在source元素中选择的文件

audio 可脚本控制的特性值：

• autoplay       自动播放已经加载的的媒体文件，或查询是否已设置为autoplay
• loop              将媒体文件设置为循环播放，或查询是否已设置为loop
• currentTime 以s为单位返回从开始播放到目前所花的时间，也可设置currentTime的值来跳转到特定位置
• controls        显示或者隐藏用户控制界面
  
• volume         在0.0到1.0间设置音量值,或查询当前音量值
• muted           设置是否静音
• autobuffer     媒体文件播放前是否进行缓冲加载，如果设置了autoplay，则忽略此特性

对于这些属性，主流的浏览器都支持。可是别以为就没有了兼容性，在音频播放流中，有两个阵营。firefox 和 opera 支持 ogg 音频，safari 和 ie 支持 mp3.幸好Google的chrome都支持。

我是新手 , 代码很臃余 , 望大神多加指点 !