js實(shí)現(xiàn)音樂(lè)播放控制條

前言

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

Audio實(shí)現(xiàn)思路

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

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

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

• 音樂(lè)播放（最基本的）
• 多首音樂(lè)的手動(dòng)切換以及自動(dòng)切換實(shí)現(xiàn)循環(huán)播放
• 進(jìn)度條點(diǎn)擊播放進(jìn)度的改變
• 進(jìn)度條拖動(dòng)播放進(jìn)度的改變
• 音量點(diǎn)擊改變
• 音量拖動(dòng)改變
  

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

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

整體

整個(gè)音樂(lè)播放的控制底層還是采用瀏覽器audio標(biāo)簽來(lái)實(shí)現(xiàn)，調(diào)用audio api來(lái)實(shí)現(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：是時(shí)間以及歌曲進(jìn)度的區(qū)域
audio-volume：是音量調(diào)節(jié)的區(qū)域

播放區(qū)域

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

進(jìn)度區(qū)域

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

• 進(jìn)度效果實(shí)現(xiàn)
• 滑動(dòng)效果實(shí)現(xiàn)
  

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

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

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

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

滑動(dòng)的實(shí)現(xiàn)，在該模塊編寫(xiě)中沒(méi)有采用html5中的拖放api，而是采用mousedown、mousemove、mouseup來(lái)實(shí)現(xiàn)的，具體

實(shí)現(xiàn)代碼：

 // 滑動(dòng)效果
 bar.addEventListener('mousedown', function(e) {
 e.stopPropagation();
 // 獲取滑塊被選擇時(shí)相對(duì)文檔的初始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è)置要滑動(dòng)到的位置點(diǎn)(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) {
  // 繪制此時(shí)的進(jìn)度
  tools.timeUpdateOrVolumeUpdate(options.offsetX, type);
  options.isDrag = false;
 }
 });

簡(jiǎn)單來(lái)說(shuō)就是：

mousemove時(shí)獲取當(dāng)前鼠標(biāo)在文檔中的X軸方向位置 - 初始位置 + 元素最初的偏移量，動(dòng)態(tài)改變left的值來(lái)實(shí)現(xiàn)的

進(jìn)度實(shí)際就是div的寬度來(lái)顯示的，動(dòng)態(tài)的改變width的值以及滑塊的left值來(lái)實(shí)現(xiàn)進(jìn)度效果

這里需要注意的是：

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

實(shí)際上這也非常好計(jì)算：

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

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

下面就說(shuō)說(shuō)該模塊中存在的問(wèn)題：

滑塊效果有時(shí)不夠自然順暢
音頻文件時(shí)間的處理不夠好
開(kāi)始時(shí)進(jìn)度部分不是太好

代碼會(huì)上傳到我的Github，該模塊日后還需要進(jìn)行改進(jìn)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。