HTML 音频
- HTML
<audio>
标签:用于在 HTML 页面中嵌入音频播放器,通过<source>
标签添加不同格式的音频文件。 - 多格式支持:通过在
<audio>
标签内添加多个<source>
标签,提供多种音频格式的备选,浏览器自动选择支持的格式播放。 - 音频控制属性:
autoplay
(自动播放),controls
(用户控制播放),loop
(循环播放),muted
(静音),src
(指定音频文件位置),preload
(预加载设置)。
HTML <audio>
标签用于将支持音频播放的媒体播放器嵌入 HTML 页面中。我们使用 HTML <audio>
标签和 <source>
标签添加音频播放器。例如,
<audio controls>
<source src="audio.mp3" type="audio/mp3" />
</audio>
浏览器输出
在上述代码中:
audio.mp3
- 我们想要显示的音频路径audio/mp3
- 我们想要显示的资源类型
上述示例中的 audio.mp3
文件位于与 HTML 文件相同的目录中。
HTML <audio>
与多个 <source>
标签
我们可以在 <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>
标签支持的属性。
autoplay
controls
loop
muted
src
preload
我们将详细了解这些。
autoplay
autoplay
属性会自动播放音频。例如,
<audio controls autoplay>
<source src="audio.ogg" type="audio/ogg" />
<source src="audio.mp3" type="audio/mpeg" />
</audio>
浏览器输出
这将导致音频文件在页面加载时立即开始播放。** **
注意: autoplay 属性通常被认为是一种糟糕的用户体验,因为它可能会让用户感到烦恼。
controls
controls
属性允许用户控制音频播放,包括音量、寻找以及暂停/恢复播放。例如,
<audio controls>
<source src="audio.ogg" type="audio/ogg" />
<source src="audio.mp3" type="audio/mpeg" />
</audio>
浏览器输出
这将向元素添加默认的音频控制选项,允许用户播放、暂停、调整音量,并在音频文件中进行寻找。
您可以使用 JavaScript 和 HTMLMediaElement
API 自定义音频控件。这允许您构建具有自定义设计和功能的音频播放器。
loop
loop
属性指定音频在结束后从头开始播放。例如,
<audio controls loop>
<source src="audio.ogg" type="audio/ogg" />
<source src="audio.mp3" type="audio/mpeg" />
</audio>
浏览器输出
这将导致音频文件在达到末尾时从头开始播放。
muted
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
preload
属性指定页面加载后如何加载音频文件以获得更好的用户体验。它可能具有以下值之一:
none
:表示不应预加载音频。例如,
<audio src="song.mp3" preload="auto"></audio>
metadata
:表示只获取音频元数据。例如,
<audio src="song.mp3" preload="metadata"></audio>
audio
:表示页面加载时将加载整个音频文件。例如,
<audio src="song.mp3" preload="auto"></audio>