HTML 声音 / 音频
声音可以有很多种方法嵌入到HTML页面中.
问题和解决方案
在HTML中播放音频不怎么容易!
你必须知道很多技巧确保音频文件在支持所有浏览器(Internet Explorer, Chrome, Firefox, Safari, Opera) 和所有设备(PC, Mac , iPad, iPhone).
本章节会概述一下问题和解决方案.
使用插件
插件是扩展浏览器功能的小程序.
插件可以使用<object>标签或<embed>标签嵌入到网页中.
标签中定义容器，包括来源（通常是非HTML资源）, 依赖类型, 判断显示在浏览器中，或者通过一个外部插件正常工作.
HTML 音频 - 使用<embed>元素
<embed>标签定义了一个引用外部内容（非HTML内容）的容器.
下面的代码会在页面中嵌入一个MP3文件:
问题:
- 不同浏览器支持不同的音频格式
- 如果浏览器不支持文件格式，没有插件音频不会被播放
- 如果用户的电脑没有按照插件，音频不会被播放
HTML 音频 - 使用<object>元素
<object>标签也是用来定义外部内容（非HTML）的容器.
下面的代码在网页中嵌入一个MP3文件:
问题:
- 不同浏览器支持不同的音频格式
- 如果浏览器不支持文件格式，没有插件音频不会被播放
- 如果用户的电脑没有按照插件，音频不会被播放
HTML5 <audio> 元素
HTML5 <audio>标签用于定义声音，如：音乐或其他音频流.
<audio>元素可以用于所有当代浏览器.
下例用户展示HTML5 <audio> 标签, 指定一个MP3文件(支持IE, Chrome, Firefox 21+, 和 Safari),和一个OGG文件(支持旧版本的Firefox和Opera).如果播放失败，会显示文本提示:
例子
<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>元素:
例子
<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文件的超链接.如果用户点击这个超链接，浏览器会调用插件进行播放:
关于内联音频的提示
在页面中或在页面的某一部分中包含音频，叫做内联音频.
如果你计划使用内联音频，要注意了，因为大部分用户会觉得这很烦人.一部分用户也有可能在他们的浏览器中关闭内联音频.
最好的建议是在用户期望听到声音的页面放入内联音频. 例如用户点击一个链接听一首歌曲.
HTML多媒体标签
= 表述在HTML5中添加的标签.
| 标签 | 描述 |
|---|---|
| <embed> | 定义一个嵌入对象 |
| <object> | 定义一个嵌入对象 |
| <param> | 定义一个对象参数 |
| <audio> | 定义音频内容 |
| <video> | 定义视频或电影 |
| <source> | 为多媒体元素(<video> 和<audio>)定义媒体来源 |
| <track> | 未多媒体元素(<video> 和 <audio>)定义文本跟踪 |
