掌握 <audio> 元素的基本语法与核心属性
理解不同音频格式的浏览器兼容性
能够实现带控件、自动播放、循环播放等常见功能
遵循最佳实践，确保跨浏览器兼容性与用户体验
<audio><audio> 是 HTML5 引入的原生音频播放器，允许网页直接嵌入音频文件（如音乐、语音、音效），无需依赖第三方插件（如 Flash）。
<audio>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
您的浏览器不支持音频播放。
</audio>优势：
原生支持，无需额外库
可通过 CSS/JavaScript 控制
支持响应式设计
重要限制：
出于用户体验考虑，Chrome、Safari、Firefox 等现代浏览器默认禁止带声音的自动播放。
若需autoplay，通常需配合muted使用：<audio autoplay muted> <source src="background.mp3" type="audio/mpeg"> </audio>
不同浏览器对音频格式的支持不同，建议提供至少两种格式以确保兼容性：
推荐组合
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
<source src="sound.ogg" type="audio/ogg">
您的浏览器不支持音频播放。
</audio>浏览器会按顺序尝试加载，使用第一个支持的格式。
带控件
<audio controls>
<source src="music.mp3" type="audio/mpeg">
您的浏览器不支持音频。
</audio>静音模式
<audio autoplay muted loop>
<source src="background.mp3" type="audio/mpeg">
</audio>CSS 样式
<style>
.audio-player {
display: block;
width: 90%;
max-width: 600px;
margin: 20px auto;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
</style>
<audio class="audio-player" controls>
<source src="podcast.mp3" type="audio/mpeg">
</audio><audio controls>
<!-- 优先 MP3（兼容性最好） -->
<source src="song.mp3" type="audio/mpeg">
<!-- 备用 OGG（开源，压缩率高） -->
<source src="song.ogg" type="audio/ogg">
<!-- 最后尝试 WAV（保真度高，体积大） -->
<source src="song.wav" type="audio/wav">
您的浏览器不支持此音频格式。
</audio>可通过 JavaScript 动态控制播放行为：
<audio id="myAudio">
<source src="alert.mp3" type="audio/mpeg">
</audio>
<button onclick="playAudio()">播放</button>
<button onclick="pauseAudio()">暂停</button>
<script>
const audio = document.getElementById("myAudio");
function playAudio() {
audio.play().catch(e => console.log("播放被阻止:", e));
}
function pauseAudio() {
audio.pause();
}
</script>注意：
play()方法返回 Promise，在自动播放被阻止时会 reject，需用.catch()处理。