HTML5中需在用户交互（如click）后调用audio.play()，设muted可静音播放，preload="auto"并监听canplaythrough更稳妥；视频须autoplay+muted才可自动播，移动端Safari更保守。
怎么用 <audio></audio> 标签加背景音乐
html5 本身不支持“后台静默播放”的背景音乐——浏览器会阻止自动播放带声音的媒体，除非用户有交互（比如点击）。所以所谓“加背景音乐”，本质是控制 <audio></audio> 的加载、播放时机和静音状态。
常见错误现象：Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first。这是 Chrome/Firefox 等主流浏览器的强制策略，不是代码写错了。
- 必须在用户触发事件（如
click、touchstart）后调用play()，不能放在DOMContentLoaded或load里直接播 - 如果真想“无声启动”，可先设
muted属性，再播放，之后再取消静音（但部分浏览器仍可能拒绝后续取消静音） -
preload="auto"有助于提前加载音频，但不保证缓冲完成；需要监听canplaythrough再触发播放更稳妥 - 格式优先用
.mp3（兼容性好），或配一个.ogg作后备：<audio id="bgm"><br> <source src="bgm.mp3" type="audio/mpeg"><br> <source src="bgm.ogg" type="audio/ogg"><br></audio>
为什么 <video></video> 加 autoplay muted 才能自动播
视频自动播放的限制比音频更严格：即使没声音，Chrome 也要求同时满足 autoplay + muted 才允许静音自动播。漏掉 muted 就会卡住，控制台报错 The video playback was aborted due to a corruption or a network error 这类误导信息（实际是策略拦截）。
-
<video autoplay></video>单独写 = 白写，99% 情况下不会播 -
<video autoplay muted></video>是最低可行配置；若还需循环，加上loop - 移动端 Safari 对
autoplay更保守，即使muted也可能延迟几秒才开始，别依赖首帧精确时间点 - 如果视频只是当“动图”用（无音频轨道），建议导出为
.webm（体积小、解码快），比 MP4 更适合这类场景
play() 调用失败的三个典型原因
不是所有 play() 都能成功，尤其在复杂交互流程中。失败不抛异常，而是返回 Promise 并 reject，得显式处理。
- 用户未交互就调用：Promise reject，错误信息通常是
"The request is not allowed by the user agent or the platform in the current context." - 音频/视频源地址 404 或跨域没配
CORS：Promise reject，控制台显示网络错误，但错误类型仍是DOMException - 资源正在加载中就调
play()：可能立即 reject，应等canplay或canplaythrough事件后再调 - 实操建议：
const audio = document.getElementById('bgm');<br>button.addEventListener('click', () => {<br> audio.play().catch(e => console.warn('Play failed:', e));<br>});
音频和视频的体积与加载性能怎么平衡
多媒体文件大，首屏加载慢，用户还没点就跑了。这不是“要不要加”的问题，而是“怎么加才不拖垮体验”。
立即学习“前端免费学习笔记（深入）”；
- 背景音乐别用无损 WAV，MP3 控制在 128–192kbps 足够；用
ffmpeg压缩：ffmpeg -i in.wav -ar 44100 -ac 2 -b:a 160k out.mp3 - 视频优先用
poster属性设占位图，避免空白闪烁；preload="metadata"比auto更轻量（只加载头信息） - 不要把音频/视频放在首屏 HTML 里内联 base64——Base64 编码膨胀 ~33%，且无法缓存
- 如果背景音乐只是氛围点缀，考虑用 Web Audio API 动态合成简单音效，体积几乎为 0，可控性还更高
