标签可直接在网页播放音乐，无需插件；需正确设置src、controls等属性，推荐用多个提升格式兼容性，并支持autoplay、loop等属性及JavaScript动态控制。

直接用 <audio></audio> 标签就能在网页中播放音乐，不需要插件，也不用额外库。关键在于写对标签结构、选对格式、配好属性。

基础写法：一行代码启动播放器

最简方式是这样：

<audio src="music.mp3" controls></audio>

说明：

• src 指向 MP3 文件路径（可为相对路径如 "./audio/bg.mp3"，也可为绝对 URL）
• controls 属性必须加，否则用户看不到播放/暂停按钮、进度条等控件
• 浏览器会自动渲染默认播放界面，支持播放、暂停、拖动、音量调节

提升兼容性：提供多种音频格式

不同浏览器支持的格式不同（比如 Safari 支持 MP3，Firefox 更倾向 OGG）。推荐用 <source></source> 列出多个选项：

立即学习“前端免费学习笔记（深入）”；

librosa Python 音频与音乐分析库

librosa 是一个用于音频和音乐分析的 Python 库。它提供了特征提取、频谱分析、节拍跟踪、起始检测和音频可视化的工具，基于 NumPy 和 SciPy 构建，用于科学音频计算。

下载

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  <source src="music.wav" type="audio/wav">
  您的浏览器不支持 audio 元素。
</audio>

浏览器会按顺序尝试加载，遇到第一个能识别的就播放。末尾文字是给老旧浏览器的降级提示。

常用控制属性按需添加

这些属性直接写在 <audio></audio> 开始标签里即可生效：

• autoplay：页面一打开就自动播放（但多数现代浏览器要求用户有交互后才允许，慎用）
• loop：循环播放，适合背景音乐
• muted：静音启动，常配合 autoplay 使用（绕过自动播放限制）
• preload="metadata"：只预加载时长、封面等信息，不加载全部音频，节省流量又加快控件响应

进阶控制：用 JavaScript 动态操作

如果想自定义按钮或联动页面逻辑，可以不用 controls，改用 JS 控制：

<audio id="myAudio">
  <source src="music.mp3">
</audio>
<button onclick="document.getElementById('myAudio').play()">播放</button>
<button onclick="document.getElementById('myAudio').pause()">暂停</button>

还可读写以下属性：

• audio.volume = 0.7（0.0–1.0）
• audio.currentTime = 30（跳到第30秒）
• 监听 ended 事件实现播完自动切换下一首