HTML5 Audioで作るiTunes風音楽プレイヤー (4/7)

2010年06月03日　10時00分更新

文●古籏一浩

ツイートする

複数の音声ファイルをスクリプトで制御する

　スクリプトでHTML Audioを制御する方法は分かりましたが、複数の曲（音声ファイル）を扱うサウンドプレイヤーの場合、audio要素を記述する方法は面倒です。そこで今度は、HTMLファイル内にaudio要素を記述せず、すべてスクリプト内で処理する方法を試してみましょう。

　まず音声ファイルを複数用意し、ファイルのURLをJavaScriptの配列内に入れておきます。これで、配列内のデータがそのままサウンドプレイヤーのプレイリストになります。

　今回は以下のように音声ファイルを用意しました。musicフォルダ内に再生するWave形式のファイルを入れてあります^※。


var fileList = [
    'music/kfighter.wav',
    'music/kfighter2.wav',
    'music/dungeon.wav',
    'music/ending.wav',
    'music/opening.wav'
];

　再生するファイルの一覧をページ内に表示し、ファイル名がクリックされたらそのファイルを再生します。あらかじめ<div id="playListArea"></div>としてプレイリストを表示する領域（コンテナ）を用意しておき、リストタグにclickイベントを設定して出力します。


var playList = '<ul>';
for(var i=0; i<fileList.length; i++){
    playList += '<li onclick=start_music("'+fileList[i]+'")>';
    playList += fileList[i] + '</li>';
}
playList += '</ul>';
document.getElementById("playListArea").innerHTML = playList;

　リストがクリックされるとstart_music()関数が呼び出され、引数に再生する音声ファイルのURLが渡されます。あとはURLをnew Audio()の引数に指定してplay()メソッドを呼び出せばOKです。


var audioObj = new Audio(url);
audioObj.play();

　ここまでをまとめたのがサンプル04です。リストに表示されたURL（ファイルパス）をクリックすると音楽が再生されます。

リスト項目をクリックすると再生される

●サンプル04[HTML]


<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>オリジナルサウンドプレイヤー</title>
        <link rel="stylesheet" href="css/main.css" type="text/css" media="all">
    </head>
    <body>
        <div id="playListArea"></div>
        <script type="text/javascript" src="js/control.js"></script>
    </body>
</html>

●サンプル04[JavaScript:control.js]


// 再生するファイルリスト
var fileList = [
    'music/kfighter.wav',
    'music/kfighter2.wav',
    'music/dungeon.wav',
    'music/ending.wav',
    'music/opening.wav'
];
// 再生するプレイリストを表示
var playList = '<ul>';
for(var i=0; i<fileList.length; i++){
    playList += '<li onclick=start_music("'+fileList[i]+'")>';
    playList += fileList[i] + '</li>';
}
playList += '</ul>';
document.getElementById("playListArea").innerHTML = playList;
// 再生開始
function start_music(url){
    var audioObj = new Audio(url);
    audioObj.play();
}

　サンプル04はリストを次々にクリックすると音楽が重なってしまう問題があります。そこで、同時に1つの音声ファイルしか再生できないように修正したのがサンプル05です。

　あらかじめ以下のようにAudioオブジェクトを作成します。


var audioObj = new Audio();

　多重再生を禁止するため、以下のようにpause()メソッドを使っていったん再生を停止します。


audioObj.pause();

●サンプル05[JavaScript:control.js]（HTMLファイルはサンプル4と同じ）


// 再生するファイルリスト
var fileList = [
    'music/kfighter.wav',
    'music/kfighter2.wav',
    'music/dungeon.wav',
    'music/ending.wav',
    'music/opening.wav'
];
// Audioオブジェクト
var audioObj = new Audio();
// 再生するプレイリストを表示
var playList = '<ul>';
for(var i=0; i<fileList.length; i++){
    playList += '<li onclick=start_music("'+fileList[i]+'")>';
    playList += fileList[i] + '</li>';
}
playList += '</ul>';
document.getElementById("playListArea").innerHTML = playList;
// 再生開始
function start_music(url){
    audioObj.pause(); // これがないと以前の音楽は停止しない
    audioObj = new Audio(url);
    audioObj.play();
}