0

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タグの下部に埋め込んで再生しようとしましたが、それも失敗しました。

問題なのはフォーマットですか?それとも、隠されたオーディオ要素を再生できないという制限だけですか?

4

0 に答える 0