さらに改良を加えるには
以上で一通りの機能は完成ですが、最後におまけとして、曲ごとにボリュームを設定する機能を追加します。iTunesなどで音楽を購入すると楽曲によってベースになるボリュームがまちまちで、突然大音量で再生されてしまうことがありますから、その回避策というわけです。
曲ごとにボリュームを変更するには、プレイリストにvolumeプロパティを追加してボリューム値（0.0～1.0）を指定します。volumeの指定がない場合はデフォルトとして最大音量で再生します。実際のスクリプトは以下のとおりです。ただし、筆者が確認したところGoogle Chrome 5ではvolume値が反映されませんでした。
var vol = fileList[i].volume || 1.0;
audioObj.volume = vol;
以上でオリジナルのサウンドプレイヤーが完成しました（サンプル12）。今回紹介したサンプルをベースに機能を追加していくのも楽しいと思います。たとえば、以前の記事で紹介したjQuery UIのスライダーを使って自由に再生位置を変更したり、曲ごとに異なるビジュアルエフェクトを表示したり、といった機能を付けてもよいかもしれません。
ちなみに今回のサンプルは残念ながらiPhone (iOS4)やiPadでは再生できませんが、前回のサンプルの多くはiPhone (iOS4)、iPadでも動作します。ただ、ネットワーク経由で音声データをダウンロードするため、再生までにかなりの待ち時間が必要です。それでもモバイルデバイスでHTML5関連技術が使えるのは大きなメリットになるでしょう。それでは、また次回。
オリジナルのサウンドプレイヤーが完成した
●サンプル12[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'; }
var vol = fileList[i].volume || 1.0; // ボリューム設定
playList += '<li onclick=start_music("'+fileList[i].url+ext+'",'+vol+')>';
playList += fileList[i].name + '</li>';
}
playList += '</ul>';
document.getElementById('playListArea').innerHTML = playList;
});
●サンプル12[playlistdata.txt]
{ name : '戦闘開始', url : 'music/kfighter', volume : 0.25 },
{ name : 'サバイバル', url : 'music/kfighter2' },
{ name : '石の迷宮', url : 'music/dungeon', volume : 1 },
{ name : 'エンディング', url : 'music/ending', volume : 0.7 },
{ name : 'オープニング', url : 'music/opening' }
[曲提供：西尾 将人]
