JavaScript實作音訊控制進度條

前言：剛學著使用HTML5和CSS和JavaScript做點東西比如作業emmmm但由於自己僅僅是速成的水平所以還是遇到了不少問題，所以決定把網絡上比較難搜到或者難理解的用法記錄下來，留做以後參考，也希望能給遇到相同問題的人一點點參考哈。

這篇部落格主要說的是用JS實現audio的自製簡單進度條以及播放的跳轉和播放時間的改變。起因是我感覺瀏覽器（我用的是火狐）自帶的controls控制不太符合我的頁面風格嗯。

火狐裡面它是這樣的：

##我自己的做完之後是這樣的：

##       

#其實進度條的思路很簡單，首先要有一個總長度，然後在總長的相同起始位置放置一個除了顏色和寬度（width）其他都相同的東西（比如，我這裡就是兩個細長的矩形），然後當音訊播放時，使用setInterval函數，它可按照指定的週期（以毫秒計）來呼叫函數或計算表達式，每隔一秒（或者更小，當然如果這裡不是一秒，之後的計算也要記得改變）按照比例增加一點進度條的長度，這樣從開始時的0到結束時的總長，簡易的進度條就完成了。

關於setInterval方法可以參考這裡

為了實現滑鼠點擊進度條可以改變音訊播放，需要知道滑鼠的座標。大致想法是僅在滑鼠在進度條的p區域上click時才取得滑鼠的座標，因此得到的x座標減去CSS中規定的進度條的起始x座標（進度條的最左邊）就是滑鼠點擊位置距離進度條開頭的長度了，這個長度除以進度條的總長度再乘以audio的總時長，這個結果就是滑鼠點擊的那個位置對應的音訊應該播放的進度，然後使用

音訊的fastSeek函數跳到該時間就可以了。

下面將列出相關的CSS&HTML&JS程式碼，其中的位置和顏色可以隨意定，對JS的使用僅供參考，有些地方為了理解的清楚其實調用的很囉嗦嗯。

程式碼裡提到的其實只要取得滑鼠的x座標就可以了是因為：這裡實現的進度條很簡單，只是橫向的伸長，所以只在x方向上計算就可以了，同理如果是垂直的進度條應該只需要y座標就可以，如果是圓形的進度條可能就要都需要了吧。

以上是JavaScript實作音訊控制進度條的詳細內容。更多資訊請關注PHP中文網其他相關文章！