前言

html5中提供audio標簽, 該標簽實現(xiàn)音頻的播放，之前就一直對于音頻以及視頻播放比較感興趣，一直想要自己實現(xiàn)一個音頻和視頻播放的模塊，這也是本文章撰寫的初衷，最近花了些時間實現(xiàn)了Audio播放控制條，從這個小的模塊實現(xiàn)也學(xué)習(xí)到了以前沒有接觸到的知識。

Audio實現(xiàn)思路

瀏覽器原生提供的audio的樣式比較簡單而且不是太好看，原生提供的樣式如下：

自實現(xiàn)的音樂播放控制條, 效果如下：

該音樂播放控制條實現(xiàn)的功能如下：

• 音樂播放（最基本的）
• 多首音樂的手動切換以及自動切換實現(xiàn)循環(huán)播放
• 進度條點擊播放進度的改變
• 進度條拖動播放進度的改變
• 音量點擊改變
• 音量拖動改變
  

具體的實現(xiàn)效果：

下面就具體功能的實現(xiàn)具體展開，實現(xiàn)的音樂播放控制進度條主要是學(xué)習(xí)使用，沒有考慮兼容性，下面主要講解每個功能的實現(xiàn)思路：

整體

整個音樂播放的控制底層還是采用瀏覽器audio標簽來實現(xiàn)，調(diào)用audio api來實現(xiàn)整體的功能，下面是當(dāng)前控制條的html結(jié)構(gòu)：

<div class="audio">
 <audio></audio>
 <div class="audio-controller">
 <span class="audio-prev"></span>
 <span class="audio-state"></span>
 <span class="audio-next"></span>
 </div>
 <div class="audio-bar">
 <span class="audio-time-current"></span>
 <div class="audio-progress">
  <div>
  <div></div>
  <div></div>
  </div>
  </div>
 <span class="audio-time-duration"></span>
 </div>
 <div class="audio-volume">
 <span class="audio-volume-icon"></span>
 <div class="audio-volume-adjust">
  <div>
  <div></div>
  <div></div>
  </div>
 </div>
 </div>
</div>

audio-controller：是控制播放以及切換歌曲的區(qū)域
audio-bar：是時間以及歌曲進度的區(qū)域
audio-volume：是音量調(diào)節(jié)的區(qū)域

播放區(qū)域

該區(qū)域?qū)崿F(xiàn)音樂的播放、暫停、切換（上一首、下一首）,這部分其實沒有什么需要講解的，實際上就是audio api中play()、pause()來實現(xiàn)播放與暫停的，歌曲的切換就是數(shù)組元素的改變，修改src地址而已。

進度區(qū)域

該區(qū)域是整個模塊中核心的部分，該區(qū)域主要的功能點是：

• 進度效果實現(xiàn)
• 滑動效果實現(xiàn)
  

首先進度實現(xiàn)，思路是：

1.進度條有兩個div構(gòu)成：

// 最外層作為進度條暗的長度區(qū)域
<div>
 // 最內(nèi)層是實際表示進度
 <div></div>
</div>

2.當(dāng)點擊進度條，獲取鼠標點擊該點的相對于最近的父類元素的x軸方向的偏移量
3.偏移量就是內(nèi)層div的實際寬度，設(shè)置背景色
4.滑塊的位置是設(shè)置left的值，但是left的值是：偏移量-滑塊寬度/2

滑動的實現(xiàn)，在該模塊編寫中沒有采用html5中的拖放api，而是采用mousedown、mousemove、mouseup來實現(xiàn)的，具體

實現(xiàn)代碼：

 // 滑動效果
 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,
  // 設(shè)置要滑動到的位置點(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時獲取當(dāng)前鼠標在文檔中的X軸方向位置 - 初始位置 + 元素最初的偏移量，動態(tài)改變left的值來實現(xiàn)的

進度實際就是div的寬度來顯示的，動態(tài)的改變width的值以及滑塊的left值來實現(xiàn)進度效果

這里需要注意的是：

當(dāng)前進度條總寬度與音頻總時間之間的比例關(guān)系，從而計算不同音頻時間點對應(yīng)的進度的長度，這是基礎(chǔ)

實際上這也非常好計算：

比例：width / duration
指定時間的寬度：(width / duration) * currentTime

音量調(diào)節(jié)的實現(xiàn)與進度相似，主要是改變volume的實現(xiàn)。

下面就說說該模塊中存在的問題：

滑塊效果有時不夠自然順暢
音頻文件時間的處理不夠好
開始時進度部分不是太好

代碼會上傳到我的Github，該模塊日后還需要進行改進。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論