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 | 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%;