一、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> 的字幕文件或其他文本文件。 |