HTML 音频(Audio)
网页里想播放一段声音（背景音乐、播客、提示音），HTML5 的 <audio> 标签是最直接的方式：不用装任何插件，浏览器原生支持。本节讲清楚 audio 的写法、常用属性，以及如何用 JavaScript 控制播放。
在网页中播放音频
历史上出现过 bgsound、embed、object 等多种播放方式，现在统一推荐 <audio>，写法如 <audio src="music.mp3" controls></audio>：
- src：音频文件地址。
- controls：显示播放/暂停、进度条、音量等控件；不加则页面上既看不到也无法操作。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>音频示例</title>
</head>
<body>
<h3>我的音乐</h3>
<audio src="music.mp3" controls></audio>
</body>
</html>
在浏览器中显示为：出现一条音频播放控制条，可播放/暂停并调节音量。
常用属性
- autoplay：加载后自动播放（带声音时常被浏览器拦截）。
- muted：静音播放。
- loop：循环播放。
- preload：预加载策略 auto / metadata / none。
<!-- 背景音乐：自动循环，建议静音以免被浏览器拦截 -->
<audio src="bgm.mp3" autoplay loop muted></audio>
使用 source 提供多个来源
浏览器对音频格式支持不一，并列多个来源可提高兼容性，浏览器会按顺序尝试播放，全部失败时显示标签内的提示文字：
<audio controls>
<source src="music.ogg" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
支持的音频格式
- MP3：兼容性最好，日常首选。
- WAV：无损，音质好但文件大。
- Ogg Vorbis：开放格式，部分旧浏览器不支持。
- AAC/M4A：苹果生态与 MP4 视频中常用。
用 JavaScript 控制播放
audio 元素是 DOM 对象，可以直接调用方法和监听事件：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>JS 控制音频</title>
</head>
<body>
<audio id="myAudio" src="music.mp3"></audio>
<button onclick="document.getElementById('myAudio').play()">播放</button>
<button onclick="document.getElementById('myAudio').pause()">暂停</button>
<script>
var audio = document.getElementById("myAudio");
audio.addEventListener("ended", function () {
console.log("播放结束");
});
</script>
</body>
</html>
在浏览器中显示为：两个按钮控制音频播放与暂停；音频播完时控制台输出"播放结束"。
小结：<audio> 加上 src 与 controls 就能播放音频，autoplay、muted、loop 控制自动行为，source 提升兼容性，再用 JS 的 play()、pause() 就能随心控制播放。