实例详细介绍HTML音频标签audio标签
作者:admin 时间:2022-7-29 12:32:23 浏览:在上一篇文章，介绍了《HTML中的视频标签video标签》，在本文中，将详细介绍HTML音频标签audio标签。
就像<video>标签用于将视频文件添加到你的网站一样，<audio>标签用于将<audio>文件添加到你的网页。HTML5 提供了这个标签，你可以在其中将音乐/音频文件嵌入到 HTML 文档中，而不是使用任何第三方插件（外部库）。你可以将3种类型的文件添加到音频标签中：
- .mp3
- .wav
- .ogg
句法
<audio>
<source src="music.mp3" type="audio/mp3">
</audio>
以上是在 HTML 文档中使用音频文件的语法，但仅仅写这些是不够的，你必须在 src 属性中指定音频文件的文件路径。我们将在属性部分看到它们。基本上，<audio>标签与 video 标签几乎相同。甚至有些属性也是一样的。让我们看看其中的一些。
属性
让我们从第一个开始。
- src 'src' 属性用于将音频文件添加到你的 HTML 文档中。你必须在此处提供音频文件的路径，然后只有音频会在浏览器上播放。
请参阅以下示例
<audio src= "audio.mp3"> </audio>
即使这会将音频文件添加到你的网页，你也无法看到它。这是因为你必须添加另一个称为“controls”的属性，该属性将为你提供播放、暂停和音频按钮等控件，就像视频标签一样。
<audio src="music.mp3"></audio>
<p>No output</p>
<audio controls src="music.mp3"></audio>
这里我们只添加了一个音频文件（.mp3）。如果浏览器不支持这种类型的音频文件怎么办？在这种情况下，如果不支持第一个文件，你将需要一个可以播放的备份文件。例如，如果不支持.mp3文件，那么我将添加另一个文件（比如说.ogg）。如果.mp3未播放，此文件将用作备份文件。
此时，你不能在<audio>标签内使用src属性，因为“src”只能有一个文件路径。我们需要添加超过1个文件路径。这就是为什么你必须为<source>指定一个单独的标签。
让我们用最后一个例子来理解
<audio>
<source src= "audio.mp3" type="audio/mp3">
<source src= "audio.ogg" type="audio/ogg">
</audio>
如你所见，我在这里使用了两个音频文件。因此，我们必须使用<source>标签。
- controls 下一个属性是controls属性，用于在浏览器上显示播放、暂停、静音等控件。你必须在
<audio>标记内提供控件属性才能显示。
<audio controls>
<source src="music.mp3" type="audio/mp3">
</audio>
以下是输出
你可以将音频文件的控件视为输出。
- autoplay 此属性用于在页面加载或音频文件完全下载后立即自动播放音频。但最近，最新版本的 Google Chrome 已禁用此“自动播放”功能。你可以在Mozilla、Microsoft Edge和旧版 Google Chrome上运行代码。
下面是一个例子
<audio controls autoplay>
<source src="music.mp3" type="audio/mp3">
</audio>
以下是输出
你看不到音频自动播放，因为它已在 Google Chrome 中被禁用。但是，如果你尝试在任何其他浏览器上运行此代码，你肯定会看到音频自动播放。
- muted 静音属性用于在页面加载时静音音频。你可以在音量条旁边看到一个叉号，表示音频已静音；单击该图标以听到声音。
让我们看看这个例子
<audio controls muted>
<source src="music.mp3" type="audio/mp3">
</audio>
以下是输出
从输出中，可以看到音频已禁用。那是因为muted属性。
- loop 此属性用于循环播放音频。一旦音频完成播放，音频将再次从头开始播放直到结束。这将无限进行。
让我们看看这个例子
<audio controls loop>
<source src="music.mp3" type="audio/mp3">
</audio>
播放音频直到结束，你将看到音频重新开始，因为使用了“loop”属性。
总结
<audio>标签用于在文档中嵌入声音内容，例如音乐或其他音频流。
你可以在<audio>标记中使用的属性包括：src、controls、autoplay、muted等。
- 站长推荐
