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

97 total views, no views today

Hoyo 教你 Web Audio API – 01. 從 HTML5 Tag 開始,讓音樂從網頁播放

Hoyo 教你 Web Audio API 系列目標是教同學如何建立自己的音樂串流平台

  • RWD,跨平台
  • 串流
  • 存取控管,付費內容或是隱私不公開
  • 點一次播放聽一整天
  • 搜尋歌曲,分類、歌手、曲目名稱
  • 錄音

一、拿香跟拜

  1. 在桌面準備一個測試網頁 audio.html
  2. 使用記事本或其他純文字編輯器 (Sublime Text) 開啟 audio.html
  3. 拿香跟拜,或是直接下載 audio

雙擊開啟 audio.html 看到類似這樣的網頁,並且點選播放可以順利聽到音樂就成功了

二、不同的瀏覽器、不同的播放介面

Hoyo 相信大多數的網頁畫面都和上面那張不同,應該比較接近下面這樣

除了畫面長相不同之外還多了下載按鈕,當然也有可能長這樣

為了統一播放介面所以接下來就必須 Hoyo 教你 Web Audio API – 02. 簡易播放介面

80 total views, no views today