2013-06-09 12 views
6

モバイルブラウザとデスクトップブラウザの両方で使用できるRIAを作成しようとしています。このアプリの主な目的の1つは、サウンドを再生することです。多くのXが存在する可能性があります(現在は150以上あります)Androidで再生していない動的に作成されたオーディオオブジェクトChromeブラウザ

特定のユーザーアクションでは、新しいオーディオオブジェクトを作成して特定のクリップをロードして再生したいと思っています。理想的には、新しい 'Audio'オブジェクトを作成し、srcがロード待ちの状態になってから再生するように設定します。これはさまざまなデスクトップブラウザで動作しますが、Android 4.2、Chrome、およびストックブラウザでは失敗するようです。それは)(実行時にロードし、.play呼び出して、(HTML内)

  1. 含むだけオーディオブロックしている;:

    私は、オーディオを含むの4種類の方法を試してみましたしかし、これは150 +オーディオブロックを作成する必要があることを意味します。

  2. 「Audio」の新しいインスタンスを作成し、.src属性を動的に設定してから、load.plex()を呼び出します(これは私のモバイルではなく、デスクトップブラウザでのみ有効です)
  3. jQueryを使用して新しいオーディオタグを作成し、domに追加してロードを待ってから再生します(これはデスクトップブラウザでのみ動作します)。それを読み込み、準備が整うのを待ってから再生します(これはどこでも動作します)。

大きな質問は、なぜこれが機能していないかということです。

**編集** 私は一度に1つのファイルしか再生できないことを知っています。プロジェクトは(機能的に)電話サービスと似ており、1人が0〜9の数字を記録し、次に「5」。「5」。 '0'。 '1 '.....など。一度に1つのオーディオストリームが完璧に受け入れられます...それは問題になっているだけです。今のよう

、私はまた、here

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>test</title> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script> 
    var $a1, $a2, $a3, $a4; 
    $(document).ready(function(){ 
     _setupVars(); 
     _addListeners(); 
    }) 

    function _setupVars(){ 
     $a1 = $("#audio1"); 
     $a2 = $("#audio2"); 
     $a3 = $("#audio3"); 
     $a4 = $("#audio4"); 
    } 

    function _addListeners(){ 
     $a1.click(_handleAudio1); 
     $a2.click(_handleAudio2); 
     $a3.click(_handleAudio3); 
     $a4.click(_handleAudio4); 
    } 

    function _handleAudio1(){ 
     $("#america")[0].play(); 
    } 

    function _handleAudio2(){ 
     var a = new Audio(); 

     $(a).on("canplay", function(){ 
      a.play(); 
     }) 

     if(a.canPlayType("audio/mp3")) 
      a.src = "audio/test2.mp3"; 
     else if(a.canPlayType("audio/ogg")) 
      a.src = "audio/test2.ogg"; 
    } 

    function _handleAudio3(){ 
     var $x = $('<audio id="says">'+ 
       '<source src="audio/test3.mp3">'+ 
       '<source src="audio/test3.ogg">'+ 
       '</audio>'); 
     $x.on("canplay", function(){ 
      $x[0].play(); 
     }) 
     $("#audioCont").append($x); 
    } 

    function _handleAudio4(){ 
     var $x =$("#cat"); 
     $x.on("canplay", function(){ 
      $x[0].play(); 
     }) 
     $x[0].load(); 
    } 

</script> 
</head> 
<body> 
    <input type="button" id="audio1" value="play Audio Tag"/><br /> 
    <input type="button" id="audio2" value="play audio object"/><br /> 
    <input type="button" id="audio3" value="play dynamic Audio Tag"/><br /> 
    <input type="button" id="audio4" value="play load Audio Tag, then play"/><br /> 
    <audio id="america"> 
     <source src="audio/test1.mp3"> 
     <source src="audio/test1.ogg"> 
    </audio> 
    <audio id="cat"> 
     <source src="audio/test4.mp3"> 
     <source src="audio/test4.ogg"> 
    </audio> 

</body> 
</html> 

答えて

2

方法1、2 & 3を見つけることができます次のコードは、iOSの上では動作しませんしています。残念なことに、ほとんどのモバイルデバイスでは、HTML5オーディオを一度に再生する単一のソースに制限しています。 iOSでは、メディアの再生を開始するためにユーザーの操作が必要です(オンロードはカウントされません)。

+0

私は一度に1オンスでいいです。プロジェクトは(機能的に)電話サービスと似ており、1人が0〜9の数字を記録し、次に「5」。「5」。 '0'。 '1 '.....などです。一度に1つのオーディオストリームが完璧に受け入れられます...それは問題になるようになっています(クロムで、まだテストするためのデバイスが見つからない) – whomba

+0

A単一のメディアファイルは、一度に1つずつ、ユーザーのやり取りでのみ再生できます。 – idbehold

7

現在のところ、AndroidのChromeでは、ユーザーがジェスチャーを使用して音声を再生するための明示的な再生が必要です。モバイルデバイスの帯域幅に過負荷がかかったり、オーディオを再生する厄介なポップアップが作成されたりするという懸念がありました。これがデフォルトで無効になっている理由の1つです。

私たちはこれを変更したいと考えています。あなたがAndroidのChromeのベータ版にいる場合は、このリンクchrome://flags/#disable-gesture-requirement-for-media-playbackに移動してこの動作を切り替えることができます。私たちは問題に取り組んでおり、あなたはそれに従うことができますBug 160536

+1

これまでのフォローアップでは、上記のページに移動しましたが、変更する必要がある設定が見つかりませんでしたか?あなたは私のためにそれを指摘できますか? –

+1

これはかなり古くなっていますが、AndroidのCrosswalk/Cordovaでこれを行うには、 '' platforms \ android \ "に' 'xwalk --disable-gesture-requirement-for-media-playback''を追加してください。 assets \ xwalk-command-line''ファイル - まだ持っていなければ作成します。 – Agamemnus

関連する問題