3.1 <audio> 标签基础
HTML5 中的 <audio> 标签用于在网页中插入音频文件。这个元素支持各种音频格式，并为用户提供内置控件以播放、暂停和调整音量。
最简单的例子
<audio> 标签与 src 属性一起使用，src 属性指定音频文件的路径。也可以添加 controls 属性，以显示标准控件，例如播放、暂停和音量调整按钮。
<audio src="audiofile.mp3" controls></audio>
多个来源的例子
为了支持不同的浏览器，可以使用 <source> 标签指定多个音频来源。这可以让浏览器选择支持的音频格式。
<audio controls>
<source src="audiofile.mp3" type="audio/mpeg">
<source src="audiofile.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<audio> 标签的属性
src: 指定音频文件的路径。controls: 显示播放控件。autoplay: 页面加载时自动播放音频。loop: 音频播放结束时重复播放。muted: 页面加载时静音。preload: 指定浏览器如何加载音频。可能的值有：none，metadata，auto。
3.2 属性的使用示例
controls 属性
controls 属性添加标准播放控件，比如“Play”，“Pause”按钮和音量调节器。这属性让音频元素对用户更具互动性和便捷性。
示例：
<audio src="audiofile.mp3" controls></audio>
autoplay 属性
autoplay 属性使得音频文件在页面加载后自动开始播放。使用此属性时要小心，因为音频的自动播放可能会让用户感到困扰。
示例：
<audio src="audiofile.mp3" autoplay></audio>
loop 属性
loop 属性表示音频文件应在结束时循环播放。这对于背景音乐或需要重复的声音效果很有用。
示例：
<audio src="audiofile.mp3" autoplay loop></audio>
muted 属性
muted 属性使音频文件在加载时静音。这在你想让音频默认无声播放时很有用，用户可以根据需要打开声音。
<audio src="audiofile.mp3" muted></audio>
preload 属性
preload 属性告诉浏览器，在页面加载时如何加载音频文件。它可以接受三个值之一：
none: 浏览器不应预加载音频。metadata: 浏览器只加载元数据（如时长、大小等）。auto: 页面加载时，浏览器应完整加载音频。
<audio src="audiofile.mp3" preload="auto"></audio>
3.3 支持的音频格式
为了确保跨浏览器兼容性，建议使用多种音频格式。最常见的格式包括 MP3、OGG 和 WAV。让我们更详细地了解它们。
MP3 格式
MP3 (MPEG-1 Audio Layer III) 是最流行的音频格式之一。支持大多数浏览器和设备。MP3 使用有损压缩，可以在保持较高音质的同时减少文件大小。
示例：
<audio src="audiofile.mp3" type="audio/mpeg"></audio>
OGG 格式
OGG (Ogg Vorbis) 是一种开放的有损音频压缩格式，大多数现代浏览器都支持。它提供良好的音质，常常被用作 MP3 的替代方案。
示例：
<audio src="audiofile.ogg" type="audio/ogg"></audio>
WAV 格式
WAV (Waveform Audio File Format) 是一种无压缩音频格式，可以提供高质量的音频。然而，WAV 文件比 MP3 和 OGG 更大，因此在网络上使用较少。
示例：
<audio src="audiofile.wav" type="audio/wav"></audio>
3.4 格式兼容性
并不是所有浏览器都支持相同的音频格式。为了确保跨浏览器兼容性，建议使用多种音频格式，如 MP3、OGG 和 WAV。
支持多种格式的示例：
<audio controls>
<source src="audiofile.mp3" type="audio/mpeg">
<source src="audiofile.ogg" type="audio/ogg">
<source src="audiofile.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
可访问性
为了确保可访问性，应提供文本替代方案，以防浏览器不支持 <audio> 元素或音频文件。这可以通过在 <audio> 开始和结束标签之间的文本来实现。
提供可访问性的示例：
<audio controls>
<source src="audiofile.mp3" type="audio/mpeg">
<source src="audiofile.ogg" type="audio/ogg">
<source src="audiofile.wav" type="audio/wav">
Your browser does not support the audio element.
You can download the audio file <a href="audiofile.mp3">here</a>.
</audio>
了解 <audio> 标签的功能及其 API 可以帮助我们创建更具互动性和可访问性的网页。
GO TO FULL VERSION