過去在網(wǎng)頁上播放聲音一般使用wmp（windows media player）控件筐付，但是wmp控件提供的js接口非常有限泞辐，更致命的是IE only。如果不想接受wmp的界面厂镇，又或者想要跨平臺铃芦，只能借助于flash了⊙拍鳎現(xiàn)在html5標(biāo)準(zhǔn)已經(jīng)原生支持音頻播放，并且各大瀏覽器都不同程度地實現(xiàn)了刃滓。
要做一個最簡單的播放器仁烹，我們首先需要一些可操作的元素，譬如：一個播放按鈕咧虎、一個播放進(jìn)度條卓缰、一個音量進(jìn)度條
<div id="container">
<div id="title"></div>
<div id="time"></div>
<input id="range" type="range" min="0" max="1" step="any" value="0" />
<a id="play" class="button" href="###"></a>
音量:<input id="volume" type="range" min="0" max="1" step="any" value="0.5" />
</div>
其中的input[type=range]是html5新增的表單控件，后續(xù)可以在自定義UI的時候替換掉砰诵，不在本文探討之列征唬。
回到正題，dom準(zhǔn)備好了茁彭，可以初始化音頻了总寒。在html5里，音頻資源可以用audio標(biāo)簽插入理肺，這里沒有直接寫到html里摄闸，一則是因為需要判斷瀏覽器是否支持，二則是寫在html里的audio標(biāo)簽必須帶有src屬性妹萨，這樣就不能達(dá)到先綁定事件年枕，后加載的目的。要通過js創(chuàng)建audio對象乎完，可以使用new Audio()画切，就像new Image()一樣。判斷瀏覽器是否支持播放mp3囱怕，可以使用以下條件：
window['Audio'] && (new Audio()).canPlayType('audio/mpeg')
“audio/mpeg”是mp3的MINE type，canPlayType有三個可能的返回值：probably毫别、maybe娃弓、空字符串，代表的情況跟字母意思一樣岛宦，空字符串對應(yīng)不支持的格式台丛。不過就我看來，瀏覽器還是相當(dāng)謹(jǐn)慎，到目前為止挽霉，我還沒見過它說“probably”防嗡，而總是羞澀地返回“maybe”。
對象創(chuàng)建好了就要綁定事件了,我們需要對以下事件進(jìn)行偵聽：
- canplay —— 媒體文件加載到能夠開始播放
- play —— 將要開始播放
- pause —— 媒體暫停播放
- ended —— 播放到媒體末尾
- error —— 在加載過程中發(fā)生錯誤
- timeupdate —— 播放位置發(fā)生變化侠坎，包括正常播放和手動改變播放進(jìn)度
綁定完事件蚁趁，就可以加載mp3了，這里非常簡單实胸，直接對audio對象的src賦值就可以了他嫡。大部分瀏覽器在改變src之后會自動加載新的音頻文件（標(biāo)準(zhǔn)也是這樣規(guī)定的），但是如果你想兼容mobileSafari庐完，你還需要手動調(diào)用audio對象的load方法钢属。
說得差不多了,直接看代碼和demo吧：
function initAudio(){
var _audio;
if(audioEl){ return; } //如果存在,說明已經(jīng)初始化
if(window['Audio'] && (_audio=new Audio()).canPlayType('audio/mpeg')){
_audio.addEventListener('canplay',onCanPlay,false);
_audio.addEventListener('play',onPlay,false);
_audio.addEventListener('pause',onPause,false);
_audio.addEventListener('ended',onEnded,false);
_audio.addEventListener('error',onError,false);
_audio.addEventListener('timeupdate',onTimeUpdate,false);
_audio.volume=0.5;
document.getElementById('container').appendChild(_audio);
audioEl=_audio;
titleEl=document.getElementById('title');
timeEl=document.getElementById('time');
rangeEl=document.getElementById('range');
playEl=document.getElementById('play');
volumeEl=document.getElementById('volume');
volumeEl.addEventListener('change',onVolumeChange,false);
rangeEl.addEventListener('change',onRangeChange,false);
playEl.addEventListener('click',onPlayButtonClick,false);
}else{
alert('Oops, nice browser.');
return;
}
}
function loadAudio(url,title){
if(!audioEl){ return; }
var name=title || url.replace(/^.*\//,'').replace(/[#\?].*$/,'') || 'Unknown';
titleEl.innerHTML=name;
rangeEl.value=0;
rangeEl.disabled=true;
timeEl.innerHTML='--:-- / --:--';
playEl.innerHTML='加載中';
audioEl.autoplay=true;
audioEl.src=url;
//audioEl.load();
}
function onCanPlay(){
rangeEl.disabled=false;
}
function onPlay(){
playEl.innerHTML='暫停';
}
function onPause(){
playEl.innerHTML='播放';
}
function onEnded(){
audioEl.pause();
audioEl.currentTime=0;
}
function onError(){
rangeEl.disabled=true;
titleEl.innerHTML='<span style="color:red">加載錯誤:'+titleEl.innerHTML+'</span>';
playEl.innerHTML='已停止';
}
function onTimeUpdate(){
var pos=audioEl.currentTime,
dora=audioEl.duration;
timeEl.innerHTML=formatTime(pos)+' / '+formatTime(dora);
//console.info(pos,dora);
if(isFinite(dora) && dora>0){
rangeEl.value=pos/dora;
}
}
function onVolumeChange(){
if(!audioEl){ return; }
audioEl.volume=volumeEl.value;
}
function onRangeChange(){
if(!audioEl){ return; }
var buf=audioEl.buffered.length?audioEl.buffered.end(0):0,
dora=audioEl.duration;
if(isFinite(dora) && dora>0){
var value=rangeEl.value,
pos=value*dora;
if(pos>buf){
pos=buf;
}
audioEl.currentTime=pos;
}
}
function onPlayButtonClick(){
if(!audioEl){ return; }
if(audioEl.error){ //加載錯誤
return;
}else if(audioEl.readyState<2){ //還沒可以播放
audioEl.autoplay^=true; //切換是否autoplay
}else if(audioEl.paused){
audioEl.play();
}else{
audioEl.pause();
}
}
轉(zhuǎn)載自AlloyTeam：http://www.alloyteam.com/2011/10/html5-player-part1/
