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 ...
随机推荐
- MySQL常用命令.md
链接数据库 ## -h/-u这些后面没有空格 ./bin/mysql -h[ip地址] -P[端口号] -u[用户名] -p[密码] 查看建表语句 show create table [table_n ...
- 【sklearn文本特征提取】词袋模型/稀疏表示/停用词/TF-IDF模型
1. 词袋模型 (Bag of Words, BOW) 文本分析是机器学习算法的一个主要应用领域.然而,原始数据的这些符号序列不能直接提供给算法进行训练,因为大多数算法期望的是固定大小的数字特征向量, ...
- K8S 概述
K8S------概述 K8S,就是基于容器的集群管理平台,它的全称,是kubernetes.Kubernetes 这个单词来自于希腊语,含义是舵手或领航员.K8S是它的缩写,用“8”字替代了“ube ...
- 卸载Windows控制面板的程序和功能中找不到的一些软件的方法
卸载Windows控制面板的程序和功能中找不到的一些软件的方法 找到卸载程序进行卸载即可
- 用友UAP NC 开发环境抛出"JDK默认编辑器找不到"
此节点是升级65之前开发的,已经很久不使用,今天在开发环境使用,点查询抛出此异常. 最后问了人解决方法,就是往JRE系统库加入对应的jar包
- pyjsonrpc的使用
pyjsonrpc的使用 客户端 JsonRpcClient.py #!usr/bin/env python2.7 # -*- coding: utf-8 -*- import ssl import ...
- C语言 typedef struct _STUDENT {}STUDENT,*PSTUDENT;
#include <stdio.h> #include <stdlib.h> #include <string.h> //给stuct _STUDENT 起一个别名 ...
- LeetCode 728. 自除数
题目链接:https://leetcode-cn.com/problems/self-dividing-numbers/ 给定上边界和下边界数字,输出一个列表,列表的元素是边界(含边界)内所有的自除数 ...
- 剑指offer 14. 链表中倒数第 k 个结点
14. 链表中倒数第 k 个结点 题目描述 输入一个链表,输出该链表中倒数第k个结点 法一:快慢指针 快指针先走 k 步,等快指针到达尾部时,慢指针所指结点即是倒数第 k 个结点 public cla ...
- 接口测试（http 和 rpc）
接口测试主要分HTTP和RPC两类,RPC类型里面以Dubbo较为知名.互联网微服务架构,两种接口都需要做接口测试的,不管是业务测试还是回归测试: Dubbo:Java栈的互联网公司比如阿里.美团.5 ...