资讯专栏INFORMATION COLUMN

DOMException: The play() request was interrupted

OnlyMyRailgun / 4190人阅读

摘要:最近在使用時遇到一个问题,那就是在总是报错报错除了浏览器,其他浏览都没有报错。后来了一下发现是因为调用的时候,音频文件还没有加载完成的问题。例子通过这两个例子,我在想用低版本还是不兼容。然而却被现实啪啪的打脸。

最近在使用audio時遇到一个问题,那就是在Chrome DevTools 总是报错:

Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

or

Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.

报错:

除了google浏览器,其他浏览都没有报错。 而且虽然报错,其实还是能正常播放声音,本来想就这样了,但是看到有报错。总有一点膈应。

后来google了一下 发现是因为调用play()的时候,音频文件还没有加载完成的问题。

之前代码:

知道了是这个问题,那么如何修复呢?

例子:Autoplay


通过这个例子已经能够解决问题,

但是新的问题来了,promise在低版本的浏览器不支持。


Chrome 50才有 video和audio才在play()上面返回了一个promise;

然后我又看到了这个例子。

例子2:Fetch & Play



通过这两个例子,我在想 用Fetch低版本还是不兼容。于是乎我就想用$.ajax, 因为他的本意不就是一个异步么。先用阿贾克斯请求音频文件,然后在回调里面调用play方法不就可以了么。

然而却被现实啪啪的打脸。还是不行 报同样的错。说明此路不通啊。

没办法我就只能再请教google, 然后我在GitHub上面看到有人这样说;

发现这也可以。于是我就把我的代码改了一下:

// 播放声音
function playVoice(src, domId) {
    var $dom = $("#" + domId)
    if ($.browser.msie) {
        // IE用bgsound标签处理声音

        if ($dom.length) {
            $dom[0].src = src;
        } else {
            $("", {src: src, id: domId}).appendTo("body");
        }
    } else {
        // IE以外的其它浏览器用HTML5处理声音
                if ($dom.length) {
                     $dom[0].load();
                    setTimeout(function() {
                        $dom[0].play();
                    }, 200);
                } else {
                    $("

大家一看也就明白了,就是先load,然后异步去调用play,但是我用0,在我刷新快,频繁的时候还是会报错、于是我就改成200ms,至于延时器里面的200ms,我也是自己大概写了一个数字.

以上问题暂时解决。

参考文章:
(https://developers.google.com...

(https://github.com/sampotts/p...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/104087.html

相关文章

  • 2017-06-15 前端日报

    摘要:前端日报精选十问帮你理清前端工程师及大前端团队的成长问题译读完细则之后学到的件事掘金怎么写一个组件库一众成翻译还有这操作一个能生成思维导图的开源搜索引擎知乎专栏中文前端推荐第天值得收藏的基础教程知乎专栏第期没有的一天转载中回调地 2017-06-15 前端日报 精选 十问sofish:帮你理清前端工程师及大前端团队的成长问题![译] 读完 flexbox 细则之后学到的 11 件事 -...

    Benedict Evans 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<