无法在'HTMLMediaElement'上执行'play':API只能由用户手势启动

Question

我正在制作一个音乐播放页面,我将SoundManager 2用于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.

如果歌曲从头开始并且未使用异步加载,则不会发生这种情况.

它有什么变通方法吗？

Answer 1

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

但事实证明,在第一首曲目播放后,chrome不再关心这1000ms的延迟,你可以用你想要的任何超时以编程方式调用play.

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

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