音楽再生コントロールバーをjsで実装する方法

はじめに

HTML5 はオーディオ再生を実装する 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-volume: 音量調整領域です

再生領域

この領域は、音楽の再生、一時停止、切り替え (前の曲、次の曲) を実装します。実際には、この部分では説明する必要はありません。 Play()とpause()は、配列要素を変更し、srcアドレスを変更することで、再生と一時停止を実装します。

進行状況エリア

このエリアはモジュール全体の中核となる部分です。このエリアの主な機能ポイントは次のとおりです:

• 進行状況エフェクトの実装

• まず、進行状況の実装です。アイデアは次のとおりです:

プログレス バーは 2 つの p で構成されます:

• // 最外层作为音楽再生コントロールバーをjsで実装する方法暗的长度区域<p>    // 最内层是实际表示进度
      <p></p>
  </p>

プログレス バーがクリックされると、x 軸方向に対するマウス クリック ポイントのオフセットを取得します。最も近い親要素のオフセットです

• オフセットは内部レイヤーpの実際の幅です。背景色の設定

• スライダーの位置は左の値を設定することですが、左の値は次のとおりです。 - スライダー幅/2

• このモジュールを作成する際、スライディングの実装は HTML5 のドラッグ アンド ドロップ API を使用しませんが、具体的な実装コード:

    // 滑动音楽再生コントロールバーを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 の幅、幅の値を動的に変更し、スライドする進行状況効果を実現するブロックの左の値

ここで注意する必要があるのは:

現在の進行状況バーの合計幅の比例関係さまざまなオーディオ時点に対応する進行の長さを計算するための合計オーディオ時間は、これが基礎になります

• 実際、これも非常に簡単に計算できます:

比率: 幅 / 長さ

時間の幅を指定します: (幅 / 期間) * currentTime

音量調整の実装は進行状況の実装と似ていますが、主に音量の実装が変更されます。


このモジュールの問題について話しましょう:

スライダー効果が不自然で滑らかではない場合があります

• オーディオファイルの時間処理が十分ではありません

• 進行部分はあまり良くありませんでした始まり

• コードは私の Github にアップロードされる予定で、このモジュールは将来的に改善する必要があります。

以上が音楽再生コントロールバーをjsで実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。