目前,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. (转)SQL利用Case When Then多条件判断

    CASE     WHEN 条件1 THEN 结果1     WHEN 条件2 THEN 结果2     WHEN 条件3 THEN 结果3     WHEN 条件4 THEN 结果4 ....... ...

  2. silverlight 生产图表(动态图表类型,Y轴数量) .xaml.cs文件

    silverlight 页面后台方法 .xaml.cs文件 public void CreateChart(Grid oGrid, ObservableCollection<ListItem&g ...

  3. Session与Cookie间不得不说的一些事

    在很久很久以前,刚有浏览器和网页的时候,web开发者发现了一个问题,我必须要在客户端这边保存一些东西才能实现某些功能,比如大家喜闻乐见的购物车.用户登录.自动登陆等.但是客户端只有一个浏览器,怎么在用 ...

  4. Ruby和Rails开发环境安装

    更新包管理 sudo apt-get update 安装curl sudo apt-get install curl *安装rvm via curl \curl -L https://get.rvm. ...

  5. 影响MySQL性能的五大配置参数

    我们今天主要和大家分享的是对MySQL性能影响关系紧密的五大配置参数,以下就是文章的具体内容描述,希望会给你带来一些帮助在此方面. 以下的文章主要是对MySQL性能影响关系紧密的五大配置参数的介绍,我 ...

  6. Oracle11g R2学习系列 之三教程选择

    工欲善其事必先利其器,选择一本入门教程也是很重要的,本人使用的也是这位同事推荐的电子工业出版社的<<Oracle 实用教程(第3版)>>郑阿奇主编,可以至这里购买到,我个人还是 ...

  7. css 完美替换图片

    1.css替换简单图标的展示方法 ;display:inline-block;position:absolute;left:11px;top:10px;border-right:6px solid t ...

  8. C语言读写伯克利DB 4

    因为缓存数据的buffer总是不够大(会引起段错误)索性从堆上拿了两块大内存 /* 功能说明:逐日存储来访用户(使用伯克利DB) 根据存储的用户信息确定某用户是否是首次来访用户(未被存储的伯克利DB) ...

  9. 163k地方门户网站系统js小Bug

    163k地方门户网站系统后台在Firefox下无法通过选择区域来获取相对应的地段,IE浏览器下无些问题. Firebug提示错误为: ReferenceError: requestdataquyu i ...

  10. 图铭Android平台银行卡号识别系统

    随着智能终端(智能手机及平板电脑)及移动通信(3G)的发展,原来运行在PC上的信息系统(如邮件系统.即时通信.网页浏览.协同办公.网络购物.社交网站.博客等)逐渐转移到智能终端设备上.可以预见未来几年 ...