音楽をランダムに連続で再生する方法

Question

前提・実現したいこと

音楽をランダムに連続して再生しようと考えています。
ページにアクセスしてボタンを押すと再生されるようにしたいです。

発生している問題・エラーメッセージ

以下のコードはかけたのですが、その後ランダムに再生する方法がわかりません。
また、音楽ファイルを再生させる際にできるだけ読み込み時間を少なくする場合にMP3は適切でしょうか。アドバイスをお願いします。

該当のソースコード

<audio id='audio'></audio>
<script src="mfm" type="text/javascript">
</script>

'use strict';

var playlist = [
  './m1.mp3',
  './m2.mp3',
  './m3.mp3',
  './m4.mp3',
  './m5.mp3'
]

var audio = document.createElement('audio');
document.body.appendChild(audio);
audio.style.width = '100%';
audio.style.height = 'auto';
audio.controls = true;
audio.volume = 0.3;

audio.src = playlist[0];
audio.play();

var index = 0;
audio.addEventListener('ended', function(){
  index++;
  if (index < playlist.length) {
    audio.src = playlist[index];
    audio.play();
  }
  else {
    audio.src = playlist[0];
    audio.play();
    index = 0;
  }
});

補足情報（FW/ツールのバージョンなど）

javasc
ここにより詳細な情報を記載してください。

Answer 1

先に配列をシャッフルすればいいと思いますよ。

const playlistSerialize = [
  './m1.mp3',
  './m2.mp3',
  './m3.mp3',
  './m4.mp3',
  './m5.mp3'
];

const playlist = (() => {
  const array = playlistSerialize.concat();

  for (let i = array.length - 1; i >= 0; i--) {
    let rand = Math.floor(Math.random() * (i + 1));
    // 配列の数値を入れ替える
    [array[i], array[rand]] = [array[rand], array[i]]
  }

  return array;
})();

console.log(playlist);
/* Array(5)
0: "./m3.mp3"
1: "./m2.mp3"
2: "./m4.mp3"
3: "./m5.mp3"
4: "./m1.mp3"
length: 5
__proto__: Array(0)
などと出力
*/

Comments

[Ito_Kazuki_]

ありがとうございます！