'HTMLMediaElement'で '再生'を実行できませんでした。ユーザーのジェスチャーによってのみAPIを開始できます。

Question

私はSoundManager 2 for AngularJsを使用して音楽再生ページを作成しています。 私はリモートAPIを使用して再生する曲URLを取得しています。

element.bind('click', function() { 
    if (angular.isFunction(scope.loadFunction)) { 
     scope.loadFunction(scope.song, function() { 
      $log.debug('adding song to playlist'); 
      addToPlaylist(scope.song.playDetails); 

     }) 
    } else { 
     $log.debug('adding song to playlist'); 
     addToPlaylist(scope.song); 
    } 
}); 

私はscope.loadFunction(song,callback)を呼び出し、この関数は、曲のURLをロードした後、それが戻っアンギュラsoundmanager2に制御を与えるためにコールバックを呼び出し部分を、追加しました：私は、角-soundmanager2クリックイベントハンドラを強化しました。

Failed to execute 'play' on 'HTMLMediaElement': API can only be initiated by a user gesture. 

曲が始まりと非同期ロードからのURLが使用されていない持っている場合、それは起こりません。

問題は、Androidのためクロムに私はエラーを取得するということです。

対策はありますか？

Answer 1

Chromeの再生音を試してみる必要がありました。ユーザーのジェスチャー（クリックなど）の後でも、1000ms待機し、サウンドが再生されなかった場合は、上記の例外がスローされることが判明しました。私の場合、問題は非同期トラックのURL読み込みから来ていました。

しかし、最初のトラックを再生した後でも、この1000msの遅延に対してクロムが気にしなくなり、必要なタイムアウトをプログラムで呼び出すことができます。

これは、ユーザーがトラックをクリックした後、希望のトラックURLをロードした後に、静的リソースからほとんどゼロ秒の長いミュートされたサウンドを再生することでした。

他の解決策が見つかるか、助けてくれることを願っています。ここで

Answer 2

は、私がsoundmanager2にこのソリューションを埋め込ま方法です：

は、関数を作成します：次に

function playMicroTrack(scope, angularPlayer) { 
if (!scope.$root.isInitialized) { 
    soundManager.createSound({ 
     id: '-1', 
     url: '../../assets/lib/microSound.mp3' 
    }); 
    soundManager.play('-1'); 
    scope.$root.isInitialized = true; 
    } 
} 

プレイディレクティブの使用内部：私の場合は

ngSoundManager.directive('playAll', ['angularPlayer', '$log', 
function (angularPlayer, $log) { 
    return { 
     restrict: "EA", 
     scope: { 
      songs: '=playAll' 
     }, 
     link: function (scope, element, attrs) { 
      element.bind('click', function (event) { 

       playMicroTrack(scope, angularPlayer); 

       //first clear the playlist 
       angularPlayer.clearPlaylist(function (data) { 
        $log.debug('cleared, ok now add to playlist'); 
        //add songs to playlist 
        for (var i = 0; i < scope.songs.length; i++) { 
         angularPlayer.addTrack(scope.songs[i]); 
        } 

        if (attrs.play != 'false') { 
         //play first song 
         angularPlayer.play(); 
        } 
       }); 
      }); 
     } 
    }; 
} 
]); 

soundManager.playが含まれていますトラックURLを取得するために非同期呼び出しをサーバーに送信するコード。これは問題を引き起こしていました。

希望します。

Answer 3

andreybavtのソリューションに似ています。ここで私はどのように問題を解決したのですか。 私は、使用するすべてのサウンドを再生/一時停止する機能を記述しました。この関数はonClickと呼ばれます。このクリックは非常に重要です。ユーザーのジェスチャーが必要になります。演奏とすぐに、すべての一時停止することで

$("#myBtn").on("click", function(){ 
setSounds(); 
}); 

function setSounds() { 

    //Play and pause all sounds you want to use 
    var audio1 = $("#mus_1")[0]; 
    var audio2 = $("#mus_2")[0]; 

    audio1.play(); 
    audio1.pause(); 

    audio2.play(); 
    audio2.pause(); 
} 

は、あなたがそれらを再生聞こえません聞こえる、彼らは、「クライアントのジェスチャー後にロード」され、あなたは/、その後、プログラムでそれらを再生呼び出すことができるようになります。 これが役立つことを願っています。ここで

Answer 4

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) { 
    webSettings.setMediaPlaybackRequiresUserGesture(false); 
}