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

无予發表於 2019-8-29 15:37:00

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

1.播放音乐最简单的样例
<div class="cnblogs_code">
<pre> <audio controls> 　　<source src="horse.mp3" type="audio/mpeg"> </audio></pre>
</div>
<table border="0"><caption>audio html5中的新属性</caption>
<tbody>
<tr>
<td>属性</td>
<td>值</td>
<td>描述</td>
</tr>
<tr>
<td>autoplay</td>
<td>autoplay</td>
<td>如果出现该属性，则音频在就绪后马上播放。如果设置了该属性，音频将自动播放。</td>
</tr>
<tr>
<td>controls</td>
<td>controls</td>
<td>
controls 属性是一个布尔属性。
如果属性存在，它指定音频控件的显示方式。音视频控件包括：播放/暂停/进度条/音量</td>
</tr>
<tr>
<td>loop</td>
<td>loop</td>
<td>如果出现该属性，则每当音频结束时重新开始播放。</td>
</tr>
<tr>
<td>muted</td>
<td>muted</td>
<td>
muted 属性属于逻辑属性。
如被设置，则规定视频输出应该被静音</td>
</tr>
<tr>
<td>preload</td>
<td>auto 
metadata 
none</td>
<td>
规定当网页加载时，音频是否默认被加载以及如何被加载。
auto - 当页面加载后载入整个音频
meta - 当页面加载后只载入元数据
none - 当页面加载后不载入音频

</td>

</tr>
<tr>
<td>src</td>
<td>URL</td>
<td>
src 属性描述了音频文件的地址 (URL)。
Ogg 文件格式的音频，可以在 Firefox, Opera 和 Chrome 浏览器下播放。
如果需要在 Internet Explorer 和 Safari浏览器播放音频，必须使用 MP3 文件。
如果需要兼容所有浏览器 - 请在<audio> 元素中使用 <source> 元素。 <source> 元素可以链接到不同的音频文件。浏览器将使用第一个可识别的音频文件格式</td>

</tr>

</tbody>

</table>
 
<table border="0"><caption>source html5中的新属性</caption>
<tbody>
<tr>
<td>属性</td>
<td>值</td>
<td>描述</td>

</tr>
<tr>
<td>media</td>
<td>media_query</td>
<td>规定媒体资源的类型，供浏览器决定是否下载。</td>

</tr>
<tr>
<td>src</td>
<td>URL</td>
<td>规定媒体文件的 URL。</td>

</tr>
<tr>
<td>type</td>
<td>MIME_type</td>
<td>规定媒体资源的 MIME 类型。</td>

</tr>

</tbody>

