HTML5 Music Player AIR

HTML5 Music player air
之前做的一個超簡單的 HTML5 Audio 播放器,可是,真的是太簡單了,只有播放按鈕和名字,這回就做一個稍微豐富的 HTML5 音樂播放器,有封面、有進度條、有名稱。有播放時間。其實有想做拖動進度條和音量控制的,不過涉及很多東西了,嫌麻煩就沒有繼續做下去。

這次做這個播放器,想到最無奈的就是將 Audio 返回的秒數轉成時間分鐘顯示,還有就是播放暫停按鈕我不想用圖片而想直接用代碼畫。而其他就很中規中矩的沒什麽問題要想。

直接將之前做的那個播放器拿過來改一下就 OK 了。增加一個封面,有進度條和時間顯示。

HTML
<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原理。