ネイティブ JS で音楽プレーヤーを実装するためのサンプル コード

const control = { //プレーヤーコントロールを保存 play: document.querySelector('#myplay'),
 ...
  index: 2, //現在再生中の曲の番号...
}

const audioFile = { // 曲ファイルと関連情報を保存するファイル: document.getElementsByTagName('audio')[0],
  現在の時刻: 0,
  期間: 0,
}

const lyric = { // 歌詞表示バーの設定 ele: null,
  歌詞行数: 0,
  現在の行数: 0,
  行の高さ: 0,
}

const modeControl = { //再生モード mode: ['sequential', 'random', 'single'],
  インデックス: 0
}

const songInfo = { // 曲情報を格納するDOMコンテナ name: document.querySelector('.song-name'),
 ...
}

// 音楽の再生と一時停止、前の曲と次の曲の制御 control.play.addEventListener('click',()=>{
  コントロールを再生します。
  プレイヤーハンドル();
} );
control.prev.addEventListener('click', prevHandle);
control.next.addEventListener('click', nextHandle);
audioFile.file.addEventListener('終了', nextHandle);

関数 playerHandle() {
  コントロールを再生します。
  control.isPlay ? audioFile.file.play() : audioFile.file.pause();
  コントロールが再生されない場合
 //音楽を再生し、アイコンを変更してアニメーションの再生を開始します。play.classList.remove('songStop');
    play.classList.add('songStart');
    control.albumCover.classList.add('albumRotate');
    control.albumCover.style.animationPlayState = '実行中';
  } それ以外 {
    //音楽を一時停止し、アイコンを変更し、アニメーションを一時停止します...
  }
}


