目前,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. Js得到radiobuttonlist选中值,设置默认值

    JS 代码 var vRbtid=document.getElementById("rbtid");      //得到所有radio      var vRbtidList= v ...

  2. 8 Hbase get方式获取数据

    package com.hikvision.hbase.vertify.test; import org.apache.hadoop.conf.Configuration; import org.ap ...

  3. 保存BASE64编码图片

    1.前端上传用户图片时,一些K数较小图片,头像图标等 .以bass64编码后的字符串传到服务器. 2.服务器接收并保留到本地. // 页面上点击保存 $.post('/imgupload/save', ...

  4. Strange Grid

    def main(): r,c = map(int, raw_input().split(' ')) if r % 2 != 0: base = 5*(r-1) else: base = 5*(r-2 ...

  5. 爬虫框架YayCrawler

    爬虫框架YayCrawler 各位好!从今天起,我将用几个篇幅的文字向大家介绍一下我的一个开源作品——YayCrawler,其在GitHub上的网址是:https://github.com/liush ...

  6. Java学习笔记--Swing2D图形

    1.处理2D图形 要想使用java 2D库绘制图形,需要获得一个Graphics2D类对象.这个类是Graphics类的子类.paintComponent方法自动获得一个Graphics2D类对象,我 ...

  7. BZOJ 1063 道路设计NOI2008

    http://www.lydsy.com/JudgeOnline/problem.php?id=1063 题意:给你一棵树,也有可能是不连通的,把树分成几个链,求每个点到根经过的最大链数最小,而且要输 ...

  8. 《Programming WPF》翻译 第8章 4.关键帧动画

    原文:<Programming WPF>翻译 第8章 4.关键帧动画 到目前为止,我们只看到简单的点到点的动画.我们使用了To和From属性或者By属性来设计动画--相对于当前的属性值.这 ...

  9. Android导航菜单横向左右滑动并和下方的控件实现联动

    这个是美团网个人订单的效果,找了很多地方都没找到,自己研究了两天终于弄出来了^_^,有什么问题希望大家指出来,谢谢. 实现原理是上方使用HorizontalScrollView这个可以水平横向拖动的控 ...

  10. Java学习系列(一)Java的运行机制、JDK的安装配置及常用命令详解

    俗话说:“十五的月亮十六圆”.那学习是不是也是如此呢?如果把月亮看成是我们的愿望,那十五便是我们所处的“高原期”,坚持迈过这个坎,我相信你的愿望终究会现实的.记得马云曾说:今天很残酷,明天更残酷,后天 ...