当前位置 : IT培训网 > Web前端 > Web教程 > 如何在HTML5网页中插入Audio(音频)

如何在HTML5网页中插入Audio(音频)

时间:2016-12-07 14:33:02  来源:web前端培训网  作者:IT培训网  已有:名学员访问该课程
音频输出的质量决定我们的听觉,所以一款好的音频播放器可以提高我们的听觉世界,如果你想要制作精美的音乐播放器,想要体验一把音频来带的刺激,那就赶紧加入我们吧,让我们一起制作音频小软件,并植入到网页之中,让

音频是什么呢,和视频有什么关联呢,其实音频和视频一样,只不过一个是听,一个是看而已,两者结合起来就组成了一个完整的视频了。那么如何在HTML5网页中插入音频呢,想要知道的话,赶紧随IT培训网小编一起来看看吧!

HTML5 Audio(音频)

HTML5 提供了播放音频文件的标准。

HTML5 Audio 标签

标签

描述

<audio>

定义了声音内容

<source>

规定了多媒体资源, 可以是多个,在 <video> 与 <audio>标签中使用

 

互联网上的音频

直到现在,仍然不存在一项旨在网页上播放音频的标准。

今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。

HTML5 规定了在网页上嵌入音频元素的标准,即使用 <audio> 元素。

浏览器支持

如何在HTML5网页中插入Audio(音频)_www.cnitedu.cn

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.cnitedu.cn)</title> 

</head>

<body>

<audio controls>

  <source src="horse.ogg" type="audio/ogg">

  <source src="horse.mp3" type="audio/mpeg">

您的浏览器不支持 audio 元素。

</audio>

</body>

</html>

运行结果:

如何在HTML5网页中插入Audio(音频)_www.cnitedu.cn

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%
------分隔线----------------------------
------分隔线----------------------------
Web 教程
1、HTML 教程
1.1 HTML 简介
1.2 HTML 编辑器
1.3 HTML 基础
1.4 HTML 元素
1.5 HTML 属性
1.6 HTML 标题
1.7 HTML 段落
1.8 HTML 文本格式化
1.9 HTML 链接
1.10 HTML 头部
1.11 HTML CSS
1.12 HTML 图像
1.13 HTML 表格
1.14 HTML 列表
1.15 HTML 区块
1.16 HTML 布局
1.17 HTML 表单
1.18 HTML 框架
1.19 HTML 颜色
1.20 HTML 颜色名
1.21 HTML 颜色值
1.22 HTML 脚本
1.23 HTML 字符实体
1.24 HTML URL
1.25 HTML 速查列表
1.26 HTML 总结
1.27 HTML 简介
2、HTML5
2.1 HTML5 教程
2.2 HTML5 浏览器支持
2.3 HTML5 新元素
2.4 HTML5 Canvas
2.5 HTML5 内联 SVG
2.6 HTML5 MathML
2.7 HTML5 拖放
2.8 HTML5 地理定位
2.9 HTML5 Video(视频)
2.10 HTML5 Audio(音频)
2.11 HTML5 Input 类型
2.12 HTML5 表单元素
2.13 HTML5 表单属性
2.14 HTML5 语义元素
2.15 HTML5 Web 存储
2.16 HTML5 Web SQL
2.17 HTML5 应用程序缓存
2.18 HTML5 Web Workers
2.19 HTML5 SSE
2.20 HTML5 WebSocket
2.21 HTML5 代码规范
3、HTML 媒体
3.1 HTML 媒体(Media)
3.2 HTML 插件
3.3 HTML 音频(Audio)
3.4 HTML视频(Videos)播放