iOSやAndroidを含む、考えられるすべての最新ブラウザでオーディオを再生しようとしています。
サーバーに両方のバージョンがあると仮定して、oggまたはmp3のいずれかを再生する関数を作成しました。
audio_template = Handlebars.compile('<audio autoplay>' +
' <source src="{{ src }}.mp3">' +
' <source src="{{ src }}.ogg">' +
'</audio>');
/* No extention--assuming both ogg and mp3 are present. */
function playAudio(src) {
var audio = new Audio();
if (audio.canPlayType('audio/mp3') {
audio.src = src + ".mp3";
}
else {
audio.src = src + ".ogg";
}
audio.play();
}
//plays on desktop browsers, nothing on mobile
function playAudio2(src) {
$('body').append(audio_template({src:src}));
}
//plays on desktop browsers, nothing on mobile
function playAudio3(src) {
var audio = $(audio_template({src:src}));
audio[0].play();
}
これはすべてのデスクトップブラウザで正常に再生されますが、iOSサファリまたはAndroidChromeでは何も生成されません。androidプラットフォームツール(adt)が提供するリモートデバッガーを使用してみましたが、playAudioを呼び出すと、エラーなしで「undefined」が返されます。audio.play()の前にブレークポイントを設定すると、audio.play()も同様になります。
また、そのハンドルバーテンプレートの出力をbodyタグの下部に埋め込んで再生しようとしましたが、それも失敗しました。
問題なのはフォーマットですか?それとも、隠されたオーディオ要素を再生できないという制限だけですか?