MusicPlayer

ランダム再生を実現

ランダム再生状態で前の曲を再生

シーケンス再生状態で前の曲を再生すると、保存した状態値のインデックス-1に制御されます.
ただし、ランダム再生状態では、次の曲を再生する際にランダム値を与えるだけなので、実施は問題ありません.
前の曲の放送はかなり複雑で、実現するのはかなり骨が折れる.

ランダム再生で前の曲を再生する条件

ランダム再生の順番を覚える

順番を覚えた曲を全て再生した後、ランダムに再生し直す必要があります

プレイリストから曲を削除する場合は、その曲を記憶から削除する必要があります.

例えば、ランダム再生順が[0, 2, 1, 4]であれば
前の曲のボタンを押すたびに、[4, 1, 2, 0]番の曲を再生しなければなりません.
プレイリストから1を削除した場合は、1も前の曲を覚えているリポジトリに消えます.

  function handlePreviousMusic (action, music) {
    if (action === 'push') {
     const newPreviousMusic = previousMusic.slice(0, previousMusic.length);
      newPreviousMusic.push(music);
      setPreviousMusic(newPreviousMusic);
    } else if (action === 'pop') {
     const newPreviousMusic = previousMusic.slice(0, previousMusic.length);
      newPreviousMusic.pop();
      setPreviousMusic(newPreviousMusic);
    }
  }

まず、前の曲の配列を覚えてpreviousMusicと宣言します.
state handlingはSTACKに実装された.STACKはLIFOで、配列されたpush popを利用しています.
「前の曲」リストに保存されている前の曲をインポートしてpopを実行し、
前の曲リストに前の曲を保存する場合は、pushを実行させます.
ここで発生したエラーは、previousMusicに格納するデータをインデックス値として保存することです.
曲を削除する場合は、インデックス値を変更する必要があります.
previousMusicのデータはそのままなので、値が定義されていない場合があります.

//playList 마지막 인덱스값 3
//previousMusic에서 가져온값 4

playList[previousMusic[previousMusic.length-1]] // => undefined

したがって,曲削除を実行する際にpreviousMusicもリフレッシュ関数を記述する.
また、previousMusicに格納されているインデックス値には、処理が必要な値がたくさんあります.
crrentMusic値(オブジェクト)を保持することを決定します.

  function refreshPreviousMusic (deleted) {
    const newPreviousMusic = previousMusic.slice(0, previousMusic.length);
    const filteredPreviousMusic = newPreviousMusic.filter(el => el.id !== deleted.id);
    setPreviousMusic(filteredPreviousMusic);
  }

...

 onClickPrevious={() => {
  if (!isRandom) {
    if (isValid('playList', playList.indexOf(crrentMusic) - 1)) {
     setCrrentMusic(playList[playList.indexOf(crrentMusic) - 1]);
    } else {
     setCrrentMusic(playList[playList.length - 1]);
    }
  } else {
    if (!previousMusic.length) {
     console.log('랜덤-이전곡 없음');
     setCrrentMusic(playList[getRandomNumber(0, playList.length - 1)]);
    } else {
     console.log('랜덤-이전곡 있음');
     setCrrentMusic(previousMusic[previousMusic.length - 1]);
     handlePreviousMusic('pop');
    }
  }
}}

ランダム再生状態で前の曲の再生を完了

ランダムインデックスを作成する重複値を除外

ランダム再生時に次の曲に移ると、次の曲ボタンを押しても動かないことがあります.
和弦が複雑になって役に立たないのか...?コンソールかと思ったけどログを確認しました.
重複するインデックス値が生成されたため、AudioPlayerは変化を検出しなかった.
ランダムインデックス生成関数を再帰関数に変更します.
crrentmusicのインデックス値と生成されたランダムインデックス値が等しくないまで、自分を呼び出します.

  function getRandomNumber (min, max) {
    const randomIndex = parseInt(Math.random() * ((Number(max) - Number(min)) + 1));

    if (randomIndex === playList.indexOf(crrentMusic)) {
      return getRandomNumber(min, max);
    } else {
      return randomIndex;
    }
  }

今日はここまで。

元のアルゴリズムに弱いので,機能を実現する方法を考え,かなりの時間をかけて実現した.
これにより,コア機能であるVisualizerの機能において,音楽再生機能が具現化される.
次は、このコードに基づいてサイドバーを作成する必要があります.