HTML 音频（Audio）学习笔记

news2025/4/15 6:18:24

在 HTML 中，音频可以通过多种方式播放，但要确保音频在不同浏览器和设备上都能正常播放，需要掌握一些技巧。HTML5 引入了 <audio> 元素，为音频播放提供了一种标准方法，但在 HTML4 中，音频播放通常依赖于插件，如 <object> 或 <embed> 标签。

<object> 标签
- <object> 标签定义外部内容的容器，可以用来嵌入音频文件。
- 示例代码：
  
  HTML复制
```
<object height="50" width="100" data="horse.mp3"></object>
```
  预览
- 问题：
  - 不同浏览器对音频格式的支持不同。
  - 如果浏览器不支持该文件格式，且没有插件，音频无法播放。
  - 用户计算机未安装插件时，音频无法播放。
<embed> 标签
- <embed> 标签定义外部内容的容器，HTML5 中允许使用，但在 HTML4 中是非法的。
- 示例代码：
  
  HTML复制
```
<embed height="50" width="100" src="horse.mp3">
```
  预览
- 问题：
  - <embed> 标签在 HTML4 中无效，页面无法通过 HTML4 验证。
  - 不同浏览器对音频格式的支持不同。
  - 如果浏览器不支持该文件格式，且没有插件，音频无法播放。
  - 用户计算机未安装插件时，音频无法播放。

<audio> 元素
- <audio> 元素是 HTML5 新增的标签，用于播放音频文件。
- 示例代码：
  
  HTML复制
```
<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
  <source src="horse.ogg" type="audio/ogg">
  Your browser does not support this audio format.
</audio>
```
  预览
- 优点：
  - 在所有现代浏览器中有效。
- 问题：
  - <audio> 标签在 HTML4 中无效，页面无法通过 HTML4 验证。
  - 需要将音频文件转换为不同格式以兼容不同浏览器。
  - 在老式浏览器中不起作用。

结合使用 <audio> 和 <embed>
- 示例代码：
  
  HTML复制
```
<audio controls height="100" width="100">
  <source src="horse.mp3" type="audio/mpeg">
  <source src="horse.ogg" type="audio/ogg">
  <embed height="50" width="100" src="horse.mp3">
</audio>
```
  预览
- 优点：
  - 尝试使用 <audio> 元素播放音频，如果失败则回退到 <embed>。
- 问题：
  - 需要将音频转换为不同格式。
  - <embed> 元素无法回退显示错误消息。

超链接播放音频
- 示例代码：
  
  HTML复制
```
<a href="horse.mp3">Play the sound</a>
```
  预览
- 优点：
  - 简单，用户点击链接即可播放音频。
- 问题：
  - 音频播放依赖于浏览器的“辅助应用程序”，用户体验可能不佳。

标签	描述
`<embed>`	定义内嵌对象。HTML4 中不赞成，HTML5 中允许。
`<object>`	定义内嵌对象。
`<param>`	定义对象的参数。
`<audio>`	定义声音内容。
`<video>`	定义视频或影片。
`<source>`	定义 `<video>` 和 `<audio>` 的多媒体资源。
`<track>`	定义 `<video>` 和 `<audio>` 的字幕文件或其他文本文件。