HTML5オーディオをランダムに再生する方法

HTML5オーディオをランダムに再生するには

HTML5のオーディオをランダム順で再生したい場合は、まず再生したい楽曲のURLを配列としてまとめて登録します。以下のように初期化関数に楽曲を追加しましょう。

init ([
    'https://demo.com/songs/song1.mp3',
    'https://demo.com/songs/song2.mp3',
    'https://demo.com/songs/song3.mp3'
]);

次に、Math.random() を使って配列の中からランダムに1曲を選び、再生するための関数を用意します。

function displayRandom() {
    var audio = Math.floor(Math.random() * (collection.length));
    audio = collection[audio];
    audio.play();
    setTimeout(loop, audio.duration * 1000);
}

コードの仕組み

Math.random() * collection.length は、0以上・コレクションの長さ未満の小数値を生成します。これを Math.floor() で整数に丸めることで、配列のインデックスとして使えるランダムな数値が得られます。

そのインデックスに対応するオーディオオブジェクトを取り出し、play() メソッドで再生します。さらに setTimeout() を使い、曲の長さ（audio.duration は秒単位なので1000倍してミリ秒に変換）が経過した時点で次の処理（loop）を呼び出すことで、1曲ごとにランダム選択される連続再生を実現できます。

この手法を使えば、プレイリストのシャッフル再生やBGMの自動切り替えなど、さまざまな場面で活用できるシンプルなランダム再生機能が実装可能です。