IT培训网 - IT职场人学IT技术上IT培训网
如何在HTML5网页中插入Audio(音频)
时间：2016-12-07 14:33:02 来源：web前端培训网 作者：IT培训网 已有：名学员访问该课程
音频输出的质量决定我们的听觉，所以一款好的音频播放器可以提高我们的听觉世界，如果你想要制作精美的音乐播放器，想要体验一把音频来带的刺激，那就赶紧加入我们吧，让我们一起制作音频小软件，并植入到网页之中，让
音频是什么呢，和视频有什么关联呢，其实音频和视频一样，只不过一个是听，一个是看而已，两者结合起来就组成了一个完整的视频了。那么如何在HTML5网页中插入音频呢，想要知道的话，赶紧随IT培训网小编一起来看看吧！
HTML5 Audio(音频)
HTML5 提供了播放音频文件的标准。
HTML5 Audio 标签
|
标签 |
描述 |
|
<audio> |
定义了声音内容 |
|
<source> |
规定了多媒体资源, 可以是多个，在 <video> 与 <audio>标签中使用 |
互联网上的音频
直到现在，仍然不存在一项旨在网页上播放音频的标准。
今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。
浏览器支持
Internet ExplorerFirefoxOperaGoogle ChromeSafari
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素.
注意: Internet Explorer 8 及更早IE版本不支持 <audio> 元素.
HTML5 Audio - 如何工作
如需在 HTML5 中播放音频，你需要使用以下代码：
实例
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>it培训网(www.itpxw.cn)</title>
</head>
<body>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
</body>
</html>
运行结果：
control 属性供添加播放、暂停和音量控件。
在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。
<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件
音频格式及浏览器支持
目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg:
|
浏览器 |
MP3 |
Wav |
Ogg |
|
Internet Explorer 9+ |
YES |
NO |
NO |
|
Chrome 6+ |
YES |
YES |
YES |
|
Firefox 3.6+ |
YES |
YES |
YES |
|
Safari 5+ |
YES |
YES |
NO |
|
Opera 10+ |
YES |
YES |
YES |
音频格式的MIME类型
|
Format |
MIME-type |
|
MP3 |
audio/mpeg |
|
Ogg |
audio/ogg |
|
Wav |
audio/wav |
音频输出的质量决定我们的听觉，所以一款好的音频播放器可以提高我们的听觉世界，如果你想要制作精美的音乐播放器，想要体验一把音频来带的刺激，那就赶紧加入我们吧，让我们一起制作音频小软件，并植入到网页之中，让更多的人受益。
顶一下
(4)
66.7%
踩一下
(2)
33.3%
------分隔线----------------------------
------分隔线----------------------------
Java5保姆级教学方式，你适
超强代码人的薪资到底有
Java语言和GO语言到底哪个
为何让你坚持学习人工智
IT技术给零售业带来什么样
学习web前端需要懂得优化
web前端开发学会之后能从
传统的IT培训机构如何打赢
跳槽季节来啦，学Java的伙
没有一点IT经验的人学大数