好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

HTML5 Audio 音频

Web 上的音频

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

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

html5 规定了一种通过 au dio 元素来包含音频的标准 方法 。

au dio 元素能够播放声音 文件 或者音频流。

音频格式

当前,au dio 元素 支持 三种音频格式:

? IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 Ogg Vorbis ? √ √ √ ? MP3 √ ? ? √ √ Wav ? √ √ ? √


音频格式的 MIME 类型 格式 ?MIME-type? ? ?MP3? ? au dio /mpeg?? ? ?Ogg?? ? ?au dio /ogg?? ? Wav ? au dio /wav??


如何工作

如需在 html5 中 播放音频 ,您所有需要的是:

<au dio ?src="song.ogg"?controls="controls">
</au dio >

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

<au dio > 与 </au dio > 之间插入的 内容 是供 不支持 au dio 元素的浏览器 显示 的:

实例
<au dio ?src="song.ogg"?controls="controls">
Your? bro wser?does?not?support?the?au dio ?tag.
</au dio >

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

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

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

实例
<au dio ?controls="controls">
??<source?src="song.ogg"?type="au dio /ogg">
??<source?src="song.mp3"?type="au dio /mpeg">
Your? bro wser?does?not?support?the?au dio ?tag.
</au dio >

Internet Explorer

Internet Explorer 8 不支持 au dio 元素。在 IE 9 中,将提供对 au dio 元素的 支持 。

<au dio > 标签 的 属性 属性 值 描述

a utop lay

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

controls

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

loop

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

preload

preload

如果出现该 属性 ,则音频在 页面 加载时进行加载,并预备播放。

如果使用 "a utop lay",则忽略该 属性 。

src

url 要播放的音频的 URL。

HTML5 拖放 ( drag 和 drop ) ? ?HTML 5 Video + DOM

查看更多关于HTML5 Audio 音频的详细内容...

  阅读:45次

上一篇

下一篇

第1节:HTML5 教程    第2节:HTML5 浏览器支持    第3节:HTML5 新元素    第4节:HTML5 Video 视频    第5节:HTML 5 Video + DOM    第6节:HTML5 内联 SVG    第7节:HTML5 新的 Input 类型    第8节:HTML5 MathML 数学公式    第9节:HTML5 Geolocation 地理定位    第10节:HTML5 Canvas画布    第11节:HTML5 拖放 ( drag 和 drop )    第12节:HTML5 Audio 音频    第13节:HTML5 Web Workers    第14节:HTML5 表单元素    第15节:HTML5 表单属性    第16节:HTML5 语义元素    第17节:HTML5 Web 存储    第18节:HTML5 Web SQL 数据库    第19节:HTML5 应用程序缓存    第20节:HTML 5 服务器发送事件    第21节:HTML5 WebSocket    第22节:HTML5 历史记录API    第23节:HTML 5 代码规范    第24节:HTML5 Canvas 描边和填充    第25节:HTML5 Canvas 绘制矩形    第26节:HTML5 Canvas 清除画布    第27节:HTML5 Canvas 渐变    第28节:HTML5 Canvas 合成    第29节:HTML5 Canvas 绘制图像    第30节:HTML5 Canvas 绘制文本    第31节:HTML5 Canvas 阴影    第32节:HTML5 Canvas 路径    第33节:HTML5 Canvas 转换    第34节:HTML5 Canvas 状态    第35节:HTML5 Canvas toDataURL()    第36节:HTML5 Canvas 像素处理    第37节:HTML5 Canvas 制作动画