视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
HTML5中音频的详细解析
2020-11-27 15:04:43 责编:小采
文档

HTML5中出了很多新的东西,和旧版的有些不一样,本篇文章就来讲述HTML5中新出音频元素的详细解析

HTML5 Audio(音频)

最后一次修改 2017年08月01日

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

互联网上的音频

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

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

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

浏览器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素.

注意: Internet Explorer 8 及更早IE版本不支持 <audio> 元素.

HTML5 Audio - 如何工作

如需在 HTML5 中播放音频,你需要使用以下代码:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>PHP中文网</title> 
</head>
<body>
<audio controls>
 <source src="/statics/demosource/horse.ogg" type="audio/ogg">
 <source src="/statics/demosource/horse.mp3" type="audio/mpeg">

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

</audio>

</body>

</html>

control 属性供添加播放、暂停和音量控件。

在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。

<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件,浏览器将使用第一个支持的音频文件

音频格式及浏览器支持

目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg;

音频格式的MIME类型:MP3、Ogg、Wav;

HTML5Audio标签:

<audio>定义了声音内容

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

<audio>标签的属性:

autoplay:如果出现该属性,则音频在就绪后马上播放。

controls:如果出现该属性,则向用户显示控件,比如播放按钮。

loop:如果出现该属性,则每当音频结束时重新开始播放。

preload:如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。

src:要播放的音频的 URL。

<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的:
<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>

上面的例子使用一个 Ogg 文件,适用于Firefox、Opera 以及 Chrome 浏览器。

要确保适用于 Safari 浏览器,音频文件必须是 MP3 或 Wav 类型。

audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式:

<audio controls="controls">
 <source src="song.ogg" type="audio/ogg">
 <source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

【相关推荐】

html的基础元素,让你零基础学习HTML

HTML5中的解析

下载本文
显示全文
专题