HTML5中loop属性可使audio标签自动循环播放，无需JavaScript；配合autoplay、muted、preload="auto"及多格式source可提升静音自动播放成功率；用CSS隐藏控件可实现纯背景音乐体验。
在 HTML5 中，loop 属性可直接用于 <audio> 标签，让背景音乐自动重复播放，无需 JavaScript 干预。
基本用法：添加 loop 属性即可
只需在 <audio> 标签中加入 loop（布尔属性，无需赋值），浏览器就会在音频播放结束后自动从头开始：
<audio src="bgm.mp3" autoplay loop></audio>
注意：autoplay 通常需配合 loop 使用才能实现“一进页面就循环播放”的效果；但现代浏览器普遍限制静音环境下的自动播放，若未触发用户交互（如点击），autoplay 可能被忽略。
确保兼容性与静音自动播放支持
为提高成功率，建议：
立即学习“前端免费学习笔记（深入）”；
- 添加
muted属性（尤其对 Chrome、Edge 等浏览器）——即使无声音也能触发自动播放 - 使用
preload="auto"提前加载音频资源 - 提供备用格式（如 MP3 + OGG）以覆盖更多设备
示例：
<audio autoplay loop muted preload="auto"> <source src="bgm.mp3" type="audio/mpeg"> <source src="bgm.ogg" type="audio/ogg"> </audio>
隐藏播放控件，保持背景体验
若仅作背景音乐，不希望显示播放器界面，加上 style="display:none" 或使用 CSS 隐藏：
<audio autoplay loop muted preload="auto" style="display: none;"> <source src="bgm.mp3"> </audio>
也可用 CSS 写成：audio { position: absolute; width: 1px; height: 1px; opacity: 0; }，更稳妥地隐藏又保留功能。
补充说明：loop 是原生行为，无需 JS
loop 是 HTML5 原生支持的布尔属性，设置后由浏览器内部处理循环逻辑，稳定可靠。不需要监听 ended 事件再手动 play()，避免因异步或策略限制导致的失败。
如果后续需要通过 JS 控制（如暂停/恢复循环），可操作元素的 loop 属性：
const audio = document.querySelector('audio');
audio.loop = true; // 启用循环
audio.loop = false; // 关闭循环 
