HTML5之Audio音频标签学习

HTML5中的新元素标签

src：音频文件路径。
autobuffer：设置是否在页面加载时自动缓冲音频。
autoplay：设置音频是否自动播放。
loop：设置音频是否要循环播放。
controls：属性供添加播放、暂停和音量控件。

这些属性和<video>元素标签的属性很类似

如何工作

<audio src="song.mp3"></audio>

同样 <audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的：

<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>

常用的控制函数：

load()：加载音频、视频软件
play()：加载并播放音频、视频文件或重新播放暂停的的音频、视频
pause()：暂停出于播放状态的音频、视频文件
canPlayType(obj)：测试是否支持给定的Mini类型的文件

只读的媒体属性：

duration获取媒体文件的播放时长，以s为单位，如果无法获取，则为NaN
paused如果媒体文件被暂停，则返回true，否则返回false
ended如果媒体文件播放完毕，则返回true
startTime返回起始播放时间
error返回错误代码
currentSrc以字符串形式返回正在播放或已加载的文件

可脚本控制的属性值：

autoplay：自动播放已经加载的的媒体文件
loop为true：的时候则设定为自动播放
currentTime：以s为单位返回从开始播放到目前所花的时间
controls：显示或者隐藏用户控制界面
volume：音量值,从0.0至1.0之间
muted：设置是否静音
autobuffer：是否进行缓冲加载

"我"的成长独白 ESTELLE\'S AUDIO PLAYER

首先，先介绍一下"我"自己，和你一样，我也是有生命的个体，但 (ke) 是 (xi) ，我比你更有灵性 [ 傲娇 ]

audio.html

<body>

<audio id=\'audio\'>你的浏览器不支持喔！</audio>

<div class=\'MusicPanel\'>
<div class=\'PanelLeft\'><div class=\'circle\'><span class=\'icon glyphicon-heart\'></span></div></div> <!-- Like Button -->

<div class=\'PanelRight\'>
<div class=\'Prev\'><span class=\'icon glyphicon-step-backward\'></span></div> <!-- Prev Song Button -->
<div id=\'Play\' class=\'Play\'><span class=\'icon glyphicon-play\'></span></div> <!-- Play & Pause Button -->
<div class=\'Next\'><span class=\'icon glyphicon-step-forward\'></span></div> <!-- Next Song Button -->
<div class="Song"><span class=\'SongAuthor\'>Greyson Chance</span></br><span class=\'SongName\'>Summertrain</span></div> <!-- Song Title -->

<div class="Process"> <!-- Process -->
<div class="ProcessAll" ></div> <!-- ProcessAll -->
<div class="ProcessNow"></div> <!-- ProcessNow -->
<div class="SongTime">00:00&nbsp;|&nbsp;00:00</div> <!-- Time -->
</div> <!-- Process End -->
</div> <!-- PanelRight End -->
</div> <!-- MusicPanel End -->

</body>

进度条逻辑

绘制两条重叠的进度条，一条指示总进度 ProcessAll，另一条指示已播放的进度 ProcessNow
根据已播放的时间占总时间比，设置 ProcessNow 下 Width 的值，根据CSS的层叠规范，后写的 ProcessNow 的颜色层在最高层

详见 audio.JS 函数 TimeSpan()

其次，我不能不穿衣服呀，我需要一件合适的袈裟，人见人爱，花见花开，车见车那啥儿，嘿嘿

audio.css

.MusicPanel{
    width: 400px;
    height: 100px;
    margin: 0 auto;
    border:1px solid #76dba3;
}
.MusicPanel .PanelLeft{
    width: 100px;
    height: 100px;
    display: inline-block;
    text-align: center;
    background: #76dba3;
}
.MusicPanel .PanelRight{
    width: 260px;
    height: 80px;
    display: inline-block;
    padding: 10px 20px;
    position: absolute;
    background: #fdfef6;
}
.Prev,.Play,.Next{
    display: inline-block;
    margin-right: 5px;
}
.Prev,.Next{
    filter:alpha(opacity=30); 
    -moz-opacity:0.3; 
    opacity:0.3;
    cursor: not-allowed;
}
.Prev:hover,.Next:hover{
    filter:alpha(opacity=30); 
    -moz-opacity:0.3; 
    opacity:0.3;
    cursor: not-allowed;
}
.Song{
    display: inline-block;
    padding-left: 15px;
}
.SongTime{
    float: right;
    font-family: cursive,microsoft Yahei;
    font-size: 14px;
    color:#ee8a87;
}
.Song:hover{
    cursor: default;
}
.SongAuthor{
    font-family: cursive,microsoft Yahei;
    color:#ee8a87;
    font-size: 18px;
}
.SongName{
    font-family: cursive,microsoft Yahei;
    color:#ee8a87;
    font-size: 13px;
}
.PanelRight .icon{
    display: inline-block;
    color:#f06d6a;
    font-size:22px;
    transition:0.3s;
}
.PanelRight .Play .icon:hover {
    cursor: pointer;
    color: #dd2924;
}

.PanelLeft .circle{
    width: 40px;
    height: 40px;
    display: inline-block;
    margin-top: 30%;
    line-height: 40px;
    border-radius: 50%; 
    border:1px solid white;
    transition: