HTML音频

HTML <audio> 标签用于在 HTML 页面中嵌入支持音频播放的媒体播放器。我们使用 HTML <audio> 标签和 <source> 标签来添加音频播放器。例如，

<audio controls>
  <source src="audio.mp3" type="audio/mp3">
</audio>

浏览器输出

在上面的代码中

• audio.mp3 - 我们要显示的音频的路径
• audio/mp3 - 我们要显示的资源类型。

上面示例中的 audio.mp3 文件与 HTML 文件位于同一目录。

带多个 <source> 标签的 HTML <audio>

我们可以在 <audio> 标签内包含多个视频 <source>。例如，

<audio controls>
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mpeg">
</audio>

<source> 标签用于为 <audio> 标签等多媒体标签提供多种备用格式的资源 URL。浏览器会选择第一个支持其资源的 <source> 标签。在上述情况下，如果浏览器不支持 ogg 格式，它将转到下一个 <source> 标签并播放 mp3 文件。

HTML <audio> 标签的属性

让我们看看 HTML <audio> 标签支持的属性。

• 自动播放
• 控制
• 循环
• 静音
• src
• 预加载

我们将详细了解这些内容。

自动播放

autoplay 属性会自动播放音频。例如，

<audio controls autoplay>
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mpeg">
</audio>

浏览器输出

这将导致音频文件在页面加载后立即开始播放。

注意： autoplay 属性通常被认为是不良的用户体验，因为它可能会让用户感到烦恼。

控制

control 属性允许用户控制音频播放，包括音量、快进和暂停/恢复播放。例如，

<audio controls>
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mpeg">
</audio>

浏览器输出

这将为元素添加默认的音频控件，允许用户播放、暂停、调整音量和快进音频文件。

您可以使用 JavaScript 和 HTMLMediaElement API 自定义音频控件。这使您可以构建具有自定义设计和功能的自己的音频播放器。

循环

loop 属性指定音频在结束时从头开始播放。例如，

<audio controls loop>
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mpeg">
</audio>

浏览器输出

这将导致音频文件在播放结束时从头开始。

静音

muted 属性将音频音量设置为 0。例如，

<audio controls muted>
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mpeg">
</audio>

浏览器输出

在上面的示例中，音频文件将以音量设置为零开始播放

src

src 属性指定应在音频播放器中播放的音频文件的位置。例如，

<audio src="/audios/sample.mp3" controls>
</audio>

在这里，音频元素将创建一个音频播放器，播放位于 /audios/sample.mp3 的音频文件

注意：HTML 视频至少需要一个 src 属性或 <source> 标签。

预加载

preload 属性指定页面加载后应如何加载音频文件以获得更好的用户体验。它可能具有以下值之一

1. none：表示不应预加载音频。例如，

<audio src="song.mp3" preload="auto"></audio>

2. metadata：表示仅获取音频元数据。例如，

<audio src="song.mp3" preload="metadata"></audio>

3. audio：表示在页面加载时将加载整个音频文件。例如，

<audio src="song.mp3" preload="auto"></audio>