html5 音频
目前,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 音频的更多相关文章
- HTML5 音频播放器-Javascript代码(短小精悍)
直接上干货咯! //HTML5 音频播放器 lzpong 2015/01/19 var wavPlayer = function () { if(window.parent.wavPlayer) re ...
- html5音频视频专题
html5音频视频专题 总结 1. 操作的就是video和audio两个对象,这两个对象有他们的属性和方法,通过对象的id就可以操作他们 <audio src="../video/琴箫 ...
- HTML5音频可视化频谱跳动代码
今天学习到用canvas来写 HTML5音频可视化频谱跳动代码 将代码在此做一总结: <!DOCTYPE html> <html lang="en"> ...
- HTML5 音频 <audio>
HTML5 提供了播放音频的标准. 一.Web 上的音频 直到现在,仍然不存在一项旨在网页上播放音频的标准. 今天,大多数音频是通过插件(比如 Flash)来播放的.然而,并非所有浏览器都拥有同样的插 ...
- html5音频和视频标签
在html5之前的版本中如果想要在网页中插入音频和视频必须要安装插件才可以,比如最常见的flash插件.很多人在刚安装一款浏览器的时候都会遇到浏览器建议安装flash插件,在移动端也是如此.如果想要在 ...
- HTML5 音频视频
HTML5 视频和音频的 DOM 参考手册 HTML5 DOM 为 <audio> 和 <video> 元素提供了方法.属性和事件. 这些方法.属性和事件允许您使用 JavaS ...
- html5 音频和视频(audio And video)
1.音频和视频 Web 上的视频 直到现在,仍然不存在一项旨在网页上显示视频的标准. 今天,大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定 ...
- [html5] 学习笔记-html5音频视频
HTML5 最大的新特色之一就是支持音频和视频.在 HTML5 之前,我们必须使用插件如 Silverlight 或 Flash 来实现这些功能.在 HTML5 中,可以直接使用新标签< au ...
- 移动端HTML5音频与视频问题及解决方案
最近在研究用视频代替动画,用视频代替精灵动画,我们称这种视频叫做交互视频. 传统的精灵动画: 磁盘空间大,下载慢,尤其是在线播放,会更慢 文件太多,在线播放的时候,太多http请求,会导致响应慢,或者 ...
随机推荐
- 做量化模型Matlab、R、Python、F#和C++到底选择哪一个?
MATLAB是matrix&laboratory两个词的组合,意为矩阵工厂(矩阵实验室).是由美国mathworks公司发布的主要面对科学计算.可视化以及交互式程序设计的高科技计算环境.它将数 ...
- oc随笔五:NSArray
#import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { @autoreleasepool { ...
- hdu 油菜花王国
Problem Description 程序设计竞赛即将到来,作为学校ACM集训队主力,小明训练一直很努力.今天天气不错,教练也心情大好,破例给各位队员放假一天,小明就骑着自己的小电驴到郊外踏青去了. ...
- NDK编译Python2.7.5
[背景] 网上有一些ndk编译python的做法,但按照教程做总是不成功,可能是环境版本不一样,导致很多地方的配置都不成功. 网上的教程大多只有做法,没有解释,即使按照教程编译成功,很多细节都不知道为 ...
- [JS]九种网页弹窗代码
[1.最基本的弹出窗口代码] 其实代码非常简单: <SCRIPT LANGUAGE="javascript"><!--window.open ("pag ...
- 搭建MHA环境【1】规划+linux相关的设置
[1]规划 MHA这套软件包涵两个部分 1.manager :主要负责对MySQL集群状态的检查&在master 库宕机时对故障进行转移. 2.node :主要包涵状态检查& ...
- (转)Android获取手机信息
package com.water.activity; import java.util.List; import android.app.Activity; import android.os.Bu ...
- LeetCode_Populating Next Right Pointers in Each Node
Given a binary tree struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode *nex ...
- mutate 转换
zjtest7-frontend:/usr/local/logstash-2.3.4/config# cat geoip.conf input {stdin {} } filter { geoip { ...
- ElasticSearch大批量数据入库
最近着手处理大批量数据的任务. 现状是这样的,一个数据采集程序承载大批量数据的存储和检索.后期可能需要对大批量数据进行统计. 数据分布情况 13个点定时生成采集结果到4个文件(小文件生成周期是5分钟) ...