このページの本文へ

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

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

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

プレイリストに曲名を表示する

 サンプル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です。プレイリストには曲名が表示され、曲名をクリックすると音楽が再生されます。

5.png

プレイリストに曲名が表示されるようになった


サンプル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();
}


この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています

Webディレクター江口明日香が行く