JavaScript でウェブプレーヤーを実装する

今日は、JavaScript を使用して Web ページ上にプレーヤーを作成する方法を紹介します。

誰もが知っているプレーヤーですが、どうすれば実現できるのでしょうか?

以下は私が作ったプレーヤーの写真です

まず、このプレーヤーを上から下まで見てみましょう。上部にはタイトル (ヘッド): My Music、中央にはコンテンツ (ボディ): 曲、下部には音楽の再生を制御するコントロールがあります。タイトル部分には「My Music」というタイトルのみがあり、中央のコンテンツ部分はプレイリストです。各曲には再生アイコン（音楽の再生中のみ使用可能）と曲の情報があります。下部には、再生を制御するためのアイコン、現在再生中の曲の名前、曲の再生の進行状況、曲の再生時間があります。

レイアウトについては、構造とスタイルを分離する必要があり、構造は HTML で記述し、スタイルは CSS で記述します。

Web ページ構造レイアウト:私の曲は直接書き込まれるのではなく、JSON オブジェクトとして読み込まれます。だから、ここで書いた曲の内容部分は単なるフォーマットです。前の曲/再生、一時停止/次の曲のアイコンをaタグを使用して記述し、aタグの背景にアイコンを追加しました。曲の再生進行状況を実装するために 2 つの div を使用します。内側の div には全体の進行状況が灰色で表示され、上の div には現在の曲の再生進行状況が白色で表示されます。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
    <link rel="スタイルシート" href="./css/yinyue.css" >
</head>
<本文>
<!--プレーヤー部分全体-->
<div class="音楽リスト">
    <!--タイトルセクション-->
    <div class="head">私の音楽</div>
    <!--コンテンツセクション-->
    <div class="body" id="tbody">
        <!--各曲のフォーマット-->
        <div class="item">
            <!-- 曲の再生中は小さなアイコンが表示されます -->
            <div class="item-logo box11"><img src="imgs/playing.gif"></div>
            <!--曲情報-->
            <div class="item-name">パーム——ディンダン</div>
        </div>
    </div>
    <!--下部-->
    <div class="foot">
        <!-- 前/再生、一時停止/次へアイコン -->
        <div class="box1">
            <!-- 前の曲アイコン -->
            <a href="javascript:;" class="btn-pre"></a>
            <!--再生、一時停止アイコン-->
            <a href="javascript:;" class="btn-play" id="btnPlay"></a>
            <!--次の曲アイコン-->
            <a href="javascript:;" class="btn-next"></a>
        </div>
        <!-- 曲の再生時刻 -->
        <div class="box2 play-current">0.00</div>
        <!-- 曲の再生進行状況と曲名 -->
        <div class="box3 mid">
            <!--曲名-->
            <span id="playingNmae" class="m-name">私の音楽</span>
            <!-- 曲の再生進行状況 -->
            <div class="box31"></div>
            <div class="box32"><a href="" class=" rel="external nofollow" ドット"></a></div>
        </div>
        <!-- 曲の合計再生時間 -->
        <div class="box4 play-duration">4.13</div>
    </div>
</div>
<script src="js/data.js"></script>
<script src="js/index.js"></script>
</本文>
</html>

Web ページスタイルレイアウト:見栄えの良いフォントやカラースタイルを自分で設定できます。また、background: url("../imgs/play-default.png") no-repeat; を設定する場合、URL 内のパスに、現在のディレクトリを終了してルートディレクトリに移動することを示す 2 つのドットが必要であることに注意してください。また、背景を繰り返しなし（タイリングなし）に設定します。絶対配置を使用する場合は、子と親の原則に従い、z-index 属性の設定に注意する必要があります。

