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

来源:博客园分类: 文章浏览史发布时间:2020-11-26 16:21:19 最后更新:2020-11-26 浏览:628

转载声明：

本文为摘录自“博客园”，版权归原作者所有。

原文链接:

https://www.cnblogs.com/niuben/p/11430014.html

温馨提示：

为了更好的体验，请点击原文链接进行浏览

摘录时间：

2020-11-26 16:21:19

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

 <audio controls>
　　<source src="horse.mp3" type="audio/mpeg">
 </audio>

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()	暂停当前播放的音频。

<!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>

简单实例