HTML中audio标签可嵌入音频并控制播放，通过src指定文件路径，controls显示控件，autoplay实现自动播放（受限于浏览器策略），muted允许静音自动播放，loop实现循环播放；为确保兼容性，可用多个source标签提供MP3、OGG、WAV等格式；通过JavaScript调用play()、pause()等方法控制播放状态，并监听ended、timeupdate等事件提升交互体验，注意避免滥用自动播放以优化用户体验。
HTML中的audio标签让网页嵌入音频变得简单，无需插件即可实现音频播放与控制。只需要几行代码，就能在网页中添加可播放的音频文件。
基本语法与自动播放设置
使用<audio>标签插入音频，通过src属性指定音频文件路径。添加controls属性可显示播放控件，如播放/暂停按钮、音量和进度条。
-
<audio src="music.mp3" controls></audio>：显示控制条并加载音频 -
autoplay：页面加载后自动播放（部分浏览器限制自动播放） -
loop：循环播放音频 -
muted：静音状态下允许自动播放
支持多种音频格式
不同浏览器对音频格式支持不同，推荐提供多个格式以确保兼容性。使用<source>标签列出备用文件。
<audio controls> <source src="music.mp3" type="audio/mpeg"> <source src="music.ogg" type="audio/ogg"> 您的浏览器不支持 audio 标签。 </audio>
常用格式包括MP3（广泛支持）、OGG（开源格式）和WAV（高质量但体积大）。
立即学习“前端免费学习笔记（深入）”；
JavaScript控制播放状态
通过JavaScript可以更灵活地控制音频行为，例如用按钮触发播放或暂停。
<audio id="myAudio" src="music.mp3"></audio>
<button onclick="document.getElementById('myAudio').play()">播放</button>
<button onclick="document.getElementById('myAudio').pause()">暂停</button>
常用方法包括：
- play()：开始播放
- pause()：暂停播放
- currentTime = 0：重置播放进度
- volume = 0.5：设置音量（0.0 到 1.0）
监听播放事件提升交互体验
可以监听音频的播放状态变化，比如播放结束时执行某个操作。
const audio = document.getElementById('myAudio');
audio.addEventListener('ended', function() {
alert('音频已播放完毕');
});
常见事件有：
- play：开始播放时触发
- pause：暂停时触发
- timeupdate：播放进度更新时触发（可用于更新进度条）
- loadedmetadata：元数据加载完成后触发
基本上就这些。掌握audio标签的基本用法和JavaScript控制方式，就能在网页中实现完整的音频功能。注意兼容性和用户体验，避免滥用自动播放干扰用户。
