古籏一浩のJavaScriptラボ ― 第35回

HTML5 Audioで作るiTunes風音楽プレイヤー

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

文● 古籏一浩

Google Chromeに対応する

　ここまででサウンドプレイヤーの機能は一通り実装できましたが、音声ファイルにWave形式を使用しているため、Google Chromeでは再生できません。そこで、Google Chromeでも利用できるように少し手を加えましょう。

　Google Chrome用にはOgg形式に変換したファイルを用意します（Google Chromeで再生可能であれば他の形式でも構いません）。Wave形式からOgg形式への変換には「fmpeg2theora」が便利ですので、本連載の第29回を参考にして用意してください。変換したファイルはWave形式のファイルと同じ階層のフォルダに入れておきます。

　Google Chrome向けに処理を分けるには、userAgentプロパティを参照してブラウザーを特定する方法が考えられます。しかしGoogle Chromeに限らず、今後HTML5に対応したブラウザーが登場する可能性を考えると、userAgentで振り分ける方法はあまりよくありません。後になってからブラウザーがどの形式に対応しているか調べてスクリプトを修正するのはとても面倒です。

　そこでHTML5 Audioに用意されているcanPlayType()という便利なメソッドを使いましょう。canPlayType()は引数にMIME形式を指定すると、ブラウザーが対応可能かどうか返してくれます。返り値がmaybeの文字列であれば再生可能となります。つまり、


canPlayType('audio/wav')

とした場合、maybeの文字列が返されたらWave形式のサウンドファイルを、


canPlayType('audio/ogg')

としてmaybeの文字列が返されたらOgg形式のサウンドファイルを再生すればよいわけです。

　サンプル08は、canPlayType()で調べた結果によって、再生する音声ファイルの拡張子を差し替えています。本来であればswitch...caseを使うべきですが、今回はWave形式とOgg形式の2つだけなのでif()を使って判断しています。


Google Chromeでもサウンドが再生可能になった

●サンプル08[JavaScript:control.js]　一部抜粋（HTMLファイルはサンプル7と同じ）


// 再生するファイルリスト
var fileList = [
    { name : '戦闘開始', url : 'music/kfighter' },
    { name : 'サバイバル', url : 'music/kfighter2' },
    { name : '石の迷宮', url : 'music/dungeon' },
    { name : 'エンディング', url : 'music/ending' },
    { name : 'オープニング', url : 'music/opening' }
];
// Audioオブジェクト
var audioObj = new Audio();
var playFlag = false;
// 再生するプレイリストを表示
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;