プレイリストをJSONファイルにする
ここまでのサンプルではプレイリスト（再生する音声ファイルの一覧）をスクリプト内に直接記述していました。スクリプト内に直接ファイル名を記述する方法は使い勝手が悪く、誤ってプレイリスト以外の部分を書き替えてしまう恐れがあります。そこでプレイリスト部分はJSON形式の別ファイルとして用意し、ファイルを読み込んでプレイヤーに表示するように改良します。
JSONファイルは、scriptタグやAjaxを使って読み込めますが、今回はjQueryを使って処理します。jQueryであれば$.get()とするだけで同一ドメインのサーバーからJSONファイルを読み込めますし、他のメソッドを使って異なるドメインのサーバーからもファイルを読み込めます。このあたりの事情については「第33回 HTML5＋JavaScriptでビデオエフェクターに挑戦！」を参照してください。
プレイリストは「playlistdata.txt」という名前にしました。$.get()を使ってplaylistdata.txtファイルを読み込むには以下のように書きます。
$.get('playlistdata.txt', function(data){
eval('fileList = ['+data+']');
})
これで配列変数fileListに読み込まれたJSONデータが格納されます。ここまでをまとめたのがサンプル11です。なお、JSONデータにはスクリプトも記述できるので、このサンプルはセキュリティ上の問題があります。実際に利用する際にはJSONデータを検証するなどの対策を採ってください。
JSON形式でプレイリストを読み込んだ
●サンプル11[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">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
</head>
<body>
<div id="playListArea"></div>
<div id="controller">
<img src="images/rewind.png" id="rewindButton">
<img src="images/on.png" id="playButton">
<img src="images/loop_off.png" id="loopButton">
<div id="ctime">0:00</div>
</div>
<div id="wrapper"><canvas id="myCanvas"></canvas></div>
<script type="text/javascript" src="js/control.js"></script>
<script type="text/javascript" src="js/visual.js"></script>
</body>
</html>
●サンプル11[JavaScript：control.js]（一部抜粋）
// 再生するファイルリスト
$.get('playlistdata.txt', function(data){
eval('fileList = ['+data+']');
// 再生するプレイリストを表示
var playList = '<ul>';
for(var i=0; i<fileList.length; i++){
// WAVE形式が再生できるか調べる
if(audioObj.canPlayType('audio/wav') == 'maybe') { var ext = '.wav'; }
if(audioObj.canPlayType('audio/ogg') == 'maybe') { var ext = '.ogg'; }
playList += '<li onclick=start_music("'+fileList[i].url+ext+'")>';
playList += fileList[i].name + '</li>';
}
playList += '</ul>';
document.getElementById('playListArea').innerHTML = playList;
});
●サンプル11[JavaScript：playlistdata.txt]（一部抜粋）
{ name : '戦闘開始', url : 'music/kfighter' },
{ name : 'サバイバル', url : 'music/kfighter2' },
{ name : '石の迷宮', url : 'music/dungeon' },
{ name : 'エンディング', url : 'music/ending' },
{ name : 'オープニング', url : 'music/opening' }
