记录一个audio无法自动播放的坑

最新推荐文章于 2025-03-26 21:22:37 发布

往后，余生

最新推荐文章于 2025-03-26 21:22:37 发布

阅读量1.6k

点赞数

分类专栏：网页文章标签： javascript js html css

本文链接：https://blog.youkuaiyun.com/qq_38700592/article/details/105862848

版权

网页专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种在网页中实现背景音乐自动播放的方法，通过将音频大小设置为极小并将其隐藏，同时绑定播放事件到页面点击或其他元素上，以此绕过浏览器对音视频自动播放的限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

部分浏览器规定了音视频不能自动播放（要手动点击播放按钮），除非添加muted（静音）属性
但是想给页面添加背景音乐，并且隐藏audio，一打开页面音频便自动播放怎么办？
乍一想好像是个死循环，其实，只要把play function和鼠标事件进行绑定就好了

<script>
// 添加音频
audio = document.createElement("audio");
audio.src = "*.mp3";
audio.autoplay = true;
audio.style.width = "1px";
audio.style.height = "1px";
var body = document.getElementsByTagName("body")[0];
body.appendChild(audio);
// 点击页面后播放audio并隐藏
body.onclick = function () {
	audio.play();
	audio.hidden = true;
}
// 也可以绑定到其他元素的事件上, 比如一个表格
var table = document.getElementsByTagName("table")[0];
table.onmousedown = function () {
	audio.play();
	audio.hidden = true;
}
// 或者把audio装起来, 点击audio所在的区域后隐藏
var div = document.createElement("div");
div.style.backgroundColor = "transparent";
div.appendChild(audio);
body.appendChild(div);
div.onmousemove = function () {
	audio.play();
	audio.hidden = true; // or audio.style.display = "none";
}
</script>