北海网站设计公司3秒做一个盲盒
一、HTML 音频概述
在 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 验证。 -
不同浏览器对音频格式的支持不同。
-
如果浏览器不支持该文件格式，且没有插件，音频无法播放。
-
用户计算机未安装插件时，音频无法播放。
-
-
（二）使用 HTML5 <audio> 元素
-
<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 解决方法
-
结合使用
<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>预览
-
优点：
-
简单，用户点击链接即可播放音频。
-
-
问题：
-
音频播放依赖于浏览器的“辅助应用程序”，用户体验可能不佳。
-
-
三、音频格式与浏览器支持
-
MP3：支持 Internet Explorer、Chrome 和 Safari。
-
OGG：支持 Firefox 和 Opera。
-
WebM：支持 Chrome 和 Opera。
四、内联声音说明
-
内联声音：当音频作为网页的一部分时，称为内联声音。
-
注意事项：
-
内联声音可能会让用户感到烦恼，建议仅在用户期望听到声音时使用。
-
用户可能已关闭浏览器中的内联声音选项。
-
五、HTML 多媒体标签
| 标签 | 描述 |
|---|---|
<embed> | 定义内嵌对象。HTML4 中不赞成，HTML5 中允许。 |
<object> | 定义内嵌对象。 |
<param> | 定义对象的参数。 |
<audio> | 定义声音内容。 |
<video> | 定义视频或影片。 |
<source> | 定义 <video> 和 <audio> 的多媒体资源。 |
<track> | 定义 <video> 和 <audio> 的字幕文件或其他文本文件。 |