HTML audio 标签 - 绿叶网

HTML audio 语法

在 HTML 中，audio 标签用于在网页嵌入音频，比如音乐或音效。

语法：

<audio>
    <source type="audio/mpeg" src="音频路径">
    <source type="audio/ogg" src="音频路径">
    你的浏览器不支持音频播放
</audio>

说明：

audio 标签内部一般包含多个 source 标签以及 1 个文本。source 标签用于指定音频源，你必须为其指定 src 和 type 属性。

src（必选）：表示音频文件的路径。
type（必选）：表示音频格式。常用取值有 "audio/mpeg"、"audio/ogg"。如果当前浏览器能同时识别几种音频格式，则最终会使用第一个可识别的格式文件。

如果浏览器不支持 audio 标签，就会显示最后一行文本（即 “你的浏览器不支持音频播放”），如果浏览器支持 audio 标签，则不会显示该文本。

audio 标签的属性有很多，常用的如下表所示。

audio 标签的属性
属性	说明
autoplay	是否自动播放
controls	是否显示控件
loop	是否循环播放
preload	是否预加载

autoplay、controls 和 loop 属性无需多说；而 preload 属性表示是否预加载，它有 3 个取值，如下表所示。

preload 属性取值
属性	说明
auto	预加载（默认值）
metadata	只预加载元数据（即媒体字节数、第一帧、播放列表等）
none	不预加载

提示: audio 和 video 这 2 个支持的属性几乎是一样的，小伙伴们可以对比理解一下。

HTML audio 摘要

属于	HTML 标签
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

HTML audio 示例

接下来，我们通过几个简单的例子来讲解一下 HTML audio 标签是如何使用的。

示例 1：audio 标签的基本用法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <audio controls>
        <source type="audio/ogg" src="medias/music.ogg">
        <source type="audio/mpeg" src="medias/music.mp3">
        你的浏览器不支持播放此音频
    </audio>
</body>
</html>

页面效果如下图所示。

HTML audio标签示例

分析：

audio 标签的 controls 属性用于显示播放控件。

示例 2：audio 标签实现背景音乐

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <audio autoplay loop>
        <source type="audio/ogg" src="medias/music.ogg">
        <source type="audio/mpeg" src="medias/music.mp3">
        你的浏览器不支持播放此音频
    </audio>
</body>
</html>

页面效果如下图所示。

HTML audio标签实现背景音乐

分析：

对于 audio 标签来说，如果不给它加上 controls 属性，此时就不会显示播放控件。然后我们再给它加上 autoplay 和 loop 这 2 个属性，就可以实现背景音乐效果了。

注意: 现代浏览器（包括 Chrome、Edge、Firefox 等）一般会阻止音频自动播放，除非用户与页面进行了交互（如点击）。因此，背景音乐可能无法在页面加载时立即生效。