寒假即將結(jié)束，不巧膝蓋突然中了一箭，便決定實(shí)驗(yàn) HTML5?
audio
標(biāo)籤的效果，雖然已有?
jPlayer
?這款輕便好用的播放器，但不折騰一下就沒(méi)辦法消磨時(shí)間了，所以本次的實(shí)驗(yàn)品完全由我操刀。
開始之前
首先必須了解
audio
標(biāo)籤的使用方式：
|
1
2
3
4
|
<audio controls>
<source src="music.mp3">
<source src="music.ogg">
</audio>
|
輸入以上代碼後，便可在網(wǎng)頁(yè)中看到瀏覽器內(nèi)建的播放器。每種瀏覽器支援的播放類型不一，最保險(xiǎn)的方法是備妥
mp3
、
ogg
。
為了浪費(fèi)時(shí)間，當(dāng)然不可能用瀏覽器的預(yù)設(shè)介面，所以刪除
controls
屬性，透過(guò) JavaScript 操作：
|
1
2
3
4
5
|
var
audio = document.getElementsByTagName(
'audio'
)[
0
];
audio.play();
audio.pause();
|
只需要懂這兩個(gè)函數(shù)，就可製作最基礎(chǔ)的播放器了，其他複雜的指令可參閱文末的參考出處。
介面
寫網(wǎng)頁(yè)時(shí)，比起最重要的 JavaScript，我習(xí)慣先寫 CSS，最初的參考範(fàn)本是 Mac 的?
CoverFlow
。
經(jīng)過(guò)一連串絞盡腦汁，寫了一堆亂七八糟的 CSS 之後，成品如下。
無(wú)論是倒影、中間的圓圈進(jìn)度表都與?
CoverFlow
?非常相像，但這種樣式實(shí)在?
太麻煩了
?不便使用者操作，所以從?
Premium Pixels
?偷點(diǎn)子過(guò)來(lái)，稍微加油添醋一下，完成了播放器介面 Ver. 2。
Ver.2 與 Ver.1 完全不像？這種事情不重要啦！
核心
介面完成自爽一下之後，就得面對(duì)麻煩的 JavaScript 了，播放、暫停非常簡(jiǎn)單，按鈕按下去執(zhí)行鄉(xiāng)對(duì)應(yīng)的動(dòng)作即可，然而音量調(diào)整與進(jìn)度條該如何處理呢？
雖然本次的重點(diǎn)是
消磨時(shí)間
，但再去造一個(gè)輪子實(shí)在他媽的太累了，於是?
聰明如我
?請(qǐng)到了?
jQuery UI
，Slider 功能壓縮後需要約 20KB 的空間，有點(diǎn)龐大不過(guò)方便就好。
時(shí)間的控制方式如下，單位為秒數(shù)，例如跳至第 100 秒的位置：
|
1
|
audio.currentTime =
100
;
|
音量的控制方式如下，範(fàn)圍為 0~1，例如將音量調(diào)整至一半大小：
audio
可綁定
play
,?
pause
,?
ended
,?
progress
,?
canplay
,?
timeupdate
等事件。
play
與
pause
如字面上意思，分別為播放、暫停後生效。
|
1
2
3
4
5
6
7
|
audio.addEventListener(
'play'
,
function
(){
play.title =
'pause'
;
},
false
);
audio.addEventListener(
'pause'
,
function
(){
play.title =
'play'
;
},
false
);
|
ended
為結(jié)束後生效，當(dāng)音樂(lè)結(jié)束後，可透過(guò)此事件讓時(shí)間歸零。
|
1
2
3
|
audio.addEventListener(
'ended'
,
function
(){
this
.currentTime =
0
;
},
false
);
|
當(dāng)音樂(lè)檔案開始載入後，便會(huì)啟動(dòng)
progress
事件，可透過(guò)此事件監(jiān)測(cè)下載進(jìn)度。Firefox 可能會(huì)發(fā)生問(wèn)題，建議搭配
durationchange
事件使用。
|
1
2
3
4
|
audio.addEventListener(
'progress'
,
function
(){
var
endVal =
this
.seekable &&
this
.seekable.length ?
this
.seekable.end(
0
) :
0
;
buffer.style.width = (
100
/ (
this
.duration ||
1
) * endVal) +
'%'
;
},
false
);
|
當(dāng)音樂(lè)下載到一定程度後，
canplay
事件便會(huì)生效，一般會(huì)透過(guò)此事件初始化播放器。相同類型的事件還有很多，依照啟動(dòng)順序分別為：
loadstart
,?
durationchange
,?
loadeddata
,?
progress
,?
canplay
,?
canplaythrough
。
timeupdate
會(huì)在音樂(lè)播放時(shí)不斷生效，可透過(guò)此事件更新時(shí)間。
|
1
2
3
|
audio.addEventListener(
'timeupdate'
,
function
(){
progress.style.width = (
this
.currentTime /
this
.duration) *
100
+
'%'
;
},
false
);
|
播放列表
一個(gè)播放器的基礎(chǔ)功能就此完成，能夠播放、暫停、調(diào)整音量、調(diào)整時(shí)間。但這顯然還不夠，播放列表對(duì)於播放器而言相當(dāng)重要。
（大概啦）
不要吐槽為啥播放列表裡全是動(dòng)漫歌，林北就是宅啦...
與自己的邏輯奮戰(zhàn)大約一晚後，有播放列表、隨機(jī)播放、重複播放（單首、全部）功能的播放器於焉完成。只需要 214 行、約 6KB 的代碼
（未壓縮）
即可完成，應(yīng)該能算是輕便簡(jiǎn)易了。
後記
播放列表的製作過(guò)程有點(diǎn)髒，中途還重構(gòu)了幾次，所以直接看範(fàn)例應(yīng)該會(huì)比較快，若對(duì)於範(fàn)例內(nèi)的程式碼感到疑惑，可在下方留言。
範(fàn)例內(nèi)已設(shè)定了一些參數(shù)，可在
js/script.js
內(nèi)更改。第 5 行的
continous
參數(shù)為連續(xù)播放，第 6 行的
autoplay
參數(shù)為自動(dòng)播放，第 7 行的
playlist
陣列請(qǐng)自行設(shè)定，壓縮檔內(nèi)
不會(huì)
附帶範(fàn)例內(nèi)的音樂(lè)檔案。
playlist
陣列的格式如下：
|
1
2
3
4
5
6
7
8
9
10
|
var
playlist = [
{
title:
'Tell Your World'
,
artist:
'livetune feat. 初音ミク'
,
album:
'Tell Your World'
,
cover:
'cover/tell_your_world.jpg'
,
mp3:
'music/tell_your_world.mp3'
,
ogg:
'music/tell_your_world.ogg'
}
];
|
title
為標(biāo)題，
artist
為演出者，
album
為專輯名稱，
cover
為專輯封面的路徑，
mp3
、
ogg
分別為音樂(lè)檔案的路徑，建議備妥兩種格式的檔案，
要不然 Firefox 和 Opera 不就只能去死了嗎？
因?yàn)樽龅阶钺犷^腦快爆炸了，懶得做 Flash fallback，
IE 請(qǐng)去死一死吧。
範(fàn)例
｜
下載
參考出處