javascript - servicios - Error al ejecutar ''play'' en ''HTMLMediaElement'': la API solo puede iniciarse mediante un gesto de usuario

servicios de google play continua fallando

Question

Estoy haciendo una página de reproducción de música, donde uso SoundManager 2 para AngularJs . Estoy usando una API remota para obtener la URL de una canción para reproducir. Mejoré un controlador de eventos de clic angular-soundmanager2:

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);
}
});

Cuando agregué una parte, que llama a scope.loadFunction(song,callback) y después de esta función carga una URL de canción, llama a una devolución de llamada para devolver el control a angular-soundmanager2.

El problema es que en Chrome para Android recibo un error:

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

no sucede si una canción tiene una URL desde el principio y no se utiliza la carga asíncrona.

¿Hay alguna solución para ello?

Answer 1

Aquí es cómo incorporé esta solución en soundmanager2:

Crear una función:

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

Luego dentro de la directiva de juego se usa:

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();
}
});
});
}
};
}
]);

En mi caso, soundManager.play contiene un fragmento de código que envía una llamada asíncrona al servidor para obtener una url de pista. Esto estaba causando el problema.

Espero que esto ayude

Answer 2

Similar a la solución de andreybavt. Aquí es cómo he resuelto el problema. Escribí una función que carga reproducir / pausar todos los sonidos que quiero usar. Esta función se llama onClick. Este clic es muy importante. Será el gesto del usuario requerido.

$("#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();
}

Al reproducir y pausar inmediatamente todos los sonidos, no los oirá, se "cargarán después de un gesto del cliente" y podrá llamarlos / reproducirlos luego mediante programación. Espero que esto ayude.

Answer 3

Tuve que experimentar con Chrome tocando sonidos. Resultó que incluso después de un gesto de usuario (como un clic) espera 1000 ms y si no se reproduce ningún sonido, se produce la excepción anterior. En mi caso, el problema venía de la carga asíncrona de URL.

Pero también resultó que después de que se reproduzca la primera pista, a Chrome ya no le importa este retraso de 1000 ms, y puede ejecutar la reproducción programada con cualquier tiempo de espera que desee.

Así que la solución fue reproducir un micro silencio de casi cero segundos de recursos estáticos después de la primera vez que un usuario hace clic en una pista y luego carga la URL de una pista deseada.

Espero que ayude o alguien encuentre otras soluciones.

Answer 4

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