HTML5通过<audio>标签支持音频播放，含五种方法：一、绝对路径引入本地文件；二、相对路径引用同级文件；三、网络URL引入远程资源；四、multiple source实现多格式兼容；五、JavaScript动态控制播放。
如果您希望在网页中播放音频文件，HTML5 提供了原生的 <audio> 标签来实现本地或网络音乐的导入与播放。以下是具体操作方法：
一、使用绝对路径引入本地音乐文件
通过将音频文件放置在网站根目录或子目录下，利用相对或绝对路径指定 src 属性，可使浏览器直接加载本地音频资源。该方式适用于开发环境或静态站点部署。
1、将音频文件（如 music.mp3）放入项目文件夹的 assets/audio/ 目录中。
2、在 HTML 文件中插入 <audio> 标签，并设置 src 为相对路径：<audio src="assets/audio/music.mp3" controls></audio>。
立即学习“前端免费学习笔记（深入）”；
3、确保 Web 服务器已启动（如使用 VS Code 的 Live Server 插件），避免因直接双击 HTML 文件导致的跨域或协议限制问题。
二、使用相对路径引用同级目录下的音频文件
当音频文件与 HTML 文件位于同一目录时，可采用简洁的相对路径写法，降低路径错误风险，提升代码可读性与迁移性。
1、将 bgm.wav 与 index.html 放在同一文件夹内。
2、编写音频标签：<audio src="bgm.wav" controls autoplay loop></audio>。
3、注意：若页面未启用自动播放策略（如 Chrome 要求用户交互后才允许播放），autoplay 可能被静音拦截，需配合 muted 属性使用。
三、通过网络 URL 引入远程音频资源
借助公开可访问的音频链接（如 CDN 或托管服务地址），可绕过本地文件管理，快速集成外部音源，适用于演示或轻量级嵌入场景。
1、获取一个支持 CORS 的音频直链，例如：https://example.com/sounds/alert.ogg。
2、在 <audio> 标签中填入该 URL：<audio src="https://example.com/sounds/alert.ogg" controls></audio>。
3、验证该 URL 在浏览器地址栏中可直接下载或播放，且响应头包含 Access-Control-Allow-Origin: *，否则可能触发跨域错误。
四、使用 multiple source 实现多格式兼容回退
不同浏览器对音频编码格式的支持存在差异，通过嵌套多个 <source> 标签并按优先级排列，可提升跨浏览器播放成功率。
1、准备同一音频内容的三种格式： track.mp3、track.ogg、track.wav。
2、按推荐顺序写入 <audio> 内部：<source src="track.mp3" type="audio/mpeg"><source src="track.ogg" type="audio/ogg"><source src="track.wav" type="audio/wav">。
3、浏览器将按顺序尝试加载首个支持的格式，其余被忽略；末尾可添加文本提示作为最终回退：您的浏览器不支持 audio 标签。。
五、通过 JavaScript 动态设置 audio src 并控制播放
利用 DOM 操作与事件监听，可在运行时动态切换音频源、响应用户操作或根据条件加载不同曲目，增强交互灵活性。
1、在 HTML 中定义无 src 的 audio 元素：<audio id="player" controls></audio>。
2、在 script 标签中获取元素并赋值：document.getElementById('player').src = 'sounds/intro.mp3';。
3、调用播放方法并捕获错误：document.getElementById('player').play().catch(e => console.error('播放失败:', e));。
