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 ...
随机推荐
- Case Study - 预测肺癌
Problem 肺癌是发病率和死亡率增长最快,对人群健康和生命威胁最大的恶性肿瘤之一.近50年来许多国家都报道肺癌的发病率和死亡率均明显增高,男性肺癌发病率和死亡率均占所有恶性肿瘤的第一位,女性发病率 ...
- 报表生成(POI,jquery.table2excel.js，Echarts)
最近公司要弄个报表相关的功能,话不多说,先上图 前一种是POI 生成的,后一种是Echarts生成的.报表我想大家都不陌生,基本上在公司业务中都会使用到.先说说POI,jquery.table2exc ...
- lombok版本过低报错
调试报错Error:java: java.lang.ExceptionInInitializerError com.sun.tools.javac.code.TypeTags JAVA12调整原有项 ...
- 01、模拟ATM机界面程序
一.概述 设计一个简单的模拟自动取款机ATM界面的程序,实现用户登录及取款等功能. 二.需求分析 (1)模拟自动取款机ATM界面,有常用功能. (2)主要功能包括;用户输入密码登录主界面.取款功能.取 ...
- 2020年Java 成长路线-flag
一.基础篇 JVM JVM内存结构 堆.栈.方法区.直接内存.堆和栈区别 Java内存模型 内存可见性.重排序.顺序一致性.volatile.锁.final 垃圾回收 内存分配策略.垃圾收集器(G1) ...
- vim和emacs
vim和emacs 在编程界一直有两大神器的传说.这两大神器一个是emacs,一个是vim.一个是神的编辑器,一个是编辑器之神. 程序员的圈子里面也一直流传着一个段子,说是世界上的程序员分为三种.使用 ...
- jQuery Moblie 问题汇总
1 使用jQuery动态添加html,没有jQuery Moblie的样式 $("body").html(listview);//以上代码只是把结构加上去了,但是却没有加上jqm ...
- BZOJ1040: [ZJOI2008]骑士 树套环DP
题意:一个图n个点n条边保证点能互相到达,ab有边意味着ab互相厌恶,求一个集合,使得集合里元素最多而且没有人互相厌恶 删去环上一条边树形dp,比如删掉的边连着a,b,那么先dp出不选a的最大值,再d ...
- Spring 理解和开始
1.先看看Spring的历史吧 https://baijiahao.baidu.com/s?id=1620099105315862154&wfr=spider&for=pc 2.Spr ...
- html行内元素、块级元素及空元素有哪些？区别是什么？
一. html标签有哪些? 1)行内元素有哪些? 行内元素:行内大多为描述性标记 <span>...</span> <a>...</a> 链接. 锚点 ...