HTML 音频（Audio）学习笔记

一、HTML 音频概述

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

二、音频播放方法及问题

（一）使用插件

1. <object> 标签

   • <object> 标签定义外部内容的容器，可以用来嵌入音频文件。

   • 示例代码：

     HTML复制

     <object height="50" width="100" data="horse.mp3"></object>

     预览

   • 问题：

     • 不同浏览器对音频格式的支持不同。

     • 如果浏览器不支持该文件格式，且没有插件，音频无法播放。

     • 用户计算机未安装插件时，音频无法播放。

2. <embed> 标签

   • <embed> 标签定义外部内容的容器，HTML5 中允许使用，但在 HTML4 中是非法的。

   • 示例代码：

     HTML复制

     <embed height="50" width="100" src="horse.mp3">

     预览

   • 问题：

     • <embed> 标签在 HTML4 中无效，页面无法通过 HTML4 验证。

     • 不同浏览器对音频格式的支持不同。

     • 如果浏览器不支持该文件格式，且没有插件，音频无法播放。

     • 用户计算机未安装插件时，音频无法播放。

（二）使用 HTML5 <audio> 元素

1. <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 验证。

     • 需要将音频文件转换为不同格式以兼容不同浏览器。

     • 在老式浏览器中不起作用。

（三）最佳 HTML 解决方法

1. 结合使用 <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> 元素无法回退显示错误消息。

（四）使用超链接

1. 超链接播放音频

   • 示例代码：

     HTML复制

     <a href="horse.mp3">Play the sound</a>

     预览

   • 优点：

     • 简单，用户点击链接即可播放音频。

   • 问题：

     • 音频播放依赖于浏览器的“辅助应用程序”，用户体验可能不佳。

三、音频格式与浏览器支持

• MP3：支持 Internet Explorer、Chrome 和 Safari。

• OGG：支持 Firefox 和 Opera。

• WebM：支持 Chrome 和 Opera。

四、内联声音说明

• 内联声音：当音频作为网页的一部分时，称为内联声音。

• 注意事项：

  • 内联声音可能会让用户感到烦恼，建议仅在用户期望听到声音时使用。

  • 用户可能已关闭浏览器中的内联声音选项。

五、HTML 多媒体标签