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

前言

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

Audio實現想法

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

自實現的音樂播放控制條, 如何讓音樂播放控制條在js實現如下：

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

• 音樂播放（最基本的）

• 多首音樂的手動切換以及自動切換實現循環播放

• #進度條點擊播放進度的改變

• 進度條拖曳播放進度的改變

• 音量點擊改變

• 音量拖曳改變

具體的實現如何讓音樂播放控制條在js實現：

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

整體

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

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

audio-controller：是控製播放以及切換歌曲的區域
 audio-bar：是時間以及歌曲進度的區域
audio-volume：是音量調節的區域

播放區域

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

進度區域

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

• 進度如何讓音樂播放控制條在js實現實現

• 滑動如何讓音樂播放控制條在js實現實現

首先進度實現，想法是：

• 進度條有兩個p構成：

// 最外层作为如何讓音樂播放控制條在js實現暗的长度区域<p>    // 最内层是实际表示进度
    <p></p>
</p>

• #當點擊進度條，取得滑鼠點選該點的相對於最近的父類別元素的x軸方向的偏移量

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

• 滑桿的位置是設定left的值，但是left的值是：偏移量-滑桿寬度/2

滑動的實現，在這個模組中編寫中沒有採用html5中的拖放api，而是採用mousedown、mousemove、mouseup來實現的，具體實作程式碼：

    // 滑动如何讓音樂播放控制條在js實現
    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值來實現進度如何讓音樂播放控制條在js實現

這裡要注意的是：

• 噹進度條總寬度與音訊總時間之間的比例關係，從而計算不同音訊時間點對應的進度的長度，這是基礎

#實際上這也非常好計算：

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

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

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

• 滑桿如何讓音樂播放控制條在js實現有時不夠自然順暢

• 音訊文件時間的處理不夠好

• 開始時進度部分不是太好

#程式碼會上傳到我的Github，模組日後還需要進行改進。

#

以上是如何讓音樂播放控制條在js實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！