目前,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. Android-隐式Intent

    隐式Intent表示不具体明确要打开的activity,利用隐式intent我们可以打开其他应用. 一个隐式intent的主要组成部分: 1.action 要执行的操作. 通常以intent类的常量表 ...

  2. 《第一行代码》学习笔记12-UI(1)

    1.程序需要注销或者退出,用一个专门的集合类对所有的活动进行管理即可. 2.可视化编辑工具不利于真正了解界面背后的实现原理,通常这种方式制作的界面都不具有很好的屏幕适配性, 而且当需要编写较为复杂的界 ...

  3. Java这个名字怎么来

      Java语言的历程丰富多彩,被现在众多程序员和企业广泛使用,不用质疑这是Java的领先技术的结果. Java是Sun公司开发的一种编程语言,Sun公司最初的方向是让Java来开发一些电器装置程序, ...

  4. ios学习资料(一)

    IT社区: http://www.cnblogs.com/ http://www.csdn.net/ http://www.51cto.com/ http://www.cocoachina.com/ ...

  5. About USB Data Link Cable API

    About USB Data Link Cable API The text on this webpage is licensed under the Creative Commons Attrib ...

  6. Mac系统cocos2dx + android 开发环境配置

    Mac系统cocos2dx + android 开发环境配置 /****************************************************** 这遍文章主要转载自:htt ...

  7. Couchbase 使用方法

    1.数据流向 List<模型>  数据-->MsgPack 打包成byte[]-> couchbase 实例调用 Store(Enyim.Caching.Memcached.S ...

  8. HDU 5044 离线LCA算法

    昨天写了HDU 3966 ,本来这道题是很好解得,结果我想用离线LCA 耍一把,结果发现离线LCA 没理解透,错了好多遍,终得AC ,这题比起 HDU 3966要简单,因为他不用动态查询.但是我还是错 ...

  9. Handlebars expressions

    Basic Usage 1,最简单的handlebars 表达式 <h1>{{title}}</h1> 使用时,会在当前context里找名为title的property,替换 ...

  10. 火狐Firefox 浏览器 onblur() 并且alert()时文本被选中问题

    说明:镜像是组成在线实验课程的基础环境,教师设计的实验绑定一个或多个镜像,就组成了一讲独立的在线实验课程. 镜像名称:     火狐Firefox 浏览器 onblur() 并且alert()时文本被 ...