在2018年4月份发布的Chrome 66正式关掉了声音自动播放，也就是说<audio autopaly></audio> <video autoplay></video>在桌面版浏览器也失效。

页面在用户没有操作的情况下播放声音会出现报错：

图片示例：

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <audio id="testAudio" src="./chat.mp3"></audio>
    <script>
        document.querySelector('#testAudio').play();
    </script>
</body>
</html>
 
解决方案1（把浏览器声音设置为允许）：
 
 

 解决方案2（判断到浏览器不能自动播放，给一个弹框让用户点击后再播放）：

图片示例：

代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app">
        <el-dialog :visible.sync="visible" title="提示" :before-close="handleClose">
            <p>是否播放提示音？</p>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleClose">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</body>
<audio id="chat" src="./chat.mp3"></audio>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
              visible: false 
            }
        },
        created() {
            this.playPay();
        },
        methods: {
            playPay() {
                const audioPlay = document.querySelector('#chat').play();
                audioPlay.then(() => {
                    console.log('可以自动播放');
                }).catch((err) => {
                    console.log('不允许自动播放');
                    this.visible = true;
                });
            },
            handleClose() {
                this.visible = false;
                //音频元素只在用户交互后调用.play(),
                document.querySelector('#chat').play();
            }
        },
    })
</script>
</html>

我暂时找到这两个解决方案，如果大家有更好的方案可以提出来。

 

谷歌浏览器不能播放audio 报错Uncaught (in promise) DOMException的更多相关文章

  1. 怎样解决Chrome浏览器因为禁止音频自动播放所造成的视频无法自动播放且报错: Uncaught (in promise) DOMException的问题

    这个问题是谷歌基于用户体验方面的考虑, 对页面加载时自动播放的音频作了限制, 试想一下, 如果你打开某个页面就立刻自动播放某种不可描述的声音, 那体验想必是十分酸爽. 尽管这个设定是针对音频的, 但实 ...

  2. 填坑——audio不能正常播放，控制台报错 Uncaught (in promise) DOMException

    原文:https://blog.csdn.net/Mariosss/article/details/87861167 用chrome调试页面时,发现audio控件有时不能正常播放音频,控制台报错 Un ...

  3. 网页视频不能自动播放？HTML5 video报错Uncaught (in promise) DOMException解决方法

    话说发哥四年前写了一个网页,如上图效果,实际网址http://pano.z01.com ,话说做好时是正常的,突然某一天,客户说你这个网站动画不见了,这是什么原因? 结果检查脚本一切正常. 其实也不是 ...

  4. Vue. 之 报错 Uncaught (in promise)

    Vue. 之 报错 Uncaught (in promise) 在点击同一个URL的时候,会报错如下: 解决方案: 在项目目录下运行 npm i vue-router@3.0 -S 即可.

  5. Vue报错: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'protocol')

    Vue报错: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'protocol') 报错信 ...

  6. jQuery配合html2canvas 使用时 报错 Uncaught (in promise) Provided element is not within a Document

    报错代码: 这个函数运行时 function download(){ var element = $("#demo"); //jquery 获取元素 //这里将会报错 html2c ...

  7. vue报错 Uncaught (in promise) NavigationDuplicated {_name:""NavigationDuplicated"... 的解决方法

    在进行跳转的时候报错 app.js:87499 Uncaught (in promise) NavigationDuplicated?{_name: "NavigationDuplicate ...

  8. vue 报错 Uncaught (in promise) error

    可尝试在then()后加上catch() ps:该图来自网络

  9. vue 运行项目时，Uncaught (in promise) DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL

    npm  run dev 运行项目后 验证码显示不出来 并报错 Uncaught (in promise) DOMException: Failed to execute 'open' on 'XML ...

随机推荐

  1. 为什么不喜欢在 QQ 群里回答问题？

    为什么不喜欢在 QQ 群里回答问题? 没有主题,主题随时都在变. 回答后无法备份,当然自己有心可以总结一下. 实时性要求太强,可能回答但是突然有事离开,再回头看已经是 几十条的留言. QQ 群用来闲聊 ...

  2. laravel 的路由中间件

    简介# Laravel 中间件提供了一种方便的机制来过滤进入应用的HTTP请求.例如,Laravel 内置了一个中间件来验证用户的身份认证 , 如果没有通过身份认证,中间件会将用户重定向到登陆界面,但 ...

  3. 当pip安装因为网络超时而无法安装的时候慢

    2.4 尝试pip --default-timeout=1000 install  https://download.pytorch.org/whl/cu100/torch-1.1.0-cp36-cp ...

  4. HZOJ 那一天她离我而去

    一个数据水到不行的题,各路大佬用各种方法A掉了这个题(比如A*,最短路,dfs……). 这里只说一下我的暴力和被碾压的正解. 暴力AC系列: 要找过1点的最小环,那么这个环可以拆成两部分,与1相连的两 ...

  5. poj 1263 Reflections (Simple Geometry)

    1263 -- Reflections 简单计算几何.题目给出射线以及若干个不相交的圆,求出射线会在哪些圆上反弹,依次写出反弹球的编号. 代码如下: #include <cstdio> # ...

  6. phpstudy2016安装redis扩展

    第一步:查看phpstudy版本 第二步:查看phpinfo信息,看Architecture所属类型. 第三步:下载redis扩展 去http://windows.php.Net/downloads/ ...

  7. springboot2.04与activiti 6.0集成

    本文就不对activiti做解释,下面直接看项目集成 以下顺序方面根据我的理解来,可以先从第二章看,再看第一张与第三章 增加activiti表的API,备注用. 目录 一.springboot2.X集 ...

  8. 洛谷P3150 pb的游戏（1）题解 博弈论入门

    题目链接:https://www.luogu.org/problem/P3150 这道题目是博弈论的入门题. 我们以 必胜态 和 必败态 来讲解这个问题. 首先,下面的图片演示了前8个数的必胜态和必败 ...

  9. JavaScript中Number数字数值浮点运算有误差

    JavaScript浮点运算的一个bug. 比如:7*0.8 JavaScript算出来就是:5.6000000000000005 //调用:numberExcept(arg1,arg2) //返回值 ...

  10. uni-app学习记录02-属性绑定.for循环

    <template> <view class="content"> <text> 我是首页 </text> <!-- 输出纯字 ...