在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. iOS：学习runtime的理解和心得

    http://www.cocoachina.com/ios/20150901/13173.html 作者:兴宇是谁 授权本站转载. Runtime是想要做好iOS开发,或者说是真正的深刻的掌握OC这门 ...

  2. idea 使用优化

    1.创建类的模板 /** * Copyright (C), 2015-${YEAR}, XXX有限公司 * FileName: ${NAME} * Author: ${USER} * Date: ${ ...

  3. 在VirtualBox下安装linux操作系统

    目标:在linux服务器上部署Java开发的网站 工具 VirtualBox-4.3.8:下载后安装. linux系统镜像: Centos国内镜像文件下载地址: http://centos.ustc. ...

  4. @noi.ac - 490@ game

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 小 Q 和小 T 正在玩一种双人游戏.m 张木牌从左往右排成一排 ...

  5. ORACLE| ORACLE基础语法汇总

    创 ORACLE| ORACLE基础语法汇总 2018-07-18 16:47:34 YvesHe 阅读数 9141更多 分类专栏: [数据库]   版权声明:本文为博主原创文章,遵循CC 4.0 B ...

  6. idea actiBPM插件生成png文件 (解决没有Diagrams或Designer选项问题)

    版权声明:随便转, 记得给个链接过来哦 https://blog.csdn.net/wk52525/article/details/79362904 idea对activiti工作流的支持没有ecli ...

  7. 买房的贷款时间是否是越长越好？https://www.zhihu.com/question/20842791

    买房的贷款时间是否是越长越好?https://www.zhihu.com/question/20842791

  8. hadoop的6个进程启动不全，请试 比如datanode没有启动

      赋给hadoop用户hadoop-1.2.1读写权限 [root@master usr]# chown -R hadoop121:hadoop121 hadoop-1.2.1/   折腾了两个小时 ...

  9. Vue 组件中的data数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. Python--day42--mysql数据库--mysql前言