Hoyo 教你 Web Audio API – 02. 簡易播放介面

 

一、使用按鈕控制

現成的檔案在這裡 02_audio

二、滑動控制音量

現成的檔案在這裡 03_audio

音量處理好了,所以進度也可以照樣造句?事情當然沒有這麼單純…

三、播放進度及控制

audio.currentTime即可得到播放進度,例如增加下列程式碼即可多一個查詢進度的按鈕,單位為秒

指定數值即可跳轉,例如增加以下程式碼就可以立刻跳到 30 秒處

目前的進度檔案 04_audio

四、會動的進度條

用功的同學綜合上面了解的資訊可以先嘗試自行做做看,和 Hoyo 一樣偷懶的同學就直接往下看

這裡的坑是,進度本身會動,指定進度就是控制滑軌,可惜兩者會打架,所以播放進度和控制必須分開做,播放進度可以使用 CSS 填色或是也用一個 <input type=”range”>,控制進度當然就是 <input type=”range”>,下面因為懶惰所以就用兩個 range

完成檔案 05_audio

至此對於 <audio> 的基礎控制已經完成,不過實務上使用還是有很多問題,相信同學也有測試出來,例如音樂還沒載入就播放,或是播放中想要上一頁或切換網頁卡住問題,這些後面會講到,不過接下來是美化播放介面,不是用醜醜的按鈕了

發表迴響

你的電子郵件位址並不會被公開。