function prevHandle() { // 再生モードに応じて曲をリロードします const modeIndex = modeControl.index;
  定数 songListLens = songList.length;
  if (modeIndex == 0){//順番に再生 let index = --control.index;
    インデックス == -1 ? (インデックス = songListLens - 1) : インデックス;
    control.index = インデックス % songListLens;
  } else if (modeIndex == 1){//ランダム再生 const randomNum = Math.random() * (songListLens - 1);
    control.index = Math.round(randomNum);
  } else if (modeIndex == 2){// シングル曲}
  reload(songList);
}

関数 nextHandle() {
  定数 modeIndex = modeControl.index;
  定数 songListLens = songList.length;
  if (modeIndex == 0){//シーケンスで再生 control.index = ++control.index % songListLens;
  } else if (modeIndex == 1){//ランダム再生 const randomNum = Math.random() * (songListLens - 1);
    control.index = Math.round(randomNum);
  } else if (modeIndex == 2){// シングル曲}
  reload(songList);
}

// 再生の進行状況はリアルタイムで更新されます audioFile.file.addEventListener('timeupdate', lyricAndProgressMove);
// ドラッグして進行状況を調整します control.progressDot.addEventListener('click', adjustProgressByDrag);
// クリックして進行状況を調整します control.progressWrap.addEventListener('click', adjustProgressByClick);

関数 lyricAndProgressMove() {
  定数 audio = audioFile.file;
  コントロールインデックスをコントロールのインデックスに格納します。
 // 曲情報を初期化します const songLyricItem = document.getElementsByClassName('song-lyric-item');
  songLyricItem.length == 0 の場合、戻り値は次のようになります。
  currentTime を audioFile.currentTime = Math.round(audio.currentTime); とします。
  継続時間を audioFile.duration = Math.round(audio.duration); とします。

  // 進捗バーの移動 const progressWrapWidth = control.progressWrap.offsetWidth;
  const currentBarPOS = currentTime / 継続時間 * 100;
  control.progressBar.style.width = `${currentBarPOS.toFixed(2)}%`;
  const currentDotPOS = Math.round(currentTime / 継続時間 * progressWrapWidth);
  control.progressDot.style.left = `${currentDotPOS}px`;

  songInfo.currentTimeSpan.innerText = formatTime(currentTime);

}

関数adjustProgressByDrag() {
  const fragBox = control.progressDot;
  const progressWrap = control.progressWrap
  ドラッグ(fragBox、progressWrap)
}

関数ドラッグ(fragBox, wrap) {
  wrapWidth は、オフセットの幅を 0 から 10 の範囲で設定します。
  wrapLeft は、次の式で定義されます。

  関数dragMove(e) {
    disX = e.pageX - wrapLeft; とします。
    changeProgressBarPos(disX, wrapWidth)
  }
  fragBox.addEventListener('mousedown', () => { //ドラッグ操作//クリックして拡大すると操作しやすくなります fragBox.style.width = `14px`; fragBox.style.height = `14px`; fragBox.style.top = `-7px`;
    document.addEventListener('mousemove', dragMove);
    document.addEventListener('マウスアップ', () => {
      document.removeEventListener('mousemove', dragMove);
      fragBox.style.width = `10px`;fragBox.style.height = `10px`;fragBox.style.top = `-4px`;
    })
  });
}

function changeProgressBarPos(disX, wrapWidth) { // プログレスバーのステータス更新 const audio = audioFile.file
  定数期間 = audioFile.duration
  ドットポス
  barPos を

  （disX < 0）の場合{
    ドット位置 = -4
    バー位置 = 0
    オーディオ.currentTime = 0
  } そうでない場合 (disX > 0 && disX < wrapWidth) {
    ドット位置 = ディスX
    barPos = 100 * (disX / wrapWidth)
    audio.currentTime = 継続時間 * (disX / wrapWidth)
  } それ以外 {
    ドット位置 = ラップ幅 - 4
    バー位置 = 100
    audio.currentTime = 継続時間
  }
  control.progressDot.style.left = `${dotPos}px`
  control.progressBar.style.width = `${barPos}%`
}

関数adjustProgressByClick(e) {

  const wrap = control.progressWrap;
  wrapWidth は、オフセットの幅を 0 から 10 の範囲で設定します。
  wrapLeft は、次の式で定義されます。
  const disX = e.pageX - wrapLeft;
  changeProgressBarPos(disX, wrapWidth)
}

// 歌詞の表示がリアルタイムで更新されます audioFile.file.addEventListener('timeupdate', lyricAndProgressMove);

関数 lyricAndProgressMove() {
  定数 audio = audioFile.file;
  コントロールインデックスをコントロールのインデックスに格納します。

  const songLyricItem = document.getElementsByClassName('song-lyric-item');
  songLyricItem.length == 0 の場合、戻り値は次のようになります。
  currentTime を audioFile.currentTime = Math.round(audio.currentTime); とします。
  継続時間を audioFile.duration = Math.round(audio.duration); とします。
  totalLyricRows = lyric.totalLyricRows = songLyricItem.length とします。
  LyricEle = lyric.ele = songLyricItem[0]とします。
  lyricEle を LyricEle.offsetHeight に設定します。
  //歌詞の動き lrcs[controlIndex].lyric.forEach((item, index) => {
    (現在の時刻 === アイテムの時刻) の場合 {
      lyric.currentRows = インデックス;
      songLyricItem[index].classList.add('song-lyric-item-active');
      インデックス > 0 && songLyricItem[インデックス - 1].classList.remove('song-lyric-item-active');
      if (インデックス > 5 && インデックス < totalLyricRows - 5) {
        songInfo.lyricWrap.scrollTo(0, `${rowsHeight * (index - 5)}`)
      }

    }
  })
}

// 再生モードの設定 control.mode.addEventListener('click', changePlayMode);

関数 changePlayMode() {
  modeControl.index = ++modeControl.index % 3;
  定数モード = control.mode;
  modeControl.index === 0 ?
    mode.setAttribute("class", "playerIcon songCycleOrder") :
    modeControl.index === 1 ?
      mode.setAttribute("class", "playerIcon songCycleRandom") :
      mode.setAttribute("class", "playerIcon songCycleOnly")
}