HTML HTML5 PHP Mysql Linux 缓存技术 工具 资讯 读书 其他

HTML 声音 / 音频


声音可以有很多种方法嵌入到HTML页面中.


问题和解决方案

在HTML中播放音频不怎么容易!

你必须知道很多技巧确保音频文件在支持所有浏览器(Internet Explorer, Chrome, Firefox, Safari, Opera) 和所有设备(PC, Mac , iPad, iPhone).

本章节会概述一下问题和解决方案.


使用插件

插件是扩展浏览器功能的小程序.

插件可以使用<object>标签或<embed>标签嵌入到网页中. 

标签中定义容器,包括来源(通常是非HTML资源), 依赖类型, 判断显示在浏览器中,或者通过一个外部插件正常工作.


HTML 音频 - 使用<embed>元素

<embed>标签定义了一个引用外部内容(非HTML内容)的容器.

下面的代码会在页面中嵌入一个MP3文件:

例子

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

亲自试一试 »

问题:

  • 不同浏览器支持不同的音频格式
  • 如果浏览器不支持文件格式,没有插件音频不会被播放
  • 如果用户的电脑没有按照插件,音频不会被播放

HTML 音频 - 使用<object>元素

<object>标签也是用来定义外部内容(非HTML)的容器.

下面的代码在网页中嵌入一个MP3文件:

例子

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

亲自试一试 »

问题:

  • 不同浏览器支持不同的音频格式
  • 如果浏览器不支持文件格式,没有插件音频不会被播放
  • 如果用户的电脑没有按照插件,音频不会被播放

HTML5 <audio> 元素

HTML5 <audio>标签用于定义声音,如:音乐或其他音频流.

<audio>元素可以用于所有当代浏览器.

下例用户展示HTML5 <audio> 标签, 指定一个MP3文件(支持IE, Chrome, Firefox 21+, 和 Safari),和一个OGG文件(支持旧版本的Firefox和Opera).如果播放失败,会显示文本提示:

例子

<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>元素不支持老版本的浏览器

HTML 音频 - 最佳方案

使用HTML5<audio>元素+<audio>元素+<embed>元素,才是最佳方案 .

下例使用<audio>元素播放MP3或者播放OGG文件. 如果失败,代码会继续执行<embed>元素:

例子

<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
  <source src="horse.ogg" type="audio/ogg">
  <embed height="50" width="100" src="horse.mp3">
</audio>

亲自试一试 »

问题:

  • 必须包含不同的文件格式
  • <embed>元素如果失败,不能显示错误信息

HTML 音频 - 使用超链接

如果超链接的地址是多媒体文件,大部分浏览器会使用“插件”播放这个文件.

下面的代码显示了一个链接地址是MP3文件的超链接.如果用户点击这个超链接,浏览器会调用插件进行播放:

例子

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

亲自试一试 »


关于内联音频的提示

在页面中或在页面的某一部分中包含音频,叫做内联音频.

如果你计划使用内联音频,要注意了,因为大部分用户会觉得这很烦人.一部分用户也有可能在他们的浏览器中关闭内联音频.

最好的建议是在用户期望听到声音的页面放入内联音频. 例如用户点击一个链接听一首歌曲.


HTML多媒体标签

= 表述在HTML5中添加的标签.

标签 描述
<embed> 定义一个嵌入对象
<object> 定义一个嵌入对象
<param> 定义一个对象参数
<audio> 定义音频内容
<video> 定义视频或电影
<source> 为多媒体元素(<video> 和<audio>)定义媒体来源
<track> 未多媒体元素(<video> 和 <audio>)定义文本跟踪


To Top