让网页开口说话：HTML5 `<audio>` 一行代码到全流程避坑

下面这份「现查现用」手册，从“丢进去就能播”到“自动播放被浏览器拦截怎么办”一条龙写完，直接复制即可上线。

1. 最快上线模板

<audio controls>
  <source src="bgm.mp3"  type="audio/mpeg">
  <source src="bgm.ogg"  type="audio/ogg">
  您的浏览器不支持音频。
</audio>

• 多放几个 <source>，浏览器从上到下挑自己认识的格式，兼容性一次搞定。
• MP3 覆盖率 95%+，再补一个 OGG 就能把 Firefox 老版本也照顾到。

2. 属性一句话速记

3. 自动播放老被拦截？三招破解

1. 先静音后出声（成功率最高）

   const a = document.createElement('audio');
   a.src = 'bgm.mp3';
   a.muted = true;        // 第一步：静音
   a.play().then(()=>{    // 第二步：播放
     a.muted = false;     // 第三步：再打开声音
   }).catch(e=>console.log('拦截',e));

2. 等用户第一次互动（保底方案）

   document.body.addEventListener('click',()=>{
     a.play();   // 用户点过任意地方，浏览器放行
   },{once:true});

3. 提示用户手动开启（体验兜底）

   a.play().catch(()=>{
     toast('请点右下角播放按钮开启音乐');
   });

4. 常用 JS 接口一图背完

audio.play()           // 播放，返回 Promise
audio.pause()          // 暂停
audio.currentTime = 30 // 跳到 30 s
audio.volume = 0.3     // 音量 0~1
audio.playbackRate = 1.25 // 1.25 倍速
audio.ended            // 只读，布尔，是否播完
audio.duration         // 只读，总时长（s）

5. 事件监听大全（做进度条、歌词同步全靠它们）

示例：自制进度条

audio.addEventListener('timeupdate',()=>{
  const pct = audio.currentTime / audio.duration * 100;
  bar.style.width = pct + '%';
});

6. 格式与码率怎么选

码率建议

• 背景音乐 64~96 kbps 足够；
• 有声小说 48 kbps 也能听；
• 音乐流媒体 128~192 kbps 平衡流量与音质。

7. 移动端额外注意

1. 省电模式：部分 ROM 会禁止后台播放，前端无解，引导用户加白名单。
2. 流量焦虑：默认给 preload="none"，播放前再 load()。
3. 静音自动播放后，记得弹“是否开启声音”浮层，避免用户以为没声是 Bug。

8. 打包带走一句话

“先静音，再互动，再出声；格式 MP3+OGG，事件 timeupdate 做进度，流量记得 preload=none。”
把这段口诀写便签，下次音频需求 10 分钟收工。