HTML5使用JavaScript控制＜audio>音频的播放

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1.播放音乐最简单的样例

audio html5中的新属性
属性	值	描述
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> 元素可以链接到不同的音频文件。浏览器将使用第一个可识别的音频文件格式

source html5中的新属性
属性	值	描述
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()	暂停当前播放的音频。

如何工作
audio.html
audio.css
audio.js
Audio 对象属性
Audio 对象方法

<!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控制&lt&semi;audio&gt&semi;音频的播放
有时我们需要使用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 &lt&semi;audio&gt&semi; 音频标签自定义样式修改以及添加播放控制事件
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 的&lt&semi;audio&gt&semi; 音频 audio的&OpenCurlyDoubleQuote;坑”
<audio>标签是html5的一个非常有意义的特性.告别的flash的时代.它的属性有: autoplay:音频就绪后马上播放 controls:出现该属性,向用户显示播放的控件. lo ...

随机推荐

IOS比较常用的第三方组件及应用源代码（持续更新中）
把平时看到或项目用到的一些插件进行整理,文章后面分享一些不错的实例,若你有其它的插件欢迎分享,不断的进行更新~ 一:第三方插件 1:基于响应式编程思想的oc 地址:https://github.com ...
Eclipse导入MyEclipse创建的web项目报错的解决方法
将myeclipse中开发的动态web项目直接引入到eclipse中继续开发,Eclipse中会报项目有错,如下图
禁用datagridview中的自动排序功能
把datagridview中的自动排序功能禁用自己收集的两种方法,看看吧①DataGridView中的Columns属性里面可以设置.进入"EditColumns"窗口后,在相应的 ...
[WinAPI] API 9 [文件的删除、复制和移动功能]
Windows系统为文件的删除.复制.重命名或移动文件提供了相应的API函数.删除文件使用DeleteFile函数:复制文件使用CopyFile函数:重命名文件和移动文件实际是一个操作,使用MoveF ...
meta的各种参数
<!DOCTYPE html>  <html lang="zh-cmn-Hans"&g ...
Java关于读取Excel文件~xlsx xls csv txt 格式文件~持续汇总~
所需的jar百度网盘链接:https://pan.baidu.com/s/146mrCImkZVvi1CJ5KoiEhQ提取码:c329 1 需要导入jar包,缺1不可 dom4j-1.6.1.jar ...
sql server导出数据，本地数据库远程连接不上，怎样设置防火墙（自用）
控制面板——>系统安全——>windows防火墙——>高级设置新建入站规则: 将一下两个应用允许入站: D:\Program Files (x86)\Microsoft SQL ...
bzoj4518/luogu4072 征途（斜率优化dp）
首先推一波公式: 设f[t][i]为第t天以i为结尾,这时已经算了的最小公差$*m^2$ 设s[i]为1到i的和 $$f[t][i]=min\{f[t-1][j]+m*(s[i]-s[j]-\frac ...
让jQuery的ajaxFileUpload插件支持onchange事件
ajaxFileUpload插件只能上传一次的BUG发现还不少人遇到,很不幸我也遇到的,使用后发现里面的坑还不少,在createUploadForm方法中有句 var newElement = jQu ...
Linux入门基础(二)&colon;Linux磁盘及文件管理系统
磁盘管理 fdisk分区工具只支持MBR分区 fdisk命令只有root用户能用 fdisk -l 列出所有安装磁盘及分区信息 fdisk /dev/sda (操作磁盘,按m可列出帮助界面,常用的操 ...