Ogg形式を優先的に演奏する
サンプル01はWave形式のファイルを再生していますが、Wave形式はファイルサイズが大きく、データを読み込むまでに時間がかかりますし、Google Chromeでは再生できません。そこで、データサイズの小さいOgg形式を優先的に再生し、Ogg形式のデータを扱えないSafariの場合だけWave形式のファイルで再生するように変更します。
サンプル01では以下のようにして再生すべき音声ファイルのURLを求めていました。
var url = "music/Piano/"+this.id+".wav";
Ogg形式に対応するには、最後の拡張子をoggにするだけですが、ブラウザーがogg形式に対応していない場合はWave形式に分岐する必要がありますので、以前に本連載で紹介したcanPlayType()メソッドを使ってOgg形式が再生できるか調べます。再生可能ならファイルのURLを求めるときに拡張子をoggにし、再生できない場合はwavにします。
実際のプログラムはサンプル02です。HTMLファイル部分はサンプル01とまったく同じです。鍵盤をクリックするとFirefox, Opera, Safari, Google Chromeでピアノの音が鳴ります。
Google Chromeでも音が出るようになった
●サンプル02[JavaScript：sound.js]
// クリックイベントを設定
var list = ["C3", "D3", "E3", "F3", "G3", "A3", "B3", "C4",
"Cp3", "Dp3", "Fp3", "Gp3", "Ap3" ];
var ext = '.wav';
if((new Audio()).canPlayType('audio/ogg') == 'maybe') { ext = '.ogg'; }
for(var i=0; i<list.length; i++){
var ele = document.getElementById(list[i]);
ele.addEventListener("click", function(){
var url = "music/Piano/"+this.id+ext;
var audioObj = new Audio(url);
audioObj.play();
}, true);
}
