如何讓音樂播放控制條在js中實現

來源：懂視網責編：小采時間：2020-11-27 20:13:27

如何讓音樂播放控制條在js中實現

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

推薦度：

點擊下載本文 文檔為doc格式

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

播放區域

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

進度區域

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

進度效果實現

滑動效果實現

首先進度實現，思路是：

進度條有兩個p構成：

// 最外層作為進度條暗的長度區域<p> // 最內層是實際表示進度
 <p></p>
</p>

進度條

當點擊進度條，獲取鼠標點擊該點的相對于最近的父類元素的x軸方向的偏移量

偏移量就是內層p的實際寬度，設置背景色

滑塊的位置是設置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的值來實現的

進度實際就是p的寬度來顯示的，動態的改變width的值以及滑塊的left值來實現進度效果

這里需要注意的是：

當前進度條總寬度與音頻總時間之間的比例關系，從而計算不同音頻時間點對應的進度的長度，這是基礎

實際上這也非常好計算：

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

音量調節的實現與進度相似，主要是改變volume的實現。

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

滑塊效果有時不夠自然順暢

音頻文件時間的處理不夠好

開始時進度部分不是太好