HTML5 的 Video and Audio APIs(音樂與影片控制)

在 HTML5 普及後，目前控制網頁上的音樂或影片就不需要靠其他外掛(像是 flash)，我們可以透過 HTML5 的 Audio API 來實現，首先我們準備如下的 html。

接著我們可以透過 .play() 和 .pause() 等來控制音樂的播放

var myMusic = document.querySelector('#audio')
    function playMusic(){
        myMusic.play()
    }
    function pauseMusic(){
        myMusic.pause()
    }
    function stopMusic(){
        myMusic.pause()
        myMusic.currentTime=0;
    }

這邊透過 input 的 range 來抓到值後轉換成音量，volume 的值為 0~1

var volume = document.getElementById('volume');
    volume.addEventListener('change', function(){
        myMusic.volume = parseFloat(this.value / 10);
    }, false);

我們還可以透過 timeupdate 的事件和 currentTime 以及 duration 的關係來更新音樂播放進度

myMusic.addEventListener("timeupdate", function() {
        //目前播放時間  audio.currentTime
        //整首歌的長度 audio.duration
        let percent= Math.ceil( (audio.currentTime / audio.duration)*100 )+"%";
        $(".progress-bar-con").css("width", percent)
    }, false);

不過這邊要抓 duration 會有一點時間差的問題，我們像這樣抓 loadedmetadata 的事件會比較好。

audio.addEventListener('loadedmetadata',function() {
            // get audio.duration
});

如果要製作音樂播放器，則可以透過 audio.setAttribute("src",audioUrl) 來切換播放的音樂的網址，另外也可透過 ended 事件去抓到音樂播放結束後跳到下一首歌的功能。

Video 的控制大致上跟 Audio 大同小異，我們可以準備如下的 HTML

記得把 video 的網址替換成你要播放的影片檔名，video 比起 audio 多了 poster 可以自訂影片還沒播放時的畫面，video 裡面的 source 標籤則是為避免瀏覽器不支援某種影片格式可以多放幾個讓瀏覽器去抓支援的格式，目前的話用 mp4 應該所有瀏覽器都可以支援了。

需要再提的是 video 還支援字幕，我們透過 track 標籤可以指定影片的字幕，要設定字幕檔只要開啟文字編輯器存檔時把副檔名設為 .vtt，並把格式設為 utf-8，後面的 srclang 可以設定切換字幕時顯示的內容，加上 default 則是設定預設字幕。

字幕檔的內容如下，把純文字內容用以下的格式編輯即可：

WEBVTT

1
00:00:00.000 --> 00:00:05.000
video begin

2.
00:00:12.000 --> 00:00:16.000
hello world

3.
00:00:20.000 --> 00:00:24.000
bye bye

處理影片播放簡單，但如果要放片長比較長或畫質好的影片，就要考慮使用串流影音了，但在頁面上控制簡單的小短片用 Video and Audio APIs 是很方便的。

完整的 Api 說明可以看這邊