之前做的一個超簡單的 HTML5 Audio 播放器，可是，真的是太簡單了，只有播放按鈕和名字，這回就做一個稍微豐富的 HTML5 音樂播放器，有封面、有進度條、有名稱。有播放時間。其實有想做拖動進度條和音量控制的，不過涉及很多東西了，嫌麻煩就沒有繼續做下去。
這次做這個播放器，想到最無奈的就是將 Audio 返回的秒數轉成時間分鐘顯示，還有就是播放暫停按鈕我不想用圖片而想直接用代碼畫。而其他就很中規中矩的沒什麽問題要想。
直接將之前做的那個播放器拿過來改一下就 OK 了。增加一個封面，有進度條和時間顯示。
<div id="CircadianEyes" class="Music-Box">
<div class="Music-Image">
<img src="images/359167072-1.jpg" alt="A Careful Hope" />
<img class="CD-RE" src="images/CD-re.png" alt="" />
</div>
<div class="Music-Time"><span id="ctime">00:00</span> / <span id="ltime">00:00</span></div>
<div class="Play-Stop">
<div class="Play">
<div class="Play-Botton">
<div>Play</div>
</div>
</div>
<div class="Stop">
<div class="Stop-Botton">
<div class="symbol">Stop</div>
</div>
</div>
</div>
<div class="Precision-Article">
<div class="Play-PA"></div>
<div class="slider"></div>
</div>
<div class="Music-Name">
<a href="http://circadianeyes.bandcamp.com/track/a-careful-hope" target="_blank">Circadian Eyes - A Careful Hope</a>
</div>
<audio id="CircadianEyes-ACarefulHope" onended="ended()">
<source src="audio/CircadianEyes-ACarefulHope.mp3" />
<source src="audio/CircadianEyes-ACarefulHope.ogg" />
</audio>
</div>
而這次用多了兩個事件。而這兩個時間都是返回秒數，而且是小數點後十位。
music.addEventListener("timeupdate", showtime, true);//獲得當前播放時間
music.addEventListener("loadedmetadata", show, true);//獲得音頻總時間
那麽只有秒數怎麽呢？直接輸出就只有一串很長的數，那就只能取整數了，但是幾分鐘的時間有幾百秒，沒理由直接輸出幾百秒吧？那麽就要轉換成我們平時的60秒一分鐘的顯示方式，JS是沒有直接轉換成時間顯示的，那就覺得無奈了，這個應該屬於基本功能怎麽沒有直接轉換呢？無奈。那就只能自己轉了。
function show() {
var ltime = parseInt(music.duration);
var lmm = parseInt(ltime/60);
var lss = ltime-lmm*60;
document.getElementById("ltime").innerHTML = (lmm<10?"0":"")+lmm+":"+(lss<10?"0":"")+lss;//顯示音頻總時間
}
我這個方法很傻但是很直觀。取整數除以60得出當前的分鐘，之後秒數減去分鐘乘以60就得秒數。管他，答案一樣就得了。
而進度條也是差不多方法實現，用比例算出進度條長度。
function showtime() {
var ctime = parseInt(music.currentTime);
var cmm = parseInt(ctime/60);
var css = ctime-cmm*60;
document.getElementById("ctime").innerHTML = (cmm<10?"0":"")+cmm+":"+(css<10?"0":"")+css;//當前播放時間
$("#CircadianEyes > .Precision-Article > .Play-PA").css("width", music.currentTime/music.duration*300);//進度條，當前時間除以總時間乘以精度條總長
$(".slider").css("left", music.currentTime/music.duration*300);//進度條滑塊
}
至於滑塊，沒找到簡單的方法實現就不做了。
要怎麽才能算簡單？幾句代碼就OK才叫簡單啊，那些一堆堆的代碼寫出來的或者對於資深工程師可謂簡單極了，但是對於一般人，那一堆東西眼花了。
至於播放器的外觀，我希望的是最簡單的。當然，細節一定要有，不過這回就做什麽細節。
鼠標經過顯示所有元素，全部都是用50%透明的黑色作為底色。頂部是淡藍進度條，右邊的是時間，下方是歌曲名字以及連接。可謂之簡單，代碼也一樣的簡單。
其實播放和暫停按鈕開始時候我是想用 canvas 畫的，不過根本就找不到一個像樣的教程和說明，因為懂之人覺得簡單自然寫教程寫得簡單，而懂之人根本不知道其寫內容。
最後我則用最簡單的 div 邊框繪制。外面的圓形直接用 border-radius ，而暫停按鈕最簡單，就用左右邊線。
播放按鈕不同了，一樣是用邊線，但是要用三個邊線，上、下、左三邊。
.Play-Botton div {
width: 0px;
height: 0px;
border-width: 20px 0px 20px 30px;
margin: 0 2px 0 8px;
border-style: solid;
border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0.5);
}
將除左邊線以外的三邊都設置成透明，那樣就只剩下左邊的邊線顯示，而由於邊線與邊線之間是有一個斜邊的，就利用這個斜邊實現三角形斜邊。
我這個播放器雖然不是最高效，不過算是最直白了，即使不會JS的人也很容易就看懂當中的JS原理。