用<audio>标签插入欢迎页背景音需搭配muted与autoplay属性或通过用户点击触发播放，优先使用相对路径的.mp3格式，添加preload="auto"提升响应速度，并监听ended事件确保循环播放。
怎么用 <audio> 标签插入欢迎页面的背景音
直接在 HTML 文件的 <body> 里加 <audio> 标签就行，但得注意几个关键点：浏览器默认不自动播放带声音的媒体，尤其在用户没和页面交互过时。所以“一打开就响”这事，得靠属性组合来绕过限制。
常见错误是只写 <audio src="welcome.mp3" autoplay>，结果 Chrome/Firefox/Safari 全静音——因为缺了 muted 或用户未触发交互。
-
autoplay必须搭配muted才能生效（即使你后续用 JS 解除静音） - 音频格式优先用
.mp3（兼容性好）或同时提供.ogg作后备 - 路径别写绝对 URL，用相对路径如
./assets/welcome.mp3，避免跨域或 404 - 加
preload="auto"能提升首次播放响应速度，但会多占点带宽
如何让欢迎音在用户点击后才播放（推荐做法）
比硬塞 autoplay 更可靠：放一个按钮或欢迎标题，绑定点击事件触发播放。这样既合规，又避免打扰用户。
示例代码：
立即学习“前端免费学习笔记（深入）”；
<button id="playBtn">开启欢迎体验</button>
<audio id="welcomeAudio" src="./audio/welcome.mp3"></audio>
<script>
document.getElementById('playBtn').onclick = () => {
const audio = document.getElementById('welcomeAudio');
audio.play().catch(e => console.warn('播放被阻止:', e));
};
</script>
注意：audio.play() 返回 Promise，失败时会抛异常（比如用户禁止自动播放），必须 catch，否则控制台报错且无提示。
为什么加了 loop 还只播一次
常见原因是音频文件末尾有空白或编码问题，导致播放器认为已到结尾；也可能是 loop 属性没生效于某些旧版 Safari。
- 确认文件本身循环点合理（可用 Audacity 截掉末尾静音）
- 不要只依赖
loop，可监听ended事件手动重播：audio.onended = () => audio.currentTime = 0; audio.play(); - 如果用
autoplay muted loop，部分安卓 WebView 仍可能不循环，得补 JS 控制
移动端页面欢迎音失效的典型原因
iOS Safari 和多数安卓浏览器对音频策略更严格：没有用户手势（tap/click）前，任何 play() 都会被忽略，autoplay 几乎无效。
- 不能靠
setTimeout延迟播放来绕过——只要没用户触发，一律拒绝 - “欢迎页面”若做成单页应用（SPA），路由切换不算用户交互，仍需显式点击/触摸才能解锁音频
- 测试务必真机进行，模拟器常误报成功
最稳妥的路径：欢迎页放一个大按钮，文案明确引导点击，点击后播放 + 跳转/展开内容。别试图静默启动音频。