/*ラベルの内側と外側の余白を削除します*/
* {
    マージン: 0;
    パディング: 0;
}
/*プレーヤー全体のスタイルを設定します:
レイアウトはフレックスボックスです。
水平中央、
幅と高さ、
ボーダー付き、
弾性ボックスの弾性方向を設定します: 列 (垂直)
*/
.音楽リスト{
    ディスプレイ: フレックス;
    マージン: 0 自動;
    高さ: 600px;
    幅: 400ピクセル;
    境界線: 1px 実線 #ccc;
    flex-direction: 列;
}
/*タイトルセクションを設定する*/
。頭{
    フレックス: 1;
    背景: #3498db;
    色: #fff;
    フォント: 24px「Chinese Xingkai」;
    ディスプレイ: フレックス;
    /*水平軸を中央に配置*/
    コンテンツの中央揃え: 中央;
    /*垂直軸を中央に配置する*/
    アイテムの位置を中央揃えにします。
    border-bottom: 1px 白の実線;
    ボックスのサイズ: 境界線ボックス;
}
/*コンテンツ部分を設定する*/
。体 {
    フレックス: 7;
    /*余分な部分を非表示にする*/
    オーバーフロー-x:非表示;
}
/*下部セクションを設定する*/
。足 {
    フレックス: 2;
    ディスプレイ: フレックス;
    背景: #3498db;
    色: #fff;
    フォントサイズ: 14px;
    border-top: 1px 白一色;
    ボックスのサイズ: 境界線ボックス;
}
/*各曲のフォーマットを設定する*/
。アイテム {
    ディスプレイ: フレックス;
    高さ: 50px;
    行の高さ: 50px;
    背景: #3498db;
    色: #fff;
    フォントサイズ: 14px;
    カーソル: ポインタ;
    遷移: すべて .5 秒;
}
/*最後の曲を除き、他のすべての曲には下の境界線が表示されます*/
.item:not(:最後の子) {
    border-bottom: 1px 白の実線;
}
/*曲の再生中に小さいアイコンの背景色を設定します*/
.box11 {
    背景: #f0f0f0;
}
/*曲情報を設定する*/
.アイテム名 {
    フレックス: 6;
    /*境界線の横には書き込まないでください*/
    パディング: 0 10px;
}
/*マウスホバー効果*/
.item:ホバー{
    背景: #2980b9;
}
/*マウスクリックの効果*/
.item:アクティブ{
    /*クリックイベントに3D効果が必要な場合は、ボックスシャドウと相対的な配置を追加できます*/
    位置: 相対的;
    上: 2px;
    左: 2px;
    ボックスの影: 5px 5px 10px rgba(0, 0, 0, .5);
}
/*前の曲/再生、一時停止/次の曲のアイコンのサイズを設定します*/
.box1 {
    フレックス: 3;
    表示: インラインブロック;
}
/*再生中の曲の現在の時間のサイズを設定します*/
.box2 {
    フレックス: 1;
    表示: インラインブロック;
    パディング: 50px 0;
    テキスト配置: 左;
}
/*曲の再生の進行状況と曲名のサイズを設定します*/
.box3 {
    フレックス: 5;
    表示: インラインブロック;
    位置: 相対的;
    パディング: 35px 0;
}
/*曲の再生に要する合計時間を設定します*/
.box4 {
    フレックス: 1;
    表示: インラインブロック;
    パディング: 50px 0;
    テキスト配置: 右;
}
/*前の曲/再生、一時停止/次の曲のアイコンサイズを割り当てる*/
.box1 {
    表示: インラインブロック;
    マージン: 50px 0;
    幅: 30%;
    高さ: 50%;
}
/*前の曲のアイコンを設定する*/
.btn-pre {
    背景: url("../imgs/pre-default.png") 繰り返しなし;
    カーソル: ポインタ;
}
/*前の曲アイコンのマウスホバー効果を設定します*/
.btn-pre:hover {
    背景: url("../imgs/pre-active.png") 繰り返しなし;
}
/*再生アイコンを設定する*/
.btn-play {
    背景: url("../imgs/play-default.png") 繰り返しなし;
    カーソル: ポインタ;
}
/*再生アイコンのマウスホバー効果を設定します*/
.btn-play:hover {
    背景: url("../imgs/play-active.png") 繰り返しなし;
}
/*一時停止アイコンを設定する*/
.btn-一時停止{
    背景: url("../imgs/pause-default.png") 繰り返しなし;
    カーソル: ポインタ;
}
/*一時停止アイコンのマウスホバー効果を設定する*/
.btn-pause:hover {
    背景: url("../imgs/pause-active.png") 繰り返しなし;
}
/*次の曲のアイコンを設定する*/
.btn-next {
    背景: url("../imgs/next-default.png") 繰り返しなし;
    カーソル: ポインタ;
}
/*次の曲アイコンのマウスホバー効果を設定します*/
.btn-next:hover {
    背景: url("../imgs/next-active.png") 繰り返しなし;
}
/*曲のタイトルのフォントを設定する*/
.m-name {
    フォント: 20px "KaiTi";
}
/*曲の再生全体の進行状況を設定します*/
.box31 {
    位置: 絶対;
    幅: 100%;
    高さ: 2px;
    背景: #cacaca;
    zインデックス: 1;
}
/*曲の現在の進行状況を設定します*/
.box32 {
    位置: 絶対;
    幅: 20%;
    高さ: 2px;
    背景: 白;
    zインデックス: 2;
}
/*小さな点は曲の進行に合わせて動きます*/
.dot {
    位置: 絶対;
    表示: インラインブロック;
    右: 0;
    上: -2px;
    高さ: 5px;
    幅: 5px;
    境界線の半径: 2.5px;
    背景: #fff;
}

