javascript - 'play'上执行 'HTMLMediaElement'失败 : API can only be initiated by a user gesture

Question

我正在制作一个音乐播放页面，我使用 SoundManager 2 for AngularJs .我正在使用远程 API 来获取要播放的歌曲 URL。我增强了 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);
    }
});

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

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

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

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

有什么解决办法吗？

Answer 1

我不得不尝试 Chrome 播放声音。事实证明，即使在用户手势(如点击)之后，它也会等待 1000 毫秒，如果没有播放声音，它会抛出上述异常。在我的情况下，问题来自异步跟踪 URL 加载。

但事实证明，在播放完第一首轨道后，chrome 不再关心这 1000 毫秒的延迟，您可以使用任何所需的超时以编程方式调用 play。

因此，解决方案是在用户第一次点击轨道并加载所需的轨道 URL 后，从静态资源播放几乎为零秒长的静音。

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