HTML5使用JavaScript控制＜audio>音频的播放
1.播放音乐最简单的样例
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
</audio>
| 属性 | 值 | 描述 |
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放。如果设置了该属性，音频将自动播放。 |
| controls | controls |
controls 属性是一个布尔属性。 如果属性存在，它指定音频控件的显示方式。音视频控件包括：播放/暂停/进度条/音量 |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放。 |
| muted | muted |
muted 属性属于逻辑属性。 如被设置，则规定视频输出应该被静音 |
| preload | auto metadata none |
规定当网页加载时，音频是否默认被加载以及如何被加载。 auto - 当页面加载后载入整个音频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入音频 |
| src | URL |
src 属性描述了音频文件的地址 (URL)。 Ogg 文件格式的音频，可以在 Firefox, Opera 和 Chrome 浏览器下播放。 如果需要在 Internet Explorer 和 Safari浏览器播放音频，必须使用 MP3 文件。 如果需要兼容所有浏览器 - 请在<audio> 元素中使用 <source> 元素 。 <source> 元素可以链接到不同的音频文件。浏览器将使用第一个可识别的音频文件格式 |
| 属性 | 值 | 描述 |
| media | media_query | 规定媒体资源的类型，供浏览器决定是否下载。 |
| src | URL | 规定媒体文件的 URL。 |
| type | MIME_type | 规定媒体资源的 MIME 类型。 |
Api说明：
1.如果需要显示缓存进度，可以参考：HTML5 Media事件
2.不能控制音频的二进制数据，如果需要处理二进制音频数据，参考HTML5 WebAudioAPI简介(一)
只读属性
duration ---获取媒体文件的播放时长，以s为单位，如果无法获取则为NaN，当触发canplay事件后就可以获取当前总长度
startTime---返回起始播放时间，一般是0.0,除非是缓冲过的媒体文件，并一部分内容已经不再缓冲区(此属性好像已经不可用)
paused-----判断是否已经暂停，返回true/false
ended-----判断是否已经播放完毕，返回true/false
error----在发生了错误后，返回错误代码
currentSrc --以字符串的形式发挥正在播放或已经加载的文件，对应浏览器在source元素中选择的文件
buffered---获取当前缓冲区大小，返回TimeRanges对象，点击更多参考 可控制属性
src----指定音频的文件位置
autoplay---是否自动播放
preload----是否预加载
loop------是否循环播放
controls----显示或隐藏用户控制界面
autobuffer---媒体文件播放前是否进行缓冲加载，如果设置了autoplay，则忽略此特性(此属性好像已经不可用)
muted------设置是否静音
volume ----在0.0到1.0间的音量值，或查询当前音量值
currentTime--以s为单位返回从开始播放到目前所花的时间，也可设置currentTime的值来跳转到特定位置 方法
load() ---加载音频、视频软件
paly() ---播放
pause()---暂停
canPlayType(obj) ----测试饭后指定指定的Mime类型的文件 事件
loadstart ---客户端开始请求数据
progress----正在播放的时候不停触发，如果暂停不会触发，触发的时间间隔比较大
play------play()和autopaly播放时，类似事件onplaying
pause-----pause()方法触发时
ended-----当结束播放时
timeupdate----当前播放时间发生改变的时候，播放中常用的时间处理，如果暂停不会触发，触发的时间间隔比较小
canplaythrough---歌曲已经载入完成
canplay -----缓冲至可播放状态，类似事件onloadedmetadata
onloadedmetadata----当元数据（比如分辨率和时长）被加载时运行的脚本
原文链接：http://caibaojian.com/html5-audio.html
Audio 对象属性
| 属性 | 描述 |
|---|---|
| audioTracks | 返回表示可用音频轨道的 AudioTrackList 对象。 |
| autoplay | 设置或返回是否在就绪（加载完成）后随即播放音频。 |
| buffered | 返回表示音频已缓冲部分的 TimeRanges 对象。 |
| controller | 返回表示音频当前媒体控制器的 MediaController 对象。 |
| controls | 设置或返回音频是否应该显示控件（比如播放/暂停等）。 |
| crossOrigin | 设置或返回音频的 CORS 设置。 |
| currentSrc | 返回当前音频的 URL。 |
| currentTime | 设置或返回音频中的当前播放位置（以秒计）。 |
| defaultMuted | 设置或返回音频默认是否静音。 |
| defaultPlaybackRate | 设置或返回音频的默认播放速度。 |
| duration | 返回音频的长度（以秒计）。 |
| ended | 返回音频的播放是否已结束。 |
| error | 返回表示音频错误状态的 MediaError 对象。 |
| loop | 设置或返回音频是否应在结束时再次播放。 |
| mediaGroup | 设置或返回音频所属媒介组合的名称。 |
| muted | 设置或返回是否关闭声音。 |
| networkState | 返回音频的当前网络状态。 |
| paused | 设置或返回音频是否暂停。 |
| playbackRate | 设置或返回音频播放的速度。 |
| played | 返回表示音频已播放部分的 TimeRanges 对象。 |
| preload | 设置或返回音频的 preload 属性的值。 |
| readyState | 返回音频当前的就绪状态。 |
| seekable | 返回表示音频可寻址部分的 TimeRanges 对象。 |
| seeking | 返回用户当前是否正在音频中进行查找。 |
| src | 设置或返回音频的 src 属性的值。 |
| textTracks | 返回表示可用文本轨道的 TextTrackList 对象。 |
| volume | 设置或返回音频的音量。 |
Audio 对象方法
| 方法 | 描述 |
|---|---|
| addTextTrack() | 向音频添加新的文本轨道。 |
| canPlayType() | 检查浏览器是否能够播放指定的音频类型。 |
| fastSeek() | 在音频播放器中指定播放时间。 |
| getStartDate() | 返回新的 Date 对象，表示当前时间线偏移量。 |
| load() | 重新加载音频元素。 |
| play() | 开始播放音频。 |
| pause() | 暂停当前播放的音频。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<audio id='enter'>
<source src="deposit2.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
<button onclick='enter()'>音效</button>
</body>
</html>
<script>
function enter(){
var audio = document.getElementById("enter");
audio.play()
}
</script>
简单实例
HTML5使用JavaScript控制＜audio>音频的播放的更多相关文章
- HTML5 - 使用JavaScript控制<audio>音频的播放
有时我们需要使用js来控制播放器实现音乐的播放,暂停.或者使用js播放一些音效. 1,通过JavaScript控制页面上的播放器 比如把页面上添加一个<audio>用来播放背景音乐(由 ...
- 自定义css样式结合js控制audio做音乐播放器
最近工作需求需要播放预览一些音乐资源,所以自己写了个控制audio的音乐播放器. 实现的原理主要是通过js调整audio的对象属性及对象方法来进行控制: 1.通过play().pause()来控制音乐 ...
- Html5视频播放器-VideoJS+Audio标签实现视频，音频及字幕同步播放
一,VideoJS介绍 引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站 <link href=”http://vjs.zencdn.net/c/video ...
- html5 audio音频播放全解析
序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash意思是当你没有给 ...
- HTML5 audio 如何实现播放多个MP3音频
<audio>标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流.用的比较多音频格式是.mp3. <audio>标签常用属性如下表 属性 值 描述 au ...
- H5 <audio> 音频标签自定义样式修改以及添加播放控制事件
H5 <audio> 音频标签自定义样式修改以及添加播放控制事件 Dandelion_drq 关注 2017.08.28 14:48* 字数 331 阅读 2902评论 3喜欢 3 说明: ...
- HTML5 学习07——Video(视频)Audio(音频)
<video> 元素:提供了 播放.暂停和音量控件来控制视频. width 和 height 属性:控制视频的尺寸 <video> 与</video> 标签之间插入 ...
- HTML5之Audio音频标签学习
HTML5中的新元素标签 src:音频文件路径. autobuffer:设置是否在页面加载时自动缓冲音频. autoplay:设置音频是否自动播放. loop:设置音频是否要循环播放. control ...
- html5 的<audio> 音频 audio的“坑”
<audio>标签是html5的一个非常有意义的特性.告别的flash的时代.它的属性有: autoplay:音频就绪后马上播放 controls:出现该属性,向用户显示播放的控件. lo ...
随机推荐
- 自定义配置JNOJ
OJ 全名 online judge 在线判题系统,对于从事编程竞赛的人来说一点都不陌生,今天我们讨论的是怎么样自定义搭建 推荐的开源的OJ有hustOJ,JNOJ 因为hustOJ 是一键安装脚本, ...
- 方法（定义、调用、重载）—Java
一. 什么是方法 不可能所有的功能都放到main中,需要定义其他方法完成指定功能,需要时调用方法即可 封装在一起来执行操作语句的集合,用来完成某个功能操作 封装在一起来执行操作语句的集合,用来完成某个 ...
- ng-组件
几乎所有前端框架都在玩"组件化",而且最近都不约而同地选择了"标签化"这种思路,Angular 也不例外. 对新版本的 Angular 来说,一切都是围绕着&q ...
- linux服务基础之nginx配置详解
nginx简单介绍:https://www.cnblogs.com/ckh2014/p/10848670.html nginx编译安装:https://www.cnblogs.com/ckh2014/ ...
- 剑指offer-面试题20-表示数值的字符串-字符串
/* 题目: 判断字符串是否表示数值. */ /* 思路: 字符串遵循模式A[.[B]][e|EC] ,[+|-].B[e|EC] A.C为可能带正负号的数字串 B为数字串 */ #include&l ...
- gulp常用插件之gulp-replace使用
更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-replace这是一款gulp3的字符串替换插件. 更多使用文档请点击访问gulp-replace工具官网. 安装 一键安装不多解释 n ...
- 论文阅读笔记（十二）【CVPR2018】：Exploit the Unknown Gradually: One-Shot Video-Based Person Re-Identification by Stepwise Learning
Introduction (1)Motivation: 大量标记数据成本过高,采用半监督的方式只标注一部分的行人,且采用单样本学习,每个行人只标注一个数据. (2)Method: 对没有标记的数据生成 ...
- Genymotion下载及安装(安卓虚拟机)
Genymotion下载及安装 一.注册\登录 打开Genymotion官网,https://www.genymotion.com/ ,首先点击右上角的Sign in进行登录操作.如何登录就不细讲 ...
- ansi sql 语法 切换为 oracle 语法
语句粘贴到 工作表 打开查询构建器 勾选 创建oracle连接 over sql dev 的语法设置调整,否则表别名会右对齐 下面是 转换后的结果,是不是看得舒服多了
- R语言函数化编程笔记2
R语言函数化编程笔记2 我学过很多的编程语言,可以我写的代码很啰嗦,一定是我太懒了.或许是基础不牢地动山摇 1.为什么要学函数 函数可以简化编程语言,减少重复代码或者说面向对象的作用 2.函数 2.1 ...