HTML5 中 audio 音频标签怎么使用才能在网页中播放音乐-H5教程-PHP中文网

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

html5 中 audio 音频标签怎么使用才能在网页中播放音乐

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

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

最简方式是这样：

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

说明：

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

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

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

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

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

librosa Python 音频与音乐分析库

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

下载

常用控制属性按需添加

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

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

进阶控制：用 JavaScript 动态操作

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

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

还可读写以下属性：