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

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

複数の楽曲の中からランダムに1曲を選んで再生したい場合、Math.random() を使うと簡単に実装できます。ここでは、楽曲リストの準備からランダム再生までの手順を解説します。

1. 楽曲リストの初期化

まず、再生したい楽曲のURLを配列としてまとめて渡し、コレクションを初期化します。

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

2. ランダム再生の実装

次に、Math.random() を使って配列からランダムに楽曲を選択し、再生する関数を作成します。

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

コードのポイント解説

各処理がどのような役割を持っているのか、順番に見ていきましょう。

• Math.random()： 0以上1未満のランダムな数値を返します。これに配列の長さを掛けることで、ランダムな位置を指定できます。
• Math.floor()： 小数点以下を切り捨てて整数に変換します。これにより、0 ～（配列の長さ − 1）の範囲で有効なインデックスが得られます。
• audio.play()： 選択されたオーディオファイルの再生を開始します。
• setTimeout(loop, audio.duration * 1000)： 曲の長さ（秒）をミリ秒に変換してタイマーを設定し、再生が終わったタイミングで次の処理（loop）を呼び出します。

応用のヒント

この仕組みは、BGMプレイヤーやシャッフル再生機能など、さまざまなWebアプリケーションに応用できます。例えば、再生終了時に再度 displayRandom() を呼び出せば、楽曲を途切れることなくランダムに再生し続けることも可能です。