js實現音樂播放控制條

2019-11-19 15:30:24

字體：大中小

來源：轉載

供稿：網友

前言

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

Audio實現思路

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

原生控制條

自實現的音樂播放控制條, 效果如下：

自實現音樂播放控制條

該音樂播放控制條實現的功能如下：

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

具體的實現效果：

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

整體

整個音樂播放的控制底層還是采用瀏覽器audio標簽來實現，調用audio api來實現整體的功能，下面是當前控制條的html結構：

<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：是控制播放以及切換歌曲的區域
audio-bar：是時間以及歌曲進度的區域
audio-volume：是音量調節的區域

播放區域

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

進度區域

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

進度效果實現
滑動效果實現

首先進度實現，思路是：

1.進度條有兩個div構成：

// 最外層作為進度條暗的長度區域<div> // 最內層是實際表示進度 <div></div></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，該模塊日后還需要進行改進。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。