技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

实例详细介绍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等。

标签: 音频标签  audio标签  
相关文章
    x
    x
    • 站长推荐