无法在“HTMLMediaElement"上执行“播放":API 只能由用户手势启动 [英] Failed to execute 'play' on 'HTMLMediaElement': API can only be initiated by a user gesture

问题描述

我正在制作一个音乐播放页面，我使用 SoundManager 2 for AngularJs.我正在使用远程 API 来获取要播放的歌曲 URL.我增强了 angular-soundmanager2 单击事件处理程序:

element.bind('click', function () {如果(angular.isFunction(scope.loadFunction)){scope.loadFunction(scope.song, function () {$log.debug('添加歌曲到播放列表');addToPlaylist(scope.song.playDetails);})} 别的 {$log.debug('添加歌曲到播放列表');addToPlaylist(scope.song);}});

我添加了一个调用 scope.loadFunction(song,callback) 的部分，在此函数加载歌曲 URL 后，它调用回调将控制权交还给 angular-soundmanager2.>

问题是在 chrome for android 上出现错误:

未能在HTMLMediaElement"上执行播放":API 只能由用户手势启动.

如果一首歌从一开始就有一个 URL 并且不使用异步加载，则不会发生这种情况.

有什么解决方法吗?

解决方案

我不得不尝试使用 Chrome 播放声音.事实证明，即使在用户手势(例如单击)之后，它也会等待 1000 毫秒，如果没有播放声音，则会引发上述异常.就我而言，问题来自异步轨道 URL 加载.

但事实证明，在播放第一首曲目后，chrome 不再关心这 1000 毫秒的延迟，您可以在任何您想要的超时情况下以编程方式调用播放.

因此，解决方案是在用户第一次点击曲目并加载所需曲目 URL 后，从静态资源中播放几乎为零秒的微静音声音.

希望它有所帮助或有人找到其他解决方案.

I'm making a music playing page, where I use SoundManager 2 for AngularJs. I'm using a remote API to get a song URL to play. I enhanced an angular-soundmanager2 click event handler :

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

Where I added a part, that calls scope.loadFunction(song,callback) and after this function loads a song URL it calls a callback to give the control back to angular-soundmanager2.

The problem is that on chrome for android I get an error :

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

it doesn't happen if a song has a URL from the beginning and async loading isn't used.

Are there any workarounds for it?

解决方案

I had to experiment with Chrome playing sounds. It turned out that even after a user gesture (such as click) it waits for 1000ms and if no sound was played it throws the exception above. In my case the problem was coming from asynchronous track URL loading.

But it also turned out that after the first track is played chrome doesn't care anymore for this 1000ms delay and you can call play programmatically with any timeout you want.

So the solution was to play a micro almost zero-second long muted sound from static resources after the very first time a user clicks on a track and after that load a desired track URL.

Hope it helps or someone finds other solutions.

这篇关于无法在“HTMLMediaElement"上执行“播放":API 只能由用户手势启动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！