HTML5 Audio(音频)

HTML5 的 <audio> 标签让网页无需插件即可播放声音，与 <video> 用法几乎一致，非常适合做背景音乐、语音消息、播客等场景。学完 Video 再学 Audio 会非常轻松。

最简单的用法

给 <audio> 加上 src 与 controls 就能显示一个音频播放条，标签内的文字是浏览器不支持时的提示。

<audio src="song.mp3" controls>
    您的浏览器不支持 audio 标签。
</audio>

在浏览器中显示为：一条带播放/暂停、进度、音量的音频控制条。

多格式兼容：source 子标签

浏览器对音频格式的支持不完全相同：Chrome/Edge/Firefox 都支持 MP3、WAV，Ogg 主要服务于 Firefox/Chrome 老版本。放多个 <source> 让浏览器自动挑选第一个能播的。

<audio controls>
    <source src="song.mp3" type="audio/mpeg">
    <source src="song.ogg" type="audio/ogg">
    您的浏览器不支持 audio 标签。
</audio>

常用属性

属性	作用
controls	显示播放控件
autoplay	自动播放
muted	静音播放
loop	循环播放
preload	预加载策略：auto/metadata/none

与视频相同，浏览器会拦截带声音的自动播放，autoplay 通常要配 muted 才能生效，且不建议滥用自动播放。

JavaScript 控制音频

<audio> 同样暴露 DOM 接口：play()、pause() 控制播放，paused、ended 判断状态，currentTime 跳转秒数，volume 设音量，duration 取总时长。

<audio id="au" src="song.mp3" preload="metadata"></audio>
<button onclick="playMusic()">播放</button>
<button onclick="stopMusic()">暂停</button>
<script>
function playMusic() {
    var a = document.getElementById("au");
    a.play();                      // 开始播放
    console.log("总时长(秒)：" + a.duration);
}
function stopMusic() {
    document.getElementById("au").pause();
}
</script>

在浏览器中显示为：点击"播放"开始放歌，控制台打印出音频总时长；点"暂停"声音停止。

音频事件与易错点

常用事件有 play（开始播放）、pause（暂停）、ended（播放结束）、timeupdate（播放位置更新，可用来做进度条）和 canplay（可以播放了）。

易错点：① duration 在加载完成前是 NaN，要等 loadedmetadata 事件后再读；② 不同来源的音频可能触发跨域限制（CORS）；③ autoplay 一律要先 muted；④ 别忘记给有意义的音频加控制按钮，照顾可访问性。

小结：<audio> + <source> 负责跨浏览器播放声音，play()/pause()/volume/currentTime 负责程序化控制，事件则用来做进度条等交互。