现代浏览器支持原生的loop属性实现自动循环，但需配合muted和autoplay以绕过静音限制，并通过用户手势解禁声音；移动端mp3的loop不稳定，建议优先用.ogg或js补偿；视觉隐藏音频元素时须保留可访问性。
用 <audio></audio> 标签加 loop 属性最直接
现代浏览器都支持原生 <audio></audio> 的 loop 属性，不用 JS 就能实现自动循环。关键不是“能不能”，而是“怎么让它不干扰用户体验”。
-
loop必须是布尔属性，写成loop="loop"或只写loop都行，但不能写成loop="false" - 加
preload="auto"能提升首次播放响应速度，尤其对小体积背景音乐（如 1–2MB MP3）有效 - 务必加上
muted和autoplay—— Chrome/Edge 等主流浏览器会阻止有声音的自动播放，不静音就根本播不出 - 示例：
<audio src="bgm.mp3" loop muted autoplay preload="auto"></audio>
想取消静音？得靠用户手势触发
一旦页面加载完就静音播放，后续想恢复声音，不能直接 audio.play()，必须由用户真实交互（比如点击按钮）来解禁音频上下文。
- 常见错误：页面 onload 后立刻
audio.muted = false; audio.play()→ 大概率报错DOMException: play() failed because the user didn't interact with the document first - 正确做法：绑定一个按钮，点击时再操作音频实例：
document.getElementById('unmute-btn').onclick = () => {<br> audio.muted = false;<br> audio.play().catch(e => console.warn('Unmute failed:', e));<br>}; - 注意：
play()返回 Promise，失败要 catch，否则控制台报错且无提示
MP3 不是万能格式，移动端兼容性要看清
Android WebView 和部分 iOS Safari 版本对 MP3 的 loop 支持不稳定——可能播完卡住、或跳回开头时有 0.1–0.3 秒空白。
- 优先试
.ogg（Vorbis 编码），它在多数移动端对loop的实现更精准 - 如果只提供 MP3，可加 JS 补偿：
audio.addEventListener('ended', () => audio.currentTime = 0)，但要注意避免和原生loop冲突（建议只在检测到不支持原生 loop 时启用） - 用
canPlayType('audio/mpeg')检查 MP3 支持度，比硬编码更稳妥
隐藏控件但保留可访问性
背景音乐不该抢焦点，但也不能完全剔除语义——屏幕阅读器和键盘导航用户需要知道这里有音频。
- 用
style="display:none"或hidden会移除可访问性，应该用aria-hidden="true"+style="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;"实现视觉隐藏 - 给
<audio></audio>加aria-label="背景音乐，正在循环播放"，让辅助技术可读 - 别删掉
<source></source>标签的type属性，否则 Safari 可能拒绝加载
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
