在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. jQuery 五角星评分

    五角星打分 我用的是搜狗输入法上带的特殊符号打出来的  空五角星:☆  实五角星:★ 1.html <ul class="comment"> <li>☆&l ...

  2. C#中的字段，常量，属性与方法

    以前是学C++的,初次学微软的C#头都大了.什么字段,常量,属性,方法......微软把别人的东西拿来糅合在C#里,弄成了一个“大杂烩”.其实,说到底,“字段”不就是“变量”吗,所谓的“方法”不就是“ ...

  3. python == 符号

  4. Android中使用Apache common ftp进行下载文件

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/birdsaction/article/details/36379201 在Android使用ftp下 ...

  5. css3制作动画性能问题

    这篇文章主要讲的是怎样制作流畅动画,特别是针对移动端.在这里我首先介绍制作动画的几种方法的优缺点:接着会着重介绍用css3制作动画的注意事项. 1.用canvas.css3.jquery制作动画 Ca ...

  6. vue init定制团队模板使用方法

    每次做项目都要自己搭建项目目录,或者换了公司就的重新搭建项目目录,是不是很麻烦呢?有没有想过一次性把项目目录搭建好,以后直接用呢?你首先想到的可能是复制自己原来的项目,然后删除.修改等等.然而有个更方 ...

  7. CentOs7 使用iptables开启关闭端口

    介绍 iptables命令是Linux上常用的防火墙软件,是netfilter项目的一部分 iptables文件设置路径:命令:vim /etc/sysconfig/iptables-config 注 ...

  8. display：flex; justify-content:space-between; 最后一行显示内容无法靠左显示

    给父元素添加同每行展示列数一样(展示列表最多的)的子元素. 子元素设置样式: width:同子元素一样的width : height:0;

  9. Git Commit Message 规范

    今天来说说团队开发中,对于 Git commit message 规范问题. 社区上有各种 Commit message 的规范,本文介绍 Angular 规范,目前使用较广,比较合理和系统化,并且有 ...

  10. MySQL基础内容

    数据类型 菜鸟教程(见最下方网友整理) : https://www.runoob.com/mysql/mysql-data-types.html 其他: 1字节(byte)=8位(bit),所以dou ...