HTML5提供五种嵌入音频方式：一、用<audio src>加controls属性；二、用多个<source>提升格式兼容性；三、JS调用play()/pause()实现自定义控制；四、JS动态改src并调load()切换曲目；五、JS监听canplay/ended/error事件反馈状态。
如果您希望在网页中嵌入音频文件并实现播放功能，HTML5 提供了原生的 <audio> 标签来直接加载和控制音频资源。以下是几种常用且互不依赖的实现方式：
一、使用 <audio> 标签通过 src 属性引入音乐
该方法利用 HTML5 原生的 <audio> 元素，通过 src 属性指定音频文件路径，浏览器自动渲染默认控件，支持基本播放、暂停、音量调节等功能。
1、在 HTML 文件的 <body> 区域内插入 <audio> 标签，并设置 src 属性为音频文件的相对或绝对路径。
2、添加 controls 属性以显示播放器控件界面。
立即学习“前端免费学习笔记（深入）”；
3、可选添加 autoplay、loop 或 muted 属性控制初始行为。
4、示例代码：<audio src="music.mp3" controls></audio>。
二、使用 <audio> 标签配合多个 <source> 实现格式兼容
不同浏览器对音频编码格式的支持存在差异，单独使用 MP3 可能在 Firefox 或 Safari 中失效。通过嵌套多个 <source> 子标签，浏览器将按顺序尝试加载首个支持的格式，提升跨平台兼容性。
1、在 <audio> 标签内部依次写入多个 <source> 标签。
2、每个 <source> 标签需包含 src 和 type 属性，type 值如 "audio/mpeg"（MP3）、"audio/ogg"（OGG）、"audio/wav"（WAV）。
3、确保至少一个格式被目标浏览器支持，否则显示空白控件且无错误提示。
4、示例代码：<audio controls><source src="music.mp3" type="audio/mpeg"><source src="music.ogg" type="audio/ogg"></audio>。
三、通过 JavaScript 获取 audio 元素并调用播放方法
当需要脱离默认控件、实现自定义按钮或响应式交互逻辑时，可使用 JS 获取 <audio> 元素引用，调用其内置方法（如 play()、pause()）进行精确控制。
1、为 <audio> 标签设置 id 属性（例如 id="bgm"），便于 JS 选取。
2、在页面加载完成后，使用 document.getElementById() 获取该元素。
3、绑定按钮点击事件，调用 audio.play() 启动播放；若需暂停，则调用 audio.pause()。
4、注意：现代浏览器禁止自动播放含声音的媒体，首次播放必须由用户手势（如 click）触发。
四、使用 JavaScript 动态设置 src 并加载新音频
适用于切换曲目、播放列表或根据条件加载不同音频资源的场景。JS 可在运行时修改 <audio> 元素的 src 属性，并手动调用 load() 方法重新解析媒体资源。
1、获取已存在的 <audio> 元素对象。
2、将新音频路径赋值给该对象的 src 属性。
3、立即调用 load() 方法，使浏览器重新加载并准备新资源。
4、随后可调用 play() 播放新音频；若需静音后切换，可先设 muted = true 再播放。
5、未调用 load() 将导致 src 更改无效，仍播放旧音频。
五、通过 JavaScript 监听音频事件实现状态反馈
为增强用户体验，可监听 <audio> 元素的关键事件（如 canplay、ended、error），在特定时机执行对应逻辑，例如自动播放下一首、显示加载状态或提示错误。
1、使用 addEventListener() 为 audio 元素注册事件监听器。
2、监听 canplay 事件表示媒体已加载足够数据可开始播放，适合在此触发自动播放。
3、监听 ended 事件可在当前音频播放完毕后执行跳转、循环或 UI 更新操作。
4、监听 error 事件可捕获加载失败（如 404、跨域、格式不支持），并显示友好提示。
5、所有事件监听必须在 audio.src 设置完成之后注册，否则可能错过早期事件。
