HTML音频

时间:2020-02-23 14:33:40  来源:igfitidea点击:

在本教程中,我们将了解音频标记以在HTML中使用音频文件。

HTML中的音频标签是什么?

audio标记是HTML5元素,它用于嵌入网页中的音频。

例子

在以下示例中,我们正在创建一个 audio元素。

<audio controls="controls" preload="none" src="/audio/alien-noise-01.mp3">
  Your browser does not support the HTML audio tag.
</audio>

另一种方式我们可以做到这一点是使用 source标记和包括多个文件。

<audio controls="controls" preload="none">
  <source src="/audio/alien-noise-01.mp3" type="audio/mpeg">
  <source src="/audio/alien-noise-01.wav" type="audio/wav">
  <source src="/audio/alien-noise-01.ogg" type="audio/ogg">
  Your browser does not support the HTML audio tag.
</audio>

笔记!在上面的例子中文中 Your browser does not support the HTML audio tag.如果浏览器不支持音频标记,将显示。

支持的音频格式

以下是支持的音频格式。

|文件|扩展名|说明|
| --- - | --- | - - |
| MP3 | .mp3 |音频/MPEG |
| OGG | .ogg |音频/ogg |
| WAV | .wav |音频/WAV |

我们可以使用本的查找文件文件来查找音频文件的MIME类型。

atf的属性 audio标签

以下是我们可以添加的属性 audio标签。

|属性|值|描述|
| --- - | --- | - - |
|controls|controls|如果存在,则允许用户通过提供寻求,卷和暂停/恢复控制来控制音频播放。 |
|preload|none
Auto
metadata|这告诉浏览器关于作者认为将提供更好的用户体验的内容。它是一个枚举属性,可以采取以下值。即使用户不使用它。 |
| autoplay | autoplay |如果目前会尽快开始播放音频。 |
|loop|loop|如果目前将重新开始播放音频。 |
|muted|muted|如果指定将静音音频。 |
| SRC | URL |这指定了音频文件的“URL”。 |

none标签

我们也可以使用 auto标记包含音频文件。

为此,我们设置了 metadata属性到音频文件URL和 url属性到音频文件的MIME类型。

在以下exmaple中,我们使用3种不同的文件类型。

<source src="/audio/soundeffect/alien-noise-01.mp3" type="audio/mpeg">
<source src="/audio/soundeffect/alien-noise-01.wav" type="audio/wav">
<source src="/audio/soundeffect/alien-noise-01.ogg" type="audio/ogg">

如果我们使用的话 source元素然后我们可以跳过 source在开放中的属性 src标签。