簡介
audio為html5中的新屬性。定義聲音，比如音樂或者其他的音頻流。在ie8（包括）以及更早的版本并不支持。
我的自以為
一直以為自定義樣式，就要添加相應的控制js代碼，所以是望而卻步。此次項目中正好出現了這一題目，而jacques同學則完美的呈現了這個音頻效果。so決定學習一下，并且記錄一下，有理解錯誤或者不能理解的地方還希望jacques給指教一下。
樣式
audio默認提供一個控制面板，這個控制面板則可以由我們自己來定義其顯示狀態
html代碼
<div class="Audio">
<audio id="audioTag" src="http://cdn.xxtao.com/cms/audio/yesterday once more.mp3" ></audio>
<div class="pgs">
<div class="pgs-play" id="progress" style="width: 20%;"></div>
<img src="images/progress.png">
</div>
<div class="controls">
<span class="played-time">00:00</span>
<button class="play-pause" id="playPause">
<span class="icon-btn icon-play"></span>
</button>
<span class="audio-time" id="audioTime">0</span>
</div>
</div>
css代碼
.Audio{position: relative; width: 500px; margin: 0 auto;}
.pgs{width: 326px; margin: 0 auto 30px; background-color: #E3E8EE; text-align: center; position: relative; overflow: hidden; height: 35px;}
.pgs-play{position: absolute; top:0; left: 4.65%; width: 0; height: 100%; background-color: #4785f9; z-index: 1;}
.pgs img{width: 100%; position: relative; z-index: 2;}
.audio-name{position: absolute; top: 0; width: 100%; left: 0;text-align: center; color: #666; font-size: 12px;}
.controls{width: 100%; height: 40px; padding: 0; text-align: center;}
.play-pause{border: 0; outline: 0; padding: 0; width: 40px; height: 40px; margin: 0 28px; background: none; display: inline-block; vertical-align: middle;}
.icon-play{width: 40px; height: 40px; background: url(images/play.png) no-repeat; display: block; color: #478f59;}
.icon-pause{width: 40px; height: 40px; background: url(images/pruse.png) no-repeat; display: block; color: #478f59;}
.controls span{color: #b3b5b7; font-size: 12px; display: inline-block; width: 34px;}
.audio-time{display: inline-block; vertical-align: middle;}
呈現的頁面
自定義音頻頁面
html和css上面沒什么太多可說的。進度條那里主要運用的就是position定位，我以為灰色的進度和藍色的進度分別用了兩張圖片，控制藍色圖片的寬度即可。然而我在查看樣式的時候只發現了一張圖片，原來灰色的進度圖片中由灰色的線條組成，每一個組成的豎條都是透明的，因此能透過它下面的背景，設置進度時需要控制下面背景div的寬度。
js（重點來了）
一、首先要獲取元素
var audio = $('#audioTag').get(0);
為什么要加0？因為js操作獲得的是audio對象，jquery獲得的是jquery對象，[0]對象才是對應的節點對象，所以不能直接用jquery對象操作。
二、控制按鈕暫停和播放
pause/play控制按鈕
$('#playPause').click(function(){
//改變暫停/播放icon
if(audio.paused){
audio.play();
$('.icon-btn').removeClass('icon-play').addClass('icon-pause')
} else{
audio.pause();
$('.icon-btn').removeClass('icon-pause').addClass('icon-play')
}
})
paused為音頻的暫停事件，play為音頻的播放事件
三、獲取音頻的總時長
音頻總時長
$('#audioTag').on("loadedmetadata",function () {
//alert(audio.duration)
$('#audioTime').text(transTime(this.duration));
});
！注意：此處的$('#audioTag')加載loadedmetadata事件不需要get(0);
loadedmetadata事件為音頻/視頻文件加載完數據后觸發
duration 獲取音頻的時長，單位為s
transTime為封裝好的一個函數，目的是將秒轉換為幾分幾秒的格式
//轉換音頻時長顯示
function transTime(time) {
var duration = parseInt(time);
var minute = parseInt(duration/60);
var sec = duration%60+'';
var isM0 = ':';
if(minute == 0){
minute = '00';
}else if(minute < 10 ){
minute = '0'+minute;
}
if(sec.length == 1){
sec = '0'+sec;
}
return minute+isM0+sec
}
parseInt(duration/60) 是將秒轉換為整分
duration%60 是取余，也就是整分后剩余的秒
minute+isM0+sec 就是分:秒（02:14）的格式
四、監聽音頻播放時間并更新進度條
進度條和播放時間
audio.addEventListener('timeupdate',updateProgress,false);
timeupdate 事件是在播放位置改變時觸發
updateProgress為封裝好的一個函數，里面處理了進度條的位置和當前播放時間
//更新進度條
function updateProgress() {
var audio =document.getElementsByTagName('audio')[0]; //js獲取的方式
var value = Math.round((Math.floor(audio.currentTime) / Math.floor(audio.duration)) * 100, 0);
$('.pgs-play').css('width', value * 0.907 + '%');
$('.played-time').html(transTime(audio.currentTime));
}
value是由當前時間/總長 再乘以一個100變成百分數
0.907來源：因為進度條的長度和音頻的背景圖片不相同，才有的這么一個比例（進度條div的寬度除以背景img的寬度）。如果他們倆的長度一樣，就直接value就可以。
currentTime 獲得當前播放時間，一般和timeupdate事件聯合使用
五、點擊進度條跳到指定播出位置
var pgsWidth = $('.pgs img').width()*0.907; //此0.907同上一個0.907
$('.pgs img').click(function (e) {
var rate = (e.offsetX - ($(this).width()-pgsWidth)/2)/pgsWidth;
audio.currentTime = audio.duration * rate;
updateProgress();
});
rate 原理待定
六、播放完成
audio.addEventListener('ended',audioEnded,false);
ended 為監聽播放完成事件
audioEnded為封裝好的一個函數，里面處理了置音頻的播放時間等為初始值
//播放完成
function audioEnded() {
var audio =document.getElementsByTagName('audio')[0];
audio.currentTime=0;
audio.pause();
$('.play-pause>span').removeClass('icon-pause').addClass('icon-play');
}
七、至此，js部分全代碼如下：
$(function(){
var audio = $('#audioTag').get(0);
//播放暫停控制
$('#playPause').click(function(){
//監聽音頻播放時間并更新進度條
audio.addEventListener('timeupdate',updateProgress,false);
//監聽播放完成事件
audio.addEventListener('ended',audioEnded,false);
//改變暫停/播放icon
if(audio.paused){
audio.play();
$('.icon-btn').removeClass('icon-play').addClass('icon-pause')
} else{
audio.pause();
$('.icon-btn').removeClass('icon-pause').addClass('icon-play')
}
})
//讀取視頻長度,設置頁面時長顯示-loadedmetadata:指定視頻/音頻（audio/video）的元數據加載后觸發
//audio.duration 獲取音頻的時長，單位為秒
$('#audioTag').on("loadedmetadata",function () {
//alert(audio.duration)
$('#audioTime').text(transTime(this.duration));
});
var pgsWidth = $('.pgs img').width()*0.907; //0.907是 進度條這個div和整個進度條圖片寬度的比例
//點擊進度條跳到指定點播放
$('.pgs img').click(function (e) {
var rate = (e.offsetX - ($(this).width()-pgsWidth)/2)/pgsWidth;
audio.currentTime = audio.duration * rate;
updateProgress();
});
})
//轉換音頻時長顯示
function transTime(time) {
var duration = parseInt(time);
var minute = parseInt(duration/60);
var sec = duration%60+'';
var isM0 = ':';
if(minute == 0){
minute = '00';
}else if(minute < 10 ){
minute = '0'+minute;
}
if(sec.length == 1){
sec = '0'+sec;
}
return minute+isM0+sec
}
//更新進度條
function updateProgress() {
var audio =document.getElementsByTagName('audio')[0];
var value = Math.round((Math.floor(audio.currentTime) / Math.floor(audio.duration)) * 100, 0);
$('.pgs-play').css('width', value * 0.907 + '%');
$('.played-time').html(transTime(audio.currentTime));
}
//播放完成
function audioEnded() {
var audio =document.getElementsByTagName('audio')[0];
audio.currentTime=0;
audio.pause();
$('.play-pause>span').removeClass('icon-pause').addClass('icon-play');
}
End
本文介紹到此結束，其實還有好多別的控制，比如音量大小，快退快進等。原理明白后，一切都好說。有些時候就是這樣，感覺是個龐然大物，其實了解之后并沒有想象的復雜。