</table>
Api说明：
1.如果需要显示缓存进度，可以参考：HTML5 Media事件
2.不能控制音频的二进制数据，如果需要处理二进制音频数据，参考HTML5 WebAudioAPI简介(一)
<div class="cnblogs_code">
<pre>只读属性
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----当元数据（比如分辨率和时长）被加载时运行的脚本</pre>
</div>
原文链接：http://caibaojian.com/html5-audio.html
<div class="entry-content" data-no-instant="">
<div>
<h2 id="t5">Audio 对象属性</h2>
<table class="table table-bordered">
<tbody>
<tr><th>属性</th><th>描述</th></tr>
<tr>
<td>audioTracks</td>
<td>返回表示可用音频轨道的 AudioTrackList 对象。</td>
</tr>
<tr>
<td>autoplay</td>
<td>设置或返回是否在就绪（加载完成）后随即播放音频。</td>
</tr>
<tr>
<td>buffered</td>
<td>返回表示音频已缓冲部分的 TimeRanges 对象。</td>
</tr>
<tr>
<td>controller</td>
<td>返回表示音频当前媒体控制器的 MediaController 对象。</td>
</tr>
<tr>
<td>controls</td>
<td>设置或返回音频是否应该显示控件（比如播放/暂停等）。</td>
</tr>
<tr>
<td>crossOrigin</td>
<td>设置或返回音频的 CORS 设置。</td>
</tr>
<tr>
<td>currentSrc</td>
<td>返回当前音频的 URL。</td>
</tr>
<tr>
<td>currentTime</td>
<td>设置或返回音频中的当前播放位置（以秒计）。</td>
</tr>
<tr>
<td>defaultMuted</td>
<td>设置或返回音频默认是否静音。</td>
</tr>
<tr>
<td>defaultPlaybackRate</td>
<td>设置或返回音频的默认播放速度。</td>
</tr>
<tr>
<td>duration</td>
<td>返回音频的长度（以秒计）。</td>
</tr>
<tr>
<td>ended</td>
<td>返回音频的播放是否已结束。</td>
</tr>
<tr>
<td>error</td>
<td>返回表示音频错误状态的 MediaError 对象。</td>
</tr>
<tr>
<td>loop</td>
<td>设置或返回音频是否应在结束时再次播放。</td>
</tr>
<tr>
<td>mediaGroup</td>
<td>设置或返回音频所属媒介组合的名称。</td>
</tr>
<tr>
<td>muted</td>
<td>设置或返回是否关闭声音。</td>
</tr>
<tr>
<td>networkState</td>
<td>返回音频的当前网络状态。</td>
</tr>
<tr>
<td>paused</td>
<td>设置或返回音频是否暂停。</td>
</tr>
<tr>
<td>playbackRate</td>
<td>设置或返回音频播放的速度。</td>
</tr>
<tr>
<td>played</td>
<td>返回表示音频已播放部分的 TimeRanges 对象。</td>
</tr>
<tr>
<td>preload</td>
<td>设置或返回音频的 preload 属性的值。</td>
</tr>
<tr>
<td>readyState</td>
<td>返回音频当前的就绪状态。</td>
</tr>
<tr>
<td>seekable</td>
<td>返回表示音频可寻址部分的 TimeRanges 对象。</td>
</tr>
<tr>
<td>seeking</td>
<td>返回用户当前是否正在音频中进行查找。</td>
</tr>
<tr>
<td>src</td>
<td>设置或返回音频的 src 属性的值。</td>
</tr>
<tr>
<td>textTracks</td>
<td>返回表示可用文本轨道的 TextTrackList 对象。</td>
</tr>
<tr>
<td>volume</td>
<td>设置或返回音频的音量。</td>
</tr>
</tbody>
</table>
</div>
<div>
<h2 id="t6">Audio 对象方法</h2>
<table class="table table-bordered">
<tbody>
<tr><th>方法</th><th>描述</th></tr>
<tr>
<td>addTextTrack()</td>
<td>向音频添加新的文本轨道。</td>
</tr>
<tr>
<td>canPlayType()</td>
<td>检查浏览器是否能够播放指定的音频类型。</td>
</tr>
<tr>
<td>fastSeek()</td>
<td>在音频播放器中指定播放时间。</td>
</tr>
<tr>
<td>getStartDate()</td>
<td>返回新的 Date 对象，表示当前时间线偏移量。</td>
</tr>
<tr>
<td>load()</td>
<td>重新加载音频元素。</td>
</tr>
<tr>
<td>play()</td>
<td>开始播放音频。</td>
</tr>
<tr>
<td>pause()</td>
<td>暂停当前播放的音频。</td>
</tr>
</tbody>
</table>
</div>
<div class="article_index">
<ul style="display: none">
<li>如何工作</li>
<li>audio.html</li>
<li>audio.css</li>
<li>audio.js</li>
<li>Audio 对象属性</li>
<li>Audio 对象方法</li>
</ul>
</div>
</div>
<div class="cnblogs_code"><img id="code_img_closed_88afbdc9-8c3a-470f-baa7-5472d5145a83" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_88afbdc9-8c3a-470f-baa7-5472d5145a83" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_88afbdc9-8c3a-470f-baa7-5472d5145a83" class="cnblogs_code_hide">
<pre><!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></pre>
</div>
简单实例</div>
  
来源：https://www.cnblogs.com/niuben/p/11430014.html

頁: [1]

琼殿技术论坛's Archiver

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