在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. switch范围判断

    <?php function grade($grade){ switch (true) { case $grade>=90: echo 'A'; break; case $grade> ...

  2. mysql 获取最近一个月每一天

    select date_add(curdate(), interval(cast(help_topic_id as signed integer) - 30) day) day from mysql. ...

  3. Libev源码分析08：Libev中的内存扩容方法

    在Libev中,如果某种结构的数组需要扩容,它使用array_needsize宏进行处理,比如: array_needsize (int, fdchanges, fdchangemax, fdchan ...

  4. HZOI20190714 T1序列

    什么沙雕题啊……考察的是啥啊,分类咋搞啊……愁死我了…… 先把作者的正解放出来: 序列因为选出的一段是一个等比序列的子序列,我们分为两种情况:1. q=1,相当于找一个最长每个数都相等的子串,这个扫一 ...

  5. JIRA管理员、用户密码重置

    -- Jira数据库中,用户信息都存放在表 cwd_user中 -- 切换到jiar数据库 use jiradb; -- 更改密码为sphere update cwd_user set credent ...

  6. linux 端口映射设置

    iptables -t nat -A PREROUTING -p tcp --dport 新端口 -j REDIRECT --to-ports 旧端口

  7. 无旋treap hfq-treap

    怎么代码都这么长... #include<iostream> #include<stdio.h> #include<string.h> #include<al ...

  8. Laravel5.5 支付宝手机网站支付的教程

    https://segmentfault.com/a/1190000015559571 这篇文章主要介绍了Laravel5.5 支付宝手机网站支付的教程,小编觉得挺不错的,现在分享给大家,也给大家做个 ...

  9. [C#] ServiceStack.Redis如何批量的pop数据？

    要安全的批量pop数据,有两个办法: 1.用事务(不用事务的话可能导致重复读.ServiceStack的pipeline是没有自带事务的.) 2.执行lua脚本 我这里提供用事务的实现方法: publ ...

  10. HDU2087 剪花布条 题解 KMP算法

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2087 题目大意:给定字符串 \(s\) 和 \(t\) ,找出 \(s\) 中出现不重叠的 \(t\) ...