プレイリストに曲名を表示する
サンプル05はサウンドファイルのURL（ファイル名）をクリックすると音楽が再生されますが、URLだけでは何の曲か分かりません。そこで、プレイリストにURLではなく曲名を表示するよう改良します。
プレイリストの情報はfileList配列に入れます。単なる文字列ではなくオブジェクトとして指定することで、他のプロパティを追加しても既存のスクリプトへの影響を抑えられます（要素の順番や型などを気にしなくて済みます）。
var fileList = [
{ name : '戦闘開始', url : 'music/kfighter.wav' },
{ name : 'サバイバル', url : 'music/kfighter2.wav' },
{ name : '石の迷宮', url : 'music/dungeon.wav' },
{ name : 'エンディング', url : 'music/ending.wav' },
{ name : 'オープニング', url : 'music/opening.wav' }
];
プレイリストの表示部分は配列要素を直接出力するのではなく、配列要素（オブジェクト）のnameプロパティを出力するように変更します。といっても、fileList[i]をfileList[i].nameに変更するだけです。同様に関数start_music()に渡す引数をfileList[i].urlにします。
var playList = '<ul>';
for(var i=0; i<fileList.length; i++){
playList += '<li onclick=start_music("'+fileList[i].url+'")>';
playList += fileList[i].name + '</li>';
}
playList += '</ul>';
document.getElementById("playListArea").innerHTML = playList;
実際のスクリプトはサンプル06です。プレイリストには曲名が表示され、曲名をクリックすると音楽が再生されます。
プレイリストに曲名が表示されるようになった
●サンプル06[JavaScript:control.js]（HTMLファイルはサンプル04と同じ）
// 再生するファイルリスト
var fileList = [
{ name : '戦闘開始', url : 'music/kfighter.wav' },
{ name : 'サバイバル', url : 'music/kfighter2.wav' },
{ name : '石の迷宮', url : 'music/dungeon.wav' },
{ name : 'エンディング', url : 'music/ending.wav' },
{ name : 'オープニング', url : '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].url+'")>';
playList += fileList[i].name + '</li>';
}
playList += '</ul>';
document.getElementById("playListArea").innerHTML = playList;
// 再生開始
function start_music(url){
audioObj.pause(); // これがないと以前の音楽は停止しない
audioObj = new Audio(url);
audioObj.play();
}
