QQ 空间当年“背景音乐自动播放”的玩法，让很多人第一次接触到 <bgsound>、外链 mp3 和 Flash 播放器。今天这些实现方式大多已失效：浏览器不再允许音频自动播放，Flash 停服，而且未授权的音乐外链还有版权风险。本文说明现代的正确做法。

一、老写法为什么都不行了

• <bgsound src="a.mp3" loop="infinite">：IE 专有，Edge/Chrome/Firefox 全部不支持；
• <embed src="player.swf?soundFile=a.mp3">：依赖 Flash，已彻底停摆；
• autoplay 属性：现代浏览器默认禁止无声自动播放以外的媒体自动播放（Chrome/Firefox/Safari 均有策略），表现就是“设置了 autoplay 却没声音”。

二、浏览器的自动播放策略（关键理解）

Chrome 的策略可概括为两条通道：

1. 用户互动门槛（user gesture）：用户点击/触碰过页面后，才允许带声音播放；
2. 媒体参与度指数（Media Engagement Index, MEI）：用户在该站点经常主动播放音频/视频（历史累计时长达标），则允许自动播放。桌面端约需累计 ≥ 7 小时的媒体播放记录才会计入。

移动端更严：iOS Safari 基本必须有用户手势才能起播；Android Chrome 依赖 MEI 或“已加到主屏幕”的 PWA。

可靠写法：先静音自动播放，用户交互后再解除静音。这也是视频网站“自动播放但静音”的实现原理：

<audio id="bgm" src="/music/loop.mp3" loop preload="auto" muted></audio>

<script>
const bgm = document.getElementById('bgm');
// 用户第一次交互时开启声音
function unmute() {
  bgm.muted = false;
  bgm.volume = 0.35;
  bgm.play().catch(e => console.warn('play blocked', e));
  document.removeEventListener('pointerdown', unmute);
}
document.addEventListener('pointerdown', unmute, { once: true });
// 也可以直接尝试 play()，失败再降级
bgm.play().then(() => {}).catch(() => { /* 提示用户点击播放 */ });
</script>

要点：play() 返回 Promise，被拦截时抛 NotAllowedError，不要靠 setTimeout 猜状态。

三、更好的体验方案

1. 显式的播放按钮：一个悬浮控件 + 音量滑块，用户一按就播，兼容性最好；
2. Web Audio API 做循环与淡入淡出（比 <audio> 更可控）：

   const ctx = new AudioContext();
   fetch('/music/loop.mp3').then(r => r.arrayBuffer())
     .then(b => ctx.decodeAudioData(b))
     .then(buf => {
       const src = ctx.createBufferSource();
       src.buffer = buf; src.loop = true;
       const gain = ctx.createGain(); gain.gain.value = 0;
       src.connect(gain).connect(ctx.destination);
       src.start();
       // 2 秒淡入
       gain.gain.linearRampToValueAtTime(0.35, ctx.currentTime + 2);
     });

   注意 AudioContext 也需在用户手势后 resume()；
3. 记住用户偏好：把“上次是否开着音乐”写进 localStorage，下次由用户点击恢复，而不是强行自动播。

四、音频文件的技术细节

• 格式选择：MP3 兼容最广；AAC(.m4a) 同码率音质更好；OGG/Opus 在 Chrome/Firefox 支持好、Safari 支持有限，建议多源 fallback：

  <audio loop preload="auto">
    <source src="bgm.m4a" type="audio/mp4">
    <source src="bgm.mp3" type="audio/mpeg">
    <source src="bgm.ogg" type="audio/ogg">
  </audio>

• 体积控制：背景音乐用 96~128 kbps 足够，长循环片段（30~60 秒无缝循环）比整首歌更省流量；
• 无缝循环：MP3 有编码器延迟导致的间隙，专业做法是用 gapless 标记或改用 OGG/Opus（可精确设定循环点：opencodex 里用 LOOPSTART/LOOPLENGTH）；
• 预加载：preload="auto" 会预取整段，移动端浪费流量；一般用 preload="metadata"，点击后再加载。

五、版权与合规（最容易被忽略）

• 在自己的网页放别人的音乐，即使不收费，也涉及信息网络传播权。安全来源只有三类：① 你自己创作并持有全部权利；② 明确标注可商用的免版税音乐（注意有的要求署名，如 CC BY）；③ 已购买授权（授权书要覆盖“网络传播/网页嵌入”用途）。
• “我只是个人网站非营利”不构成合理使用免责；
• 外链别人服务器的 mp3 是双重风险：既有版权，又随时因防盗链失效（表现为播放器转圈无声音）。要么本地存放，要么用正规 CDN。
• 企业站尤其要留授权凭证，音乐版权方近年大量通过爬虫批量取证后发函。

六、常见问题 FAQ

问：为什么手机浏览器完全不响？
答：多数移动浏览器禁止无手势播放，且 iOS 上第一次播放必须由用户事件直接触发（不能异步回调后触发，例如 fetch.then(play) 在 iOS 会失败——需提前设好 src 再同步调用 play()）。

问：切到后台音乐就停了怎么办？
答：<audio> 通常能后台继续，被停多是系统省电策略或页面被冻结（Chrome 的 tab freezing）。可用 Web Audio + 保持页面活跃，但不要为此刻意阻塞节能，用户体验更差。

问：QQ 空间现在还能加背景音乐吗？
答：QQ 空间的装扮体系早已大幅精简，是否还能设置背景音乐以当前版本界面为准；若功能已下线，就没有变通方式。

结论：现代做法是“用户点击后播放 + 多源格式 + 短循环素材 + 明确版权来源”，不要指望 autoplay。

• 前端开发
• 版权
• 网页音频