前言
html5中提供audio标簽, 該标簽實作音頻的播放，之前就一直對于音頻以及視訊播放比較感興趣，一直想要自己實作一個音頻和視訊播放的子產品，這也是本文章撰寫的初衷，最近花了些時間實作了Audio播放控制條，從這個小的子產品實作也學習到了以前沒有接觸到的知識。
Audio實作思路
浏覽器原生提供的audio的樣式比較簡單而且不是太好看，原生提供的樣式如下：
自實作的音樂播放控制條, 效果如下：
該音樂播放控制條實作的功能如下：
音樂播放(最基本的)
多首音樂的手動切換以及自動切換實作循環播放
進度條點選播放進度的改變
進度條拖動播放進度的改變
音量點選改變
音量拖動改變
具體的實作效果：
下面就具體功能的實作具體展開，實作的音樂播放控制進度條主要是學習使用，沒有考慮相容性，下面主要講解每個功能的實作思路：
整體
整個音樂播放的控制底層還是采用浏覽器audio标簽來實作，調用audio api來實作整體的功能，下面是目前控制條的html結構：
audio-controller：是控制播放以及切換歌曲的區域
audio-bar：是時間以及歌曲進度的區域
audio-volume：是音量調節的區域
播放區域
該區域實作音樂的播放、暫停、切換(上一首、下一首),這部分其實沒有什麼需要講解的，實際上就是audio api中play()、pause()來實作播放與暫停的，歌曲的切換就是數組元素的改變，修改src位址而已。
進度區域
該區域是整個子產品中核心的部分，該區域主要的功能點是：
進度效果實作
滑動效果實作
首先進度實作，思路是：
1.進度條有兩個div構成：
// 最外層作為進度條暗的長度區域
// 最内層是實際表示進度
2.當點選進度條，擷取滑鼠點選該點的相對于最近的父類元素的x軸方向的偏移量
3.偏移量就是内層div的實際寬度，設定背景色
4.滑塊的位置是設定left的值，但是left的值是：偏移量-滑塊寬度/2
滑動的實作，在該子產品編寫中沒有采用html5中的拖放api，而是采用mousedown、mousemove、mouseup來實作的，具體
實作代碼：
// 滑動效果
bar.addEventListener('mousedown', function(e) {
e.stopPropagation();
// 擷取滑塊被選擇時相對文檔的初始X軸值
options.clientX = e.clientX;
// 偏移量
options.left = this.offsetLeft;
options.max = bgNode.offsetWidth - this.offsetWidth / 2;
options.isDrag = true;
});
document.addEventListener('mousemove', function(e) {
e.stopPropagation();
if (options.isDrag) {
let currentClientX = e.clientX,
left = options.left,
max = options.max,
initClientX = options.clientX,
barHalfWidth = bar.offsetWidth / 2,
fgWidth = 0,
// 設定要滑動到的位置點(x軸方向偏移量)
to = Math.max(0, Math.min(max, left + (currentClientX - initClientX)));
bar.style.left = to + 'px';
if (to > barHalfWidth) {
fgWidth = to + barHalfWidth;
}
fgNode.style.width = Math.max(0, fgWidth) + 'px';
options.offsetX = Math.max(0, fgWidth);
}
});
bgNode.parentNode.addEventListener('mouseup', function(e) {
e.stopPropagation();
if (options.isDrag) {
// 繪制此時的進度
tools.timeUpdateOrVolumeUpdate(options.offsetX, type);
options.isDrag = false;
}
});
簡單來說就是：
mousemove時擷取目前滑鼠在文檔中的X軸方向位置 - 初始位置 + 元素最初的偏移量，動态改變left的值來實作的
進度實際就是div的寬度來顯示的，動态的改變width的值以及滑塊的left值來實作進度效果
這裡需要注意的是：
目前進度條總寬度與音頻總時間之間的比例關系，進而計算不同音頻時間點對應的進度的長度，這是基礎
實際上這也非常好計算：
比例：width / duration
指定時間的寬度：(width / duration) * currentTime
音量調節的實作與進度相似，主要是改變volume的實作。
下面就說說該子產品中存在的問題：
滑塊效果有時不夠自然順暢
音頻檔案時間的處理不夠好
開始時進度部分不是太好
代碼會上傳到我的Github，該子產品日後還需要進行改進。
以上就是本文的全部内容，希望對大家的學習有所幫助，也希望大家多多支援腳本之家。