JavaScript コード:再生アイコンと一時停止アイコンはクリックすると交互に切り替わり、これらのアイコンが背景として表示されるため、a タグの背景を変更する、つまりクリック時に背景を変更するだけで済みます (背景を変更するには、クラスを変更します)。曲の再生の進行状況を設定するときに、loadeddata、timeupdate、ended などのオーディオ内のいくつかのイベントを確認できます。ended を使用すると、次の曲を自動的に再生する機能を実現できます。前進・後退機能を設定するときは、マウスクリックの位置（つまり、開始点からの距離）を取得することに注意してください。曲の進行は、player.currentTime に値を設定することで変更できます。

// プレーヤーの DOM オブジェクトを作成します。var player = document.createElement('audio');
//現在再生中の曲のインデックスを保存するための値を設定します。var currentIndex = 0;
// 曲が再生中かどうかを判断するフラグを設定します。var isPlay = false;

//曲を動的にロードする（function(){
    //すべての曲を保存するための値を設定します DOM オブジェクト var html = '';
    //すべての曲のDOMオブジェクトを取得します for (var i = 0; i < musics.length; i++) {
        var m = musics[i];
        //各曲のフォーマットを設定します html += `<div class="item" data-index="${i}">
                      <div class="item-logo box11"></div>
                      <div class="item-name">${m.name}---${m.artist}</div>
                 </div>`
    }
    //すべての曲を追加します document.getElementById('tbody').innerHTML = html;
    //プレーヤーにデフォルトの再生アドレスを指定します。 player.src = musics[currentIndex].path;
})();

//各曲のクリックイベントを設定します var trs = document.querySelectorAll('.item')
(i = 0; i < trs.length; i++ とします) {
    trs[i].addEventListener('click', 関数() {
        //前の曲の再生ステータスをクリアします clearStatus();
        // 曲のインデックスを取得します。var index = this.dataset.index;
        currentIndex = インデックス;
        var msc = musics[インデックス];
        // プレーヤーの再生アドレスを設定します。 player.src = msc.path;
        //再生を開始する startPlayer();
    })
}
//関数: 再生を開始する function startPlayer() {
    //再生フラグを設定します。isPlay = true;
    // 曲を再生します player.play();
    trs[currentIndex].style.background = '#2980b9';
    // 曲を再生するための小さなアイコンを追加します trs[currentIndex].querySelector('.item-logo').innerHTML = '<img src="imgs/playing.gif">';
    //再生ステータスのアイコンを設定します。document.querySelector('#btnPlay').className = 'btn-pause';
    //曲名を設定します document.querySelector('#playingNmae').innerText = `${musics[currentIndex].name} - ${musics[currentIndex].artist}`;
}
//機能: 前の曲の再生ステータスをクリアする function clearStatus() {
    trs[currentIndex].style.background = '';
    trs[currentIndex].querySelector('.item-logo').innerHTML = '';
}
//関数: 再生を一時停止する function pausePlay() {
    //再生を一時停止player.pause();
    //再生フラグを設定します isPlay = false;
    //アイコンを一時停止状態に設定します。 document.getElementById('btnPlay').className = 'btn-play';
}
//機能: 前の曲のクリックイベントを実装する function document.querySelector('.btn-pre').addEventListener('click', function () {
    //再生を一時停止する pausePlay();
    //前の曲の再生ステータスをクリアします clearStatus();
    //前の曲の機能を実現する if (currentIndex == 0) {
        現在のインデックス = musics.length - 1;
    } それ以外 {
        --現在のインデックス;
    }
    コンソール.log(現在のインデックス)
    //プレーヤーの再生アドレスを設定します。 player.src = musics[currentIndex].path;
    プレーヤーを起動します。

})
//機能: 曲再生機能のクリックイベントを実装する document.getElementById('btnPlay').addEventListener('click', function () {
    //再生フラグを判断する if (isPlay) {
        一時停止再生();
    } それ以外 {
        プレーヤーを起動します。
    }
})
//機能: 次の曲のクリックイベントを実装する function document.querySelector('.btn-next').addEventListener('click', function () {
    一時停止再生();
    ステータスをクリアします。
    (currentIndex == musics.length - 1)の場合{
        現在のインデックス = 0;
    } それ以外 {
        ++現在のインデックス;
    }
    コンソール.log(現在のインデックス)
    player.src = musics[現在のインデックス].path;
    プレーヤーを起動します。

})
// 曲の再生進行状況を設定します。var now = 0;
var 合計 = 0;
//曲データが読み込まれた後のイベント player.addEventListener('loadeddata', function () {
    // 曲の現在の進行状況（時間）
    今 = プレーヤー.現在の時間;
    // 曲全体の進行状況（時間）
    合計 = player.duration;
    // プレーヤーに曲の進行状況 (時間) を表示します。 document.querySelector('.play-current').innerText = fmtTime(now);
    document.querySelector('.play-duration').innerText = fmtTime(total);
})
//currentTime（曲の現在の進行時間）が更新されると、timeupdateイベントがトリガーされます player.addEventListener('timeupdate', function () {
    //曲の現在の進行状況（時間）を取得します
    今 = プレーヤー.現在の時間;
    // 曲の現在の進行状況 var p = now / total * 100 + '%';
    // 曲の現在の進行状況を進行状況バーに同期します。 document.querySelector('.box32').style.width = p;
    document.querySelector('.play-current').innerText = fmtTime(now);
})
//曲終了イベント（次の曲を自動再生する機能）
player.addEventListener('終了', 関数() {
    //前の曲の再生ステータスをクリアします clearStatus();
    //次の曲を再生currentIndex++;
    (現在のインデックス >= musics.length) の場合 {
        現在のインデックス = 0;
    }
    player.src = musics[現在のインデックス].path;
    プレーヤーを起動します。
})
//曲イベントを転送する document.querySelector('.box31').addEventListener('click', function (e) {
    //マウスクリックの位置を取得します。let right = e.offsetX;
    // マウスがクリックされた位置にプログレスバーを設定します。 document.querySelector('.box32').style.width = right;
    //マウスのクリック位置での曲の進行状況を計算します。let seekTo = right/200*total;
    // 曲の進行状況を設定します。player.currentTime=seekTo;
        })
//バックソングイベント document.querySelector('.box32').addEventListener('click', function (e) {
    左 = e.offsetX とします。
    document.querySelector('.box32').style.width = 左;
    seekTo = left/200*total とします。
    player.currentTime=シーク先;
})
//関数: 時刻をフォーマットする function fmtTime(time) {
    時間 *= 1000;
    time = 新しい Date(time);
    var m = time.getMinutes();
    var s = time.getSeconds();
    m = m < 10 ? '0' + m : m;
    s = s < 10 ? '0' + s : s;
    m + ':' + s を返します。
}

音楽：

var 音楽 = [
    {
        アーティスト:「GALA」、
        id: 1,
        タイトル：「純粋な心で夢を追う」
        パス: "musics/1.mp3"
    },
    {
        アーティスト: 「チョップスティックブラザーズ」
        id: 2,
        名前:「父」
        パス: "musics/2.mp3"
    },
    {
        アーティスト: "丁当",
        id: 3,
        名前:「パーム」、
        パス: "musics/3.mp3"
    },
    {
        アーティスト:「佐々木リジ」
        id: 4,
        名前: 「おやすみなさい」
        パス: "musics/4.mp3"
    },
    {
        アーティスト:「アンジェラ・チャン」
        id: 5,
        名前: 「見えない翼」
        パス: "musics/5.mp3",
    },
    {
        アーティスト: 「レイニー・ヤン」
        id: 6,
        名前: 「レインラブ」
        パス: "musics/6.mp3",
    },
    {
        アーティスト:「ヤオバンド」
        id: 7,
        名前:「メテオ」、
        パス: "musics/7.mp3",
    },
    {
        アーティスト:「エスケープ・プラン」、
        id: 8,
        タイトル:「Fly Again (MVバージョン)」
        パス: "musics/8.mp3",
    },
    {
        アーティスト: 「金貴生」
        id: 9,
        名前:「虹の間で」
        パス: "musics/9.mp3",
    }
]