谷歌浏览器不能播放audio 报错Uncaught (in promise) DOMException
2024-08-30 22:37:18
在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>
我暂时找到这两个解决方案，如果大家有更好的方案可以提出来。
最新文章
- MySQL数据库1067 问题
- CSS3新特性,绘制常见图形
- 数据库中GETDATE()函数格式化时间
- 在MVC中使用async和await的说明
- Android 采用get方式提交数据到服务器
- POJ3967Ideal Path[反向bfs 层次图]
- usaco 2016 Feb 负载平衡
- 混合使用Jquery Deferred和Angularjs的$timeout（转）
- POJ 2486 Apple Tree(树形DP)
- 三个特殊资源目录 /res/xml /res/raw 和 /assets
- 对于requirejs AMD模块加载的理解
- mysql copy复制拷贝表数据及结构的几种方式(转)
- border-radius值的解析
- BitmapImage 读取内存流和显示图片
- Flex中的FusionCharts 3D柱形图
- Python、pip和scrapy的安装——Python爬虫学习笔记1
- 20135337朱荟潼 Linux第一周学习总结——计算机是如何工作的
- 在laravel中，使用DB查询数据库后，返回的对象，可以用下面的办法变为数组
- Oracle12c新特性之基本操作
- 软工1816 · Beta冲刺（3/7）