目前,web页面上没有标准的方式来播放音频文件,大多数的音频文件是使用插件来播放,而众多的浏览器使用了不同的插件。而html5的到来,给我们提供了一个标准的方式来播放web中音频文件,用户不再为浏览器升级adobe flash/apple quicktime等播放插件,只需使用现代浏览器就可以聆听任务发出声音的web网站。

html5中规定了一种通过audio元素来包含音频的标准方法.

audio元素能够播放声音文件或音频流。

<audio src="音频地址.mp3" controls="controls">
</audio>

以上就是audio的格式,与img格式相同用src源属性。支持的音频格式有三种分别是:ogg vorbis/mp3/wav/。

而controls属性供添加播放、暂停和音量的一个控件。

<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
</audio>

但不是所有格式都支持一个,所有一般都可以多添加几个,它们不会进行冲突。

属性:    值:    描述:

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

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

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

preload    preload    出现该属性,则音频在页面加载时进行加载并预备播放。如设置了autoplay,则忽略该属性。

src      url      要播放的音频url

embed           src:地址    嵌入插件,

end

loopend

loopstart

playcount

start

html5 音频的更多相关文章

  1. HTML5 音频播放器-Javascript代码(短小精悍)

    直接上干货咯! //HTML5 音频播放器 lzpong 2015/01/19 var wavPlayer = function () { if(window.parent.wavPlayer) re ...

  2. html5音频视频专题

    html5音频视频专题 总结 1. 操作的就是video和audio两个对象,这两个对象有他们的属性和方法,通过对象的id就可以操作他们 <audio src="../video/琴箫 ...

  3. HTML5音频可视化频谱跳动代码

    今天学习到用canvas来写  HTML5音频可视化频谱跳动代码  将代码在此做一总结: <!DOCTYPE html> <html lang="en"> ...

  4. HTML5 音频 <audio>

    HTML5 提供了播放音频的标准. 一.Web 上的音频 直到现在,仍然不存在一项旨在网页上播放音频的标准. 今天,大多数音频是通过插件(比如 Flash)来播放的.然而,并非所有浏览器都拥有同样的插 ...

  5. html5音频和视频标签

    在html5之前的版本中如果想要在网页中插入音频和视频必须要安装插件才可以,比如最常见的flash插件.很多人在刚安装一款浏览器的时候都会遇到浏览器建议安装flash插件,在移动端也是如此.如果想要在 ...

  6. HTML5 音频视频

    HTML5 视频和音频的 DOM 参考手册 HTML5 DOM 为 <audio> 和 <video> 元素提供了方法.属性和事件. 这些方法.属性和事件允许您使用 JavaS ...

  7. html5 音频和视频(audio And video)

    1.音频和视频  Web 上的视频 直到现在,仍然不存在一项旨在网页上显示视频的标准. 今天,大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定 ...

  8. [html5] 学习笔记-html5音频视频

    HTML5 最大的新特色之一就是支持音频和视频.在 HTML5 之前,我们必须使用插件如 Silverlight  或 Flash 来实现这些功能.在 HTML5 中,可以直接使用新标签< au ...

  9. 移动端HTML5音频与视频问题及解决方案

    最近在研究用视频代替动画,用视频代替精灵动画,我们称这种视频叫做交互视频. 传统的精灵动画: 磁盘空间大,下载慢,尤其是在线播放,会更慢 文件太多,在线播放的时候,太多http请求,会导致响应慢,或者 ...

随机推荐

  1. LAMP架构搭建+Discuz论坛搭建【weber出品必属精品】

    一.     本机简介: 本机系统: CentOS-6.4-x86_64 主机名:oracle.ywb IP地址:192.168.146.129 二.     在Linux环境下安装Apache步骤 ...

  2. 图片拉伸(有保护区域) resizableImageWithCapInsets

    在仿写QQ会话的时候背景蓝色图片是拉伸而来,但是有些地方是受保护的不能拉伸 所以定义了下面的工具类中的一个方法,专门拉伸图片 UIImageResizingModeStretch:拉伸模式,通过拉伸U ...

  3. gitosis随记

    0.创建git用户 useradd -m git passwd git 1.安装脚本工具(gitosis依赖python) apt-get install python-setuptools 2.gi ...

  4. 交叉编译安装ARM平台上的Qt

    一.宿主机环境搭建: 编译需要x11库的支持,在Ubuntu下安装命令: sudo apt-get install libx11-dev libxext-dev libxtst-dev 二.下载源码包 ...

  5. 多线程中遇到ASSERT(pMap->LookupPermanent(hWndOrig) == NULL);怎么解决

    XP下用VC开发的程序,在一个主线程调用3   个线程,线程之间要共享数据,结果总出现wincore.cpp   line   980   ASSERT(pMap-> LookupPermane ...

  6. ognl.NoSuchPropertyException(没有对应属性异常)

    ognl.NoSuchPropertyException: com.xie.struts2.tags.modal.Student.sName(没有对应属性异常) at ognl.ObjectPrope ...

  7. php 简单分页

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. HTML动画(难点)

    animation-delay这个属性是规定动画开始前等待几秒才开始.本来是很好理解的,但是当时就有个疑问:假如我的动画是连续执行好多次的情况下的话,是第一次执行前才会延迟还是每次执行前都会延迟呢?答 ...

  9. 使用grid++report打印选中行

    接上一篇<hibernate+spring+mvc+Easyui框架模式下使用grid++report的总结>对grid++report做进一步开发 先写一下实现流程: 1.默认为全部载入 ...

  10. Linux 的系统运行级别

    运行级别          说明 0          系统关机状态 1 单用户工作状态,用于root对系统进行维护,此时不予许其他用户使用主机.(类似于windows 的安全模式) 2       ...