怎么检测音频是否css3 播放器按钮完毕css3
点击联系发帖人
时间：2015-10-12 02:40
当前访客身份：游客 [
当前位置：
发布于 日 8时,
&无详细内容&
代码片段(1)
1.&[代码][JavaScript]代码&&&&
(function($){
jQuery.fn.extend({
"initAudio" : function(){
var myAudio = $("audio",this)[0];
var $sourceList = $("source",this);
var currentSrcIndex = 0;
var currentSr = "";
/*添加播放器UI组件*/
this.append(
'&div class="music_info clearfix"&\
&div class="cd_holder"&&span class="stick"&&/span&&div class="cd"&&/div&&/div&\
&div class="meta_data"&\
&span class="title"&&/span&\
&div class="rating"&\
&div class="starbar"&\
&ul class="current-rating" data-score="85"&\
&li class="star5"&&/li&\
&li class="star4"&&/li&\
&li class="star3"&&/li&\
&li class="star2"&&/li&\
&li class="star1"&&/li&\
&div class="volume_control"&\
&a class="decrease"&a&/a&\
&span class="base_bar"&\
&span class="progress_bar"&&/span&\
&a class="slider"&&/a&\
&a class="increase"&b&/a&\
&ul class="music_list"&&/ul&\
&div class="controls"&\
&div class="play_controls"&\
&a class="btn_previous"&e&/a&\
&a class="btn_play"&c&/a&\
&a class="btn_next"&d&/a&\
&div class="time_line"&\
&span class="passed_time"&0:00&/span&\
&span class="base_bar"&\
&span class="progress_bar"&&/span&\
&span class="total_time"&0:00&/span&\
/*为播放列表添加歌曲信息*/
for (var i = 0; i & $sourceList. i++) {
$(".music_list").append("&li&" + $sourceList[i].title + "&/li&");
/*调控音量方法*/
HTMLAudioElement.prototype.changeVolumeTo = function(volume){
this.volume =
$(".volume_control .progress_bar").css("width",volume*100 + "%");
$(".volume_control .slider").css("left",volume*100 - 7 + "px");
/*为播放器添加事件监听*/
/*播放、暂停、上一首、下一首功能实现*/
$(".btn_play").click(function(){
if (myAudio.paused) {
myAudio.play();
myAudio.pause();
$(".btn_next").click(function(){
++currentSrcIndex & $sourceList.length - 1 && (currentSrcIndex = 0);
currentSrc = $("#myAudio source").eq(currentSrcIndex).prop("src");
myAudio.src = currentS
myAudio.play();
$(".btn_previous").click(function(){
--currentSrcIndex & 0 && (currentSrcIndex = 0);
currentSrc = $("#myAudio source").eq(currentSrcIndex).prop("src");
myAudio.src = currentS
myAudio.play();
/*音量调控功能实现*/
$(".volume_control .decrease").click(function() {
var volume = myAudio.volume - 0.1;
volume & 0 && (volume = 0);
myAudio.changeVolumeTo(volume);
$(".volume_control .increase").click(function() {
var volume = myAudio.volume + 0.1;
volume & 1 && (volume = 1);
myAudio.changeVolumeTo(volume);
$(".volume_control .base_bar").mousedown(function(ev){
var posX = ev.clientX;
var targetLeft = $(this).offset().
var volume = (posX - targetLeft)/100;
volume & 1 && (volume = 1);
volume & 0 && (volume = 0);
myAudio.changeVolumeTo(volume);
$(".volume_control .slider").mousedown(starDrag = function(ev) {
ev.preventDefault();
var origLeft = $(this).position().
/*滑块初始位置*/
var origX = ev.clientX;
/*鼠标初始位置*/
var target =
var progress_bar = $(".volume_control .progress_bar")[0];
$(document).mousemove(doDrag = function(ev){
ev.preventDefault();
var moveX = ev.clientX - origX;
/*计算鼠标移动的距离*/
var curLeft = origLeft + moveX;
/*用鼠标移动的距离表示滑块的移动距离*/
(curLeft & -7) && (curLeft = -7);
(curLeft & 93) && (curLeft = 93);
target.style.left = curLeft + "px";
progress_bar.style.width = curLeft + 7 + "%";
myAudio.changeVolumeTo((curLeft + 7)/100);
$(document).mouseup(stopDrag = function(){
$(document).unbind("mousemove",doDrag);
$(document).unbind("mouseup",stopDrag);
/*音频进度条调控功能实现*/
$(".time_line .base_bar").mousedown(function(ev){
var posX = ev.clientX;
var targetLeft = $(this).offset().
var percentage = (posX - targetLeft)/140 * 100;
myAudio.currentTime = myAudio.duration * percentage / 100;
$(".music_info .cd").click(function(){
$(".music_list").slideToggle(600);
$(".music_list").click(function(ev){
var index = $(ev.target).index();
currentSrcIndex =
currentSrc = $("#myAudio source:eq(" + currentSrcIndex + ")").prop("src");
myAudio.src = currentS
myAudio.play();
/*audio元素事件绑定*/
$(myAudio).bind("loadedmetadata",function(){
var totalTime = formatTime(myAudio.duration);
var title = $("#myAudio source:eq(" + currentSrcIndex + ")").attr("title");
$(".time_line .total_time").text(totalTime);
$(".meta_data .title").text(title);
$(myAudio).bind("timeupdate",function(){
var duration = this.
var curTime = this.currentT
var percentage = curTime/duration * 100;
$(".time_line .progress_bar").css("width",percentage + "%");
var passedTime = formatTime(curTime);
$(".time_line .passed_time").text(passedTime);
$(myAudio).bind("play",function(){
$(".btn_play").text("h");
$(".music_list li").eq(currentSrcIndex).addClass("active")
.siblings().removeClass("active");
$(".music_info .cd").addClass("rotate");
$(".cd_holder .stick").addClass("play");
$(myAudio).bind("pause",function(){
$(".btn_play").text("c");
$(".music_info .cd").removeClass("rotate");
$(".cd_holder .stick").removeClass("play");
$(myAudio).bind("ended",function(){
$(".btn_next").triggerHandler("click");
$(myAudio).bind("progress",function(){
if (myAudio.buffered.length == 1) {
// only one range
if (myAudio.buffered.start(0) == 0) {
// The one range starts at the beginning and ends at
// the end of the video, so the whole thing is loaded
var buffered = myAudio.buffered.end(0);
var percentage = buffered/myAudio.duration * 100;
$(".time_line .base_bar").css("background-size",percentage + "% 100%");
$(myAudio).trigger("loadedmetadata");
/*歌曲播放时间的格式化，将秒数格式化为“分:秒”的形式*/
function formatTime(time) {
var minutes = parseInt(time/60);
var seconds = parseInt(time%60);
seconds&10 && (seconds = "0" + seconds);
return minutes + ":" +
})(jQuery)
开源中国-程序员在线工具：
相关的代码(2710)
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
开源从代码分享开始
希伟的其他代码html5播放音频文件js控制
这是一个播放代码案例：
var myAudioWin = new Audio();
myAudioWin.setAttribute(&src&, &yaoyao/haha.mp3&);
myAudioWin.play();//播放
其他详细请看下面：
&audio&标签属性：
src：音乐的URL
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条
&audio id=&media& src=&/test.mp3& controls&&/audio&
&video&标签属性：
src：视频的URL
poster：视频封面，没有播放时显示的图片
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条
width：视频宽度
height：视频高度
&video id=&media& src=&/test.mp4& controls width=&400px& heigt=&400px&&&/video&
获取HTMLVideoElement和HTMLAudioElement对象
//audio可以直接通过new创建对象
Media = new Audio(&/test.mp3&);
//audio和video都可以通过标签获取对象
Media = document.getElementById(&media&);
Media方法和属性：
HTMLVideoElement 和HTMLAudioElement 均继承自HTMLMediaElement
//错误状态
Media. //null:正常
Media.error. //1.用户终止 2.网络错误 3.解码错误 4.URL无效
//网络状态
Media.currentS //返回当前资源的URL
Media.src = //返回或设置当前资源的URL
Media.canPlayType(type); //是否能播放某种格式的资源
Media.networkS //0.此元素未初始化
1.正常但没有使用网络
2.正在下载数据
3.没有找到资源
Media.load(); //重新加载src指定的资源
Media. //返回已缓冲区域，TimeRanges
Media. //none:不预载 metadata:预载资源信息 auto:
//准备状态
Media.readyS
//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
Media. //是否正在seeking
//回放状态
Media.currentTime = //当前播放的位置，赋值可改变位置
Media.startT //一般为0，如果为流媒体或者不从0开始的资源，则不为0
Media. //当前资源长度 流返回无限
Media. //是否暂停
Media.defaultPlaybackRate =//默认的回放速度，可以设置
Media.playbackRate =//当前播放速度，设置后马上改变
Media. //返回已经播放的区域，TimeRanges，关于此对象见下文
Media. //返回可以seek的区域 TimeRanges
Media. //是否结束
Media.autoP
//是否自动播放
//是否循环播放
Media.play();
Media.pause();
Media.//是否有默认控制条
Media.volume = //音量
Media.muted = //静音
//TimeRanges(区域)对象
TimeRanges. //区域段数
TimeRanges.start(index) //第index段区域的开始位置
TimeRanges.end(index) //第index段区域的结束位置
eventTester = function(e){
Media.addEventListener(e,function(){
console.log((new Date()).getTime(),e);
eventTester(&loadstart&);
//客户端开始请求数据
eventTester(&progress&);
//客户端正在请求数据
eventTester(&suspend&);
//延迟下载
eventTester(&abort&);
//客户端主动终止下载（不是因为错误引起），
eventTester(&error&);
//请求数据时遇到错误
eventTester(&stalled&);
//网速失速
eventTester(&play&);
//play()和autoplay开始播放时触发
eventTester(&pause&);
//pause()触发
eventTester(&loadedmetadata&);
//成功获取资源长度
eventTester(&loadeddata&);
eventTester(&waiting&);
//等待数据，并非错误
eventTester(&playing&);
//开始回放
eventTester(&canplay&);
//可以播放，但中途可能因为加载而暂停
eventTester(&canplaythrough&); //可以播放，歌曲全部加载完毕
eventTester(&seeking&);
eventTester(&seeked&);
//寻找完毕
eventTester(&timeupdate&);
//播放时间改变
eventTester(&ended&);
//播放结束
eventTester(&ratechange&);
//播放速率改变
eventTester(&durationchange&);
//资源长度改变
eventTester(&volumechange&);
//音量改变
Related content:
本文固定链接:
【上一篇】【下一篇】
还没用阿里云？OUT了！
博客微信号（送红包哦）
日志总数：609 篇
评论总数：347 篇
标签数量：407 个
链接总数：10 个
建站日期：
运行天数：1396 天
最后更新：html5+css3酷炫音频播放器 - 源码下载 - A5源码
关键字：    
当前位置： >
html5+css3酷炫音频播放器
详细介绍 - [ html5+css3酷炫音频播放器 ]
技术qq： html5+css3酷炫音频播放器是一款UI设计的html5+css3黑色酷炫播放器效果。
下载地址 - [ html5+css3酷炫音频播放器 ]
推荐使用、下载，请使用解压文件；
下载本站资源，如服务器暂不能下载请过一段时间再试；
本站资源通过 、 等软件检测；
本站部分资源供学习交流使用，如商业用途，请购正版。
网友对“html5+css3酷炫音频播放器”的评论
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
上一篇： & 下一篇：
您喜欢这个源码么？
本类热门源码
增值电信业务经营许可证:苏B2-CopyRight ©
All Rights reserved.HTML5+CSS3制作音频播放器 - 下载频道
- CSDN.NET
&&&&HTML5+CSS3制作音频播放器
HTML5+CSS3制作音频播放器
用HTML5加css3制作的音频播放器，有打分功能，还有背景设置，歌曲列表
若举报审核通过，可奖励20下载分
被举报人：
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
您可能还需要
移动开发下载排行1您所在的位置： &
HTML5中视频和音频核心事件讲解
HTML5中视频和音频核心事件讲解
HTML 5中的视频和音频中有不少核心的事件,其中有的比较容易理解,基本能从字面就解析了,比如“play”事件就很好理解。而其他有的事件则需要花费点心思，
HTML 5中的视频和音频中有不少核心的事件,其中有的比较容易理解,基本能从字面就解析了,比如&play&事件就很好理解。而其他有的事件则需要花费点心思，特别是&progress&事件。因此，在本文中，将带领读者研究HTML 5视频和音频中重要的事件，探究这些事件是应该在什么时候使用以及其中的重要相关属性。我们也将看下这些事件在当今不同浏览器中的差异。为了本文的测试，使用的浏览器如下：Opera 12、Chrome 28、IE 10、Firefox 22、Safari 5(桌面版)和Mobile Safari 6(iOS版本)。
播放相关的事件
我们先来看下视频和音频中的playback事件。plackback事件发生的时机在播放媒体或停止媒体中，这个比较好理解，下面来仔细研究一下。其中&play&和&pause&事件分别在媒体播放和停止的时候触发，但也有一个&ended&事件，该事件是在媒体播放完毕到达最后的时候触发－无论是正常情况下的结束或是用户自己动播放条到媒体文件的最后。
这两个对应事件的触发很简单，只需要调用play()和pause()方法就可以了。它们也有对应的属性，其中.paused属性默认设置为true，而.ended属性默认是设置为false的，当然当媒体文件播放到最后的时候，.ended属性则变为true。
然而，在Opera、Safari和IE 10中，请注意有个区别，就是即使媒体播放完毕，其中的.paused属性依然为false(从逻辑上说，媒体已经播放完毕了)。这样一个实际的结果是play/pause按钮的事件都不会触发了，看下面的例子：
button.addEventListener('click',&function(e)&{&&&if(media.paused)&&&{&&&&&media.play();&&&}&&&else&&&{&&&&&media.pause();&&&}&},&false);&
也就是说，当视频结束后，其pause()事件依然能调用。我们可以通过一个小技巧去修正这个问题，如下代码所示：
media.addEventListener('ended',&function(e)&&&{&&&&&media.pause();&&&},&false);&&
也就是在监听ended事件中，主动调用media.pause()方法就可以了。在Firefox和Chrome的最新版本中，已经修正了这个问题。
关于加载事件
加载事件总是在媒体加载（或加载失败）的时候发生。加载事件受到加载媒体状态的影响，比如是否使用了preload属性又或者是媒体是否缓存了。下面我们来逐一分析下其中关键的事件，首先是&loadstart&事件，含义是让浏览器刚开始的时候去寻找获得数据。但要注意的是，loadstart并不意味着就任何数据就会马上加载，还要看preload属性的值的设置。如果preload（预装载的值）设置为&none&的话，则&loadstart&事件就是唯一在播放视频前触发的事件。如果preload属性设置为&metadata&或者是&auto&，则会触发&progress&和&loadmetadata&事件（如果没预加载的话，这两个事件也会触发，但不会在播放前发生）。
在下一节中，我们才学习&progress&事件，由于其比较复杂。我们先来学习比较简单的&loadedmetadata&事件。正如字面的含义，浏览器仅仅加载媒体的元数据信息而已，比如其长度.duration(是一个浮点数而不是默认的NaN)。
当然，&loadedmetadata&事件只有在确认能加载媒体文件后才能加载，换句话说，如果某个媒体问题文件不能加载（比如404错误），则会直接产生error事件，当然也不可能继续运行相关的播放事件了。
这里，又要提醒用户有的浏览器中是有差别的。在Mobile Safari中，preload的属性其实是没声明的，就等于设置为&none&一样了。但在IE 10中，又有不同了，其中媒体的元数据默认是自动加载的，所以preload设置为none其实跟设置为metadata的作用是一样的。
在&loadedmetadata&事件触发后，接下来的重要事件就是&canplay&，这个是浏览器用来确认是否已经装载足够的媒体信息到浏览器中能播放一个事件。如果preload属性设置为&auto&，则在数据装载后大概几秒，&canplay&事件就会触发；如果preload设置为&metadata&或者是&none&，则直到播放开始时才会触发。这个规则对Chrome浏览器来说是例外的，在Chrome中，即使只是加载元数据阶段，&canplay&事件也会触发。
同时也有仅接着的事件叫&canplaythrough&，这个事件其实是给浏览器根据当前网络状况去判断是否已经加载了足够的媒体片断而支撑基本的播放。所以这个事件要在数据被预加载大概几秒后才会触发。
在实际情况下，&canplaythrough&事件基本是没啥作用的，因为Safari根本不会触发这个事件，而Opera和Chrome则在&canplay&事件触发后马上就触发这个事件，只有FireFox和IE 10实现了这个事件。
所以实际上，开发者最应该关心的是监视&progress&事件，以了解媒体到底加载了多少（必要的时候可以计算媒体的下载速度）。
Progress事件
接下来我们重点学习下progress事件。该事件在数据正在下载的时候会触发。所以当preload设置为none的时候，progress事件在知道播放事件真正开始前是不会触发的。如果preload设置为&metadata&，则该事件会短暂触发大概几秒，然后停止，直到真正的播放行为开始时才触发；如果preload设置为&auto&，则会触发一直直到整个媒体文件下载完毕。
无论preload如何设置，一旦用户开始进行播放的行为，则浏览器会开始下载整个媒体文件，则会持续触发progress事件，一直直到整个文件下载完毕，即使视频被暂停。
当数据下载后，则我们需要了解如何用时间表达这个progress的事件，则对接下来深入了解progress事件是十分重要的。当数据开始加载时，会创建表示媒体播放时间的范围，比如一旦头10秒的数据已经加载，则以数组的方式记录了开始和结束时间，如下的方式表示：
当然，实际上是会有多个时间范围存在的，比如用户手工使用播放器的进度条去移动到想要的位置，则浏览器会忽略当前的时间范围而加载新的部分而不是象 Flash那样重新加载两个时间点之间的部分。
比如我们加载10秒的视频后，跳到两分钟后的片断继续播放另外的10秒，则有两个时间范围，用如下的方式表达：
[&&&[0,10],&&&[120,130]&]&
假设用户这个时候又回看旧的片断，则继续又增加一个时间范围的数组，如：
[&&&[0,10],&&&[60,70],&&&[120,130]&]&
如果从60秒开始看到130秒结束，则最后的时间范围合拼为：
[&&&[0,10],&&&[60,130]&]&
上面的例子只是简单说明在播放媒体中，时间的范围是如何运作的，当然实际上的数据保存不是这个样子。实际上媒体都有一个.buffered对象以表示时间范围。.buffered对象有一个.length长度属性表示有多少段时间范围，并且有对应的start()和end()方法，所以我们可以将buffered的数据转换为二维数组，如下代码所示：
var&ranges&=&[];&for(var&i&=&0;&i&&;&i&++)&{&&&ranges.push([&&&&&media.buffered.start(i),&&&&&media.buffered.end(i)&&&&&]);&
最后，我们可以自定义progress事件如下：
media.addEventListener('progress',&function()&{&&&var&ranges&=&[];&&&for(var&i&=&0;&i&&;&i&++)&&&{&&&&&ranges.push([&&&&&&&media.buffered.start(i),&&&&&&&media.buffered.end(i)&&&&&&&]);&&&}&},&false);&
有了这个方法，则我们可以针对progress事件进行一些定制开发。比如我们可以实现一个简单的播放视频，并且提供一个额外的进度条，在视频加载过程中能看到其进度。其实际的运行效果请参考： ，下面是一个运行效果截图：
498)this.width=498;' onmousewheel = 'javascript:return big(this)' alt="" width="443" height="312" src="data:image/base64,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" />
下面选取其中的代码片断讲解其核心原理：
function&onprogress()&&&&&&&&&{&&&&&&&&&&&&&//获得buffered数据&&&&&&&&&&&&&var&ranges&=&[];&&&&&&&&&&&&&for(var&i&=&0;&i&&;&i&++)&&&&&&&&&&&&&{&&&&&&&&&&&&&&&&&ranges.push([&&&&&&&&&&&&&&&&&&&&&media.buffered.start(i),&&&&&&&&&&&&&&&&&&&&&media.buffered.end(i)&&&&&&&&&&&&&&&&&&&&&]);&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&&&&&&&&&&//获得在容器中的当前进度&&&&&&&&&&&&&var&spans&=&progress.getElementsByTagName('span');&&&&&&&&&&&&&&&&&&&&&&&&&&//如果还没有加载完毕则继续加载&&&&&&&&&&&&&while(spans.length&&)&&&&&&&&&&&&&{&&&&&&&&&&&&&&&&&progress.appendChild(document.createElement('span'));&&&&&&&&&&&&&}&&&&&&&&&&&&&while(spans.length&&media.buffered.length)&&&&&&&&&&&&&{&&&&&&&&&&&&&&&&&progress.removeChild(progress.lastChild);&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&for(var&i&=&0;&i&&;&i&++)&&&&&&&&&&&&&{&&&&&&&&&&&&&&&&&spans[i].style.left&=&Math.round&&&&&&&&&&&&&&&&&(&&&&&&&&&&&&&&&&&&&&&(100&/&media.duration)&&&&&&&&&&&&&&&&&&*&&&&&&&&&&&&&&&&&&&&&&ranges[i][0]&&&&&&&&&&&&&&&&&)&&&&&&&&&&&&&&&&&&+&'%';&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&spans[i].style.width&=&Math.round&&&&&&&&&&&&&&&&&(&&&&&&&&&&&&&&&&&&&&&(100&/&media.duration)&&&&&&&&&&&&&&&&&&*&&&&&&&&&&&&&&&&&&&&&&(ranges[i][1]&-&ranges[i][0])&&&&&&&&&&&&&&&&&)&&&&&&&&&&&&&&&&&&+&'%';&&&&&&&&&&&&&}&&&&&&&&&}&
在上面的代码段中，使用的是设置&span&的宽度去代表进度条的每一个格的宽度，首先获得buffered数据，存放到数据ranges中，然后判断媒体文件是否加载完毕，如果还没加载完毕，则继续往DOM中添加&span&标签，而这个span标签的宽度和样式则是通过上面的代码按百分比计算出来。
最后，用户可以通过的例子，学习到本文中提到的在媒体加载前、加载中和加载后浏览器的相关事件，在这个例子中会输出相关的日志。
【编辑推荐】
【责任编辑： TEL：（010）】
关于的更多文章
这是一本介绍如何使用HTML5和JavaScript进行Android游戏开发的书
网友评论TOP5
再过一次生日，我就满七十岁了。而且正如大家印象中一样，像我这个年纪的...
讲师： 0人学习过讲师： 28人学习过讲师： 50人学习过
十一归来，貌似大家都没有什么劲头。本周五，为期两天
《待字闺中：编程面试题集》集合最新最全的面试经验和
这周Windows8.1正式版发布了，不知道各位有没有去更新
本书使用通俗易懂的语言，通过大量的实例，从实际应用的角度出发，全面系统地介绍了网络服务操作系统平台、电子邮件系统、Web站
51CTO旗下网站}
当前位置：
发布于 日 8时,
&无详细内容&
代码片段(1)
1.&[代码][JavaScript]代码&&&&
(function($){
jQuery.fn.extend({
"initAudio" : function(){
var myAudio = $("audio",this)[0];
var $sourceList = $("source",this);
var currentSrcIndex = 0;
var currentSr = "";
/*添加播放器UI组件*/
this.append(
'&div class="music_info clearfix"&\
&div class="cd_holder"&&span class="stick"&&/span&&div class="cd"&&/div&&/div&\
&div class="meta_data"&\
&span class="title"&&/span&\
&div class="rating"&\
&div class="starbar"&\
&ul class="current-rating" data-score="85"&\
&li class="star5"&&/li&\
&li class="star4"&&/li&\
&li class="star3"&&/li&\
&li class="star2"&&/li&\
&li class="star1"&&/li&\
&div class="volume_control"&\
&a class="decrease"&a&/a&\
&span class="base_bar"&\
&span class="progress_bar"&&/span&\
&a class="slider"&&/a&\
&a class="increase"&b&/a&\
&ul class="music_list"&&/ul&\
&div class="controls"&\
&div class="play_controls"&\
&a class="btn_previous"&e&/a&\
&a class="btn_play"&c&/a&\
&a class="btn_next"&d&/a&\
&div class="time_line"&\
&span class="passed_time"&0:00&/span&\
&span class="base_bar"&\
&span class="progress_bar"&&/span&\
&span class="total_time"&0:00&/span&\
/*为播放列表添加歌曲信息*/
for (var i = 0; i & $sourceList. i++) {
$(".music_list").append("&li&" + $sourceList[i].title + "&/li&");
/*调控音量方法*/
HTMLAudioElement.prototype.changeVolumeTo = function(volume){
this.volume =
$(".volume_control .progress_bar").css("width",volume*100 + "%");
$(".volume_control .slider").css("left",volume*100 - 7 + "px");
/*为播放器添加事件监听*/
/*播放、暂停、上一首、下一首功能实现*/
$(".btn_play").click(function(){
if (myAudio.paused) {
myAudio.play();
myAudio.pause();
$(".btn_next").click(function(){
++currentSrcIndex & $sourceList.length - 1 && (currentSrcIndex = 0);
currentSrc = $("#myAudio source").eq(currentSrcIndex).prop("src");
myAudio.src = currentS
myAudio.play();
$(".btn_previous").click(function(){
--currentSrcIndex & 0 && (currentSrcIndex = 0);
currentSrc = $("#myAudio source").eq(currentSrcIndex).prop("src");
myAudio.src = currentS
myAudio.play();
/*音量调控功能实现*/
$(".volume_control .decrease").click(function() {
var volume = myAudio.volume - 0.1;
volume & 0 && (volume = 0);
myAudio.changeVolumeTo(volume);
$(".volume_control .increase").click(function() {
var volume = myAudio.volume + 0.1;
volume & 1 && (volume = 1);
myAudio.changeVolumeTo(volume);
$(".volume_control .base_bar").mousedown(function(ev){
var posX = ev.clientX;
var targetLeft = $(this).offset().
var volume = (posX - targetLeft)/100;
volume & 1 && (volume = 1);
volume & 0 && (volume = 0);
myAudio.changeVolumeTo(volume);
$(".volume_control .slider").mousedown(starDrag = function(ev) {
ev.preventDefault();
var origLeft = $(this).position().
/*滑块初始位置*/
var origX = ev.clientX;
/*鼠标初始位置*/
var target =
var progress_bar = $(".volume_control .progress_bar")[0];
$(document).mousemove(doDrag = function(ev){
ev.preventDefault();
var moveX = ev.clientX - origX;
/*计算鼠标移动的距离*/
var curLeft = origLeft + moveX;
/*用鼠标移动的距离表示滑块的移动距离*/
(curLeft & -7) && (curLeft = -7);
(curLeft & 93) && (curLeft = 93);
target.style.left = curLeft + "px";
progress_bar.style.width = curLeft + 7 + "%";
myAudio.changeVolumeTo((curLeft + 7)/100);
$(document).mouseup(stopDrag = function(){
$(document).unbind("mousemove",doDrag);
$(document).unbind("mouseup",stopDrag);
/*音频进度条调控功能实现*/
$(".time_line .base_bar").mousedown(function(ev){
var posX = ev.clientX;
var targetLeft = $(this).offset().
var percentage = (posX - targetLeft)/140 * 100;
myAudio.currentTime = myAudio.duration * percentage / 100;
$(".music_info .cd").click(function(){
$(".music_list").slideToggle(600);
$(".music_list").click(function(ev){
var index = $(ev.target).index();
currentSrcIndex =
currentSrc = $("#myAudio source:eq(" + currentSrcIndex + ")").prop("src");
myAudio.src = currentS
myAudio.play();
/*audio元素事件绑定*/
$(myAudio).bind("loadedmetadata",function(){
var totalTime = formatTime(myAudio.duration);
var title = $("#myAudio source:eq(" + currentSrcIndex + ")").attr("title");
$(".time_line .total_time").text(totalTime);
$(".meta_data .title").text(title);
$(myAudio).bind("timeupdate",function(){
var duration = this.
var curTime = this.currentT
var percentage = curTime/duration * 100;
$(".time_line .progress_bar").css("width",percentage + "%");
var passedTime = formatTime(curTime);
$(".time_line .passed_time").text(passedTime);
$(myAudio).bind("play",function(){
$(".btn_play").text("h");
$(".music_list li").eq(currentSrcIndex).addClass("active")
.siblings().removeClass("active");
$(".music_info .cd").addClass("rotate");
$(".cd_holder .stick").addClass("play");
$(myAudio).bind("pause",function(){
$(".btn_play").text("c");
$(".music_info .cd").removeClass("rotate");
$(".cd_holder .stick").removeClass("play");
$(myAudio).bind("ended",function(){
$(".btn_next").triggerHandler("click");
$(myAudio).bind("progress",function(){
if (myAudio.buffered.length == 1) {
// only one range
if (myAudio.buffered.start(0) == 0) {
// The one range starts at the beginning and ends at
// the end of the video, so the whole thing is loaded
var buffered = myAudio.buffered.end(0);
var percentage = buffered/myAudio.duration * 100;
$(".time_line .base_bar").css("background-size",percentage + "% 100%");
$(myAudio).trigger("loadedmetadata");
/*歌曲播放时间的格式化，将秒数格式化为“分:秒”的形式*/
function formatTime(time) {
var minutes = parseInt(time/60);
var seconds = parseInt(time%60);
seconds&10 && (seconds = "0" + seconds);
return minutes + ":" +
})(jQuery)
开源中国-程序员在线工具：
相关的代码(2710)
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
开源从代码分享开始
希伟的其他代码html5播放音频文件js控制
这是一个播放代码案例：
var myAudioWin = new Audio();
myAudioWin.setAttribute(&src&, &yaoyao/haha.mp3&);
myAudioWin.play();//播放
其他详细请看下面：
&audio&标签属性：
src：音乐的URL
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条
&audio id=&media& src=&/test.mp3& controls&&/audio&
&video&标签属性：
src：视频的URL
poster：视频封面，没有播放时显示的图片
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条
width：视频宽度
height：视频高度
&video id=&media& src=&/test.mp4& controls width=&400px& heigt=&400px&&&/video&
获取HTMLVideoElement和HTMLAudioElement对象
//audio可以直接通过new创建对象
Media = new Audio(&/test.mp3&);
//audio和video都可以通过标签获取对象
Media = document.getElementById(&media&);
Media方法和属性：
HTMLVideoElement 和HTMLAudioElement 均继承自HTMLMediaElement
//错误状态
Media. //null:正常
Media.error. //1.用户终止 2.网络错误 3.解码错误 4.URL无效
//网络状态
Media.currentS //返回当前资源的URL
Media.src = //返回或设置当前资源的URL
Media.canPlayType(type); //是否能播放某种格式的资源
Media.networkS //0.此元素未初始化
1.正常但没有使用网络
2.正在下载数据
3.没有找到资源
Media.load(); //重新加载src指定的资源
Media. //返回已缓冲区域，TimeRanges
Media. //none:不预载 metadata:预载资源信息 auto:
//准备状态
Media.readyS
//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
Media. //是否正在seeking
//回放状态
Media.currentTime = //当前播放的位置，赋值可改变位置
Media.startT //一般为0，如果为流媒体或者不从0开始的资源，则不为0
Media. //当前资源长度 流返回无限
Media. //是否暂停
Media.defaultPlaybackRate =//默认的回放速度，可以设置
Media.playbackRate =//当前播放速度，设置后马上改变
Media. //返回已经播放的区域，TimeRanges，关于此对象见下文
Media. //返回可以seek的区域 TimeRanges
Media. //是否结束
Media.autoP
//是否自动播放
//是否循环播放
Media.play();
Media.pause();
Media.//是否有默认控制条
Media.volume = //音量
Media.muted = //静音
//TimeRanges(区域)对象
TimeRanges. //区域段数
TimeRanges.start(index) //第index段区域的开始位置
TimeRanges.end(index) //第index段区域的结束位置
eventTester = function(e){
Media.addEventListener(e,function(){
console.log((new Date()).getTime(),e);
eventTester(&loadstart&);
//客户端开始请求数据
eventTester(&progress&);
//客户端正在请求数据
eventTester(&suspend&);
//延迟下载
eventTester(&abort&);
//客户端主动终止下载（不是因为错误引起），
eventTester(&error&);
//请求数据时遇到错误
eventTester(&stalled&);
//网速失速
eventTester(&play&);
//play()和autoplay开始播放时触发
eventTester(&pause&);
//pause()触发
eventTester(&loadedmetadata&);
//成功获取资源长度
eventTester(&loadeddata&);
eventTester(&waiting&);
//等待数据，并非错误
eventTester(&playing&);
//开始回放
eventTester(&canplay&);
//可以播放，但中途可能因为加载而暂停
eventTester(&canplaythrough&); //可以播放，歌曲全部加载完毕
eventTester(&seeking&);
eventTester(&seeked&);
//寻找完毕
eventTester(&timeupdate&);
//播放时间改变
eventTester(&ended&);
//播放结束
eventTester(&ratechange&);
//播放速率改变
eventTester(&durationchange&);
//资源长度改变
eventTester(&volumechange&);
//音量改变
Related content:
本文固定链接:
【上一篇】【下一篇】
还没用阿里云？OUT了！
博客微信号（送红包哦）
日志总数：609 篇
评论总数：347 篇
标签数量：407 个
链接总数：10 个
建站日期：
运行天数：1396 天
最后更新：html5+css3酷炫音频播放器 - 源码下载 - A5源码
关键字：    
当前位置： >
html5+css3酷炫音频播放器
详细介绍 - [ html5+css3酷炫音频播放器 ]
技术qq： html5+css3酷炫音频播放器是一款UI设计的html5+css3黑色酷炫播放器效果。
下载地址 - [ html5+css3酷炫音频播放器 ]
推荐使用、下载，请使用解压文件；
下载本站资源，如服务器暂不能下载请过一段时间再试；
本站资源通过 、 等软件检测；
本站部分资源供学习交流使用，如商业用途，请购正版。
网友对“html5+css3酷炫音频播放器”的评论
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
上一篇： & 下一篇：
您喜欢这个源码么？
本类热门源码
增值电信业务经营许可证:苏B2-CopyRight ©
All Rights reserved.HTML5+CSS3制作音频播放器 - 下载频道
- CSDN.NET
&&&&HTML5+CSS3制作音频播放器
HTML5+CSS3制作音频播放器
用HTML5加css3制作的音频播放器，有打分功能，还有背景设置，歌曲列表
若举报审核通过，可奖励20下载分
被举报人：
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
您可能还需要
移动开发下载排行1您所在的位置： &
HTML5中视频和音频核心事件讲解
HTML5中视频和音频核心事件讲解
HTML 5中的视频和音频中有不少核心的事件,其中有的比较容易理解,基本能从字面就解析了,比如“play”事件就很好理解。而其他有的事件则需要花费点心思，
HTML 5中的视频和音频中有不少核心的事件,其中有的比较容易理解,基本能从字面就解析了,比如&play&事件就很好理解。而其他有的事件则需要花费点心思，特别是&progress&事件。因此，在本文中，将带领读者研究HTML 5视频和音频中重要的事件，探究这些事件是应该在什么时候使用以及其中的重要相关属性。我们也将看下这些事件在当今不同浏览器中的差异。为了本文的测试，使用的浏览器如下：Opera 12、Chrome 28、IE 10、Firefox 22、Safari 5(桌面版)和Mobile Safari 6(iOS版本)。
播放相关的事件
我们先来看下视频和音频中的playback事件。plackback事件发生的时机在播放媒体或停止媒体中，这个比较好理解，下面来仔细研究一下。其中&play&和&pause&事件分别在媒体播放和停止的时候触发，但也有一个&ended&事件，该事件是在媒体播放完毕到达最后的时候触发－无论是正常情况下的结束或是用户自己动播放条到媒体文件的最后。
这两个对应事件的触发很简单，只需要调用play()和pause()方法就可以了。它们也有对应的属性，其中.paused属性默认设置为true，而.ended属性默认是设置为false的，当然当媒体文件播放到最后的时候，.ended属性则变为true。
然而，在Opera、Safari和IE 10中，请注意有个区别，就是即使媒体播放完毕，其中的.paused属性依然为false(从逻辑上说，媒体已经播放完毕了)。这样一个实际的结果是play/pause按钮的事件都不会触发了，看下面的例子：
button.addEventListener('click',&function(e)&{&&&if(media.paused)&&&{&&&&&media.play();&&&}&&&else&&&{&&&&&media.pause();&&&}&},&false);&
也就是说，当视频结束后，其pause()事件依然能调用。我们可以通过一个小技巧去修正这个问题，如下代码所示：
media.addEventListener('ended',&function(e)&&&{&&&&&media.pause();&&&},&false);&&
也就是在监听ended事件中，主动调用media.pause()方法就可以了。在Firefox和Chrome的最新版本中，已经修正了这个问题。
关于加载事件
加载事件总是在媒体加载（或加载失败）的时候发生。加载事件受到加载媒体状态的影响，比如是否使用了preload属性又或者是媒体是否缓存了。下面我们来逐一分析下其中关键的事件，首先是&loadstart&事件，含义是让浏览器刚开始的时候去寻找获得数据。但要注意的是，loadstart并不意味着就任何数据就会马上加载，还要看preload属性的值的设置。如果preload（预装载的值）设置为&none&的话，则&loadstart&事件就是唯一在播放视频前触发的事件。如果preload属性设置为&metadata&或者是&auto&，则会触发&progress&和&loadmetadata&事件（如果没预加载的话，这两个事件也会触发，但不会在播放前发生）。
在下一节中，我们才学习&progress&事件，由于其比较复杂。我们先来学习比较简单的&loadedmetadata&事件。正如字面的含义，浏览器仅仅加载媒体的元数据信息而已，比如其长度.duration(是一个浮点数而不是默认的NaN)。
当然，&loadedmetadata&事件只有在确认能加载媒体文件后才能加载，换句话说，如果某个媒体问题文件不能加载（比如404错误），则会直接产生error事件，当然也不可能继续运行相关的播放事件了。
这里，又要提醒用户有的浏览器中是有差别的。在Mobile Safari中，preload的属性其实是没声明的，就等于设置为&none&一样了。但在IE 10中，又有不同了，其中媒体的元数据默认是自动加载的，所以preload设置为none其实跟设置为metadata的作用是一样的。
在&loadedmetadata&事件触发后，接下来的重要事件就是&canplay&，这个是浏览器用来确认是否已经装载足够的媒体信息到浏览器中能播放一个事件。如果preload属性设置为&auto&，则在数据装载后大概几秒，&canplay&事件就会触发；如果preload设置为&metadata&或者是&none&，则直到播放开始时才会触发。这个规则对Chrome浏览器来说是例外的，在Chrome中，即使只是加载元数据阶段，&canplay&事件也会触发。
同时也有仅接着的事件叫&canplaythrough&，这个事件其实是给浏览器根据当前网络状况去判断是否已经加载了足够的媒体片断而支撑基本的播放。所以这个事件要在数据被预加载大概几秒后才会触发。
在实际情况下，&canplaythrough&事件基本是没啥作用的，因为Safari根本不会触发这个事件，而Opera和Chrome则在&canplay&事件触发后马上就触发这个事件，只有FireFox和IE 10实现了这个事件。
所以实际上，开发者最应该关心的是监视&progress&事件，以了解媒体到底加载了多少（必要的时候可以计算媒体的下载速度）。
Progress事件
接下来我们重点学习下progress事件。该事件在数据正在下载的时候会触发。所以当preload设置为none的时候，progress事件在知道播放事件真正开始前是不会触发的。如果preload设置为&metadata&，则该事件会短暂触发大概几秒，然后停止，直到真正的播放行为开始时才触发；如果preload设置为&auto&，则会触发一直直到整个媒体文件下载完毕。
无论preload如何设置，一旦用户开始进行播放的行为，则浏览器会开始下载整个媒体文件，则会持续触发progress事件，一直直到整个文件下载完毕，即使视频被暂停。
当数据下载后，则我们需要了解如何用时间表达这个progress的事件，则对接下来深入了解progress事件是十分重要的。当数据开始加载时，会创建表示媒体播放时间的范围，比如一旦头10秒的数据已经加载，则以数组的方式记录了开始和结束时间，如下的方式表示：
当然，实际上是会有多个时间范围存在的，比如用户手工使用播放器的进度条去移动到想要的位置，则浏览器会忽略当前的时间范围而加载新的部分而不是象 Flash那样重新加载两个时间点之间的部分。
比如我们加载10秒的视频后，跳到两分钟后的片断继续播放另外的10秒，则有两个时间范围，用如下的方式表达：
[&&&[0,10],&&&[120,130]&]&
假设用户这个时候又回看旧的片断，则继续又增加一个时间范围的数组，如：
[&&&[0,10],&&&[60,70],&&&[120,130]&]&
如果从60秒开始看到130秒结束，则最后的时间范围合拼为：
[&&&[0,10],&&&[60,130]&]&
上面的例子只是简单说明在播放媒体中，时间的范围是如何运作的，当然实际上的数据保存不是这个样子。实际上媒体都有一个.buffered对象以表示时间范围。.buffered对象有一个.length长度属性表示有多少段时间范围，并且有对应的start()和end()方法，所以我们可以将buffered的数据转换为二维数组，如下代码所示：
var&ranges&=&[];&for(var&i&=&0;&i&&;&i&++)&{&&&ranges.push([&&&&&media.buffered.start(i),&&&&&media.buffered.end(i)&&&&&]);&
最后，我们可以自定义progress事件如下：
media.addEventListener('progress',&function()&{&&&var&ranges&=&[];&&&for(var&i&=&0;&i&&;&i&++)&&&{&&&&&ranges.push([&&&&&&&media.buffered.start(i),&&&&&&&media.buffered.end(i)&&&&&&&]);&&&}&},&false);&
有了这个方法，则我们可以针对progress事件进行一些定制开发。比如我们可以实现一个简单的播放视频，并且提供一个额外的进度条，在视频加载过程中能看到其进度。其实际的运行效果请参考： ，下面是一个运行效果截图：
498)this.width=498;' onmousewheel = 'javascript:return big(this)' alt="" width="443" height="312" src="data:image/base64,iVBORw0KGgoAAAANSUhEUgAAAa0AAAEvCAIAAAB5TAmzAAAgAElEQVR4nO3deXxU5dk38EkCZJlJZsnOKu2rVdpitXWrCwgC1Ze+1gUBF5aQTBICWGq1H3yqdXvEpVofu6htP31aq0W0trZaRVCEhCRkZV9mn8ksycxklsy+nXO9f1yZw5CQgJ4DZ8Tr+zmfMYyTmclc9/md+9znPmckQAghQmEB2BP/TaUXFiAcT6UAXEPxDz7pGGLAHgBLAEwB6AuBKwD9vpTJnTw+EDvugOhxeOeyp5oX/9mrhW37vHYfOIfA4I9YQrEBf9LtS/QPBgaHwkNhsNrA54S2T2D5D3esWf7JsYPQvNu9b19w0Ak1Sz+bd/HuxWX9ixWWvz0Kg8dg0AEOb9IRjlmCQXsg2T/EDPiT/f643RuViP2xEULOI+kchJNzMBZnUgChKOsJsZ+2H7IPwUAUDF4wDYFliB3wwYAPbENgGQKTFxIm+NPlj1r/a2/XDleniR2MgNEec6fAFIjZPCl3EBy+yMBQwuFhfEHYsqV/2Z1vPfmo/vgR+HRn6LMWxxFtzOGEfis8VGOaW9ZybcGnYz2NzgCIE5ELEFE/1DiQE/M+BNOTwM5SAhRDgn52DmgoE44It/+Flvfwg0TrCGweQFi4exuZM2T8ocAJMfTG7w6+DRb99ve1Wzd7e7w5g02sETAJ0zZAmkDINgGwJbAPTOeH8QNvzszw/9/MP2bug6AJ+2Bj/e03fIFLb6QOcAnQ36TLDtT3Dn996/evprN8x+7brvv3jgGOw3Ji2BlDUQdgyF+73sgAccbqAcJIQIZ4wcTDHAAgRjrCcMH7ce6Y+BKQgaN9gD4PCB3cv0+RlzCEwBMLnBbYbH/u/jcBg++FC/3waeEFgcCZs/ZRliTV7Qe8AcAL0HHGHo1oDBCR+1BD9o6dtzxKlxxy1BsIbAGgK9h9HbwXgY3Ab48+88PR2w7VPY1QldOsYWBos/aB0KOLxxhwccg5SDhJBzggWIpcAbgbc/2msOgDEIhiHo84HdCxZfyjSU1IWS+gDT5wOXC7q2Gw+1OlsOeM0hMNhT9kHwxEHviToiYPKBZYh1hEE3AMessLsnuvdI9KgjYvBGTP6Ezp3UOcHiB2uItfhiRltKawS9Dba1+loOw65DyT3HonovmPwJ61DI7g/Y/QGbL0w5SAg5qxgABlgIhmIJFtxh+KhN42RAOwQ6Pxg9YPGC0QdaP3N0KHXcnzJ5weoFox16NeFeK3t0EPq8YBsEi5c1+djjAzGDl7UMwbGBRJ8PDG7QO8HsA8sQGP0JnTthj4AjCJoBMHpZoy/eH4Uj/eED/eHjPui2J3sdcNQLhiEw+cE6xNqGorZAsG8oRDlICDlLMAEZACYZTwEL4TjYvcwHLcff22MyR8EN4AcYAvACeAA8AIMAPgA/gI0FKwtOOPGYAIAPYAjAD+BODd85yAzfMwTgZtJPlQR/+rY/BW4AF8AAgAPACdAP4Em/SiD9hJSDhJCzJJ2DLMOmGGAhkgBPCLRO9p3PtO/usb2+Xf/6x5o3tmne3K75247jW3YcxeX1T469vsf02ifH/7RD98Ynxr9u1/7tY+1b2zRbtx9965PDr2/b99bOo29uP/LGx4f/vtv4lw8P/W2H9m/bDX/bbnjrU/0bHx9/c7tm66fmLdvtr3/U98Yn5tc/1f5+2/7Xdx/9a/OxP3y0b8su058/1P1tm3nrNtPWj7Vbth//247jX5oclBBCvlRyJJIciSRPIsmTSHIkkgl5BRPyFZUzvqV3pvaZE++1O95pdWxpGdja7Hq7eeDd3Y73dtne22V7p9m2tcXxRqvjjdaBLS2urc2urc2ut3e73t3lenfXwNvNtq0ttq0tA1tbHFv39G3dY9m6x7J1Tx8+bOuevq2thq2t2q17TFub3Vt3+7Y2u7a2DGxtdm1tdm9tdr+92/32btc7u13v7hp4d7fj3V0D7+weeHu3i3KQEHJWjMjBnJy8nAlSVdX/sXpB64I2bbhZF28xQ4sJ2g3QqYdeLfTooMMArabhpc0IrSZoMUGrCdoN0G6ANiO0mKAVb81siyXZak62WJjhh5mZlr5Ia1+gpS/SaoJWI7ThYoB2/fDSoYcOA3QYWFzajdBq+vLsF4tdU0LI6WH2jb4nN0cikUhycvOLSipdQ2DxwlEHc6Cf7bAnO+xMbx9z0MwcNiUPmpO9fckea3K/JbnfkuztS3ZZkx12psPO9PRBrwV6+qCrD3os0NUHPX1MlzXZY0102RI9fUyXlemxJrrskR5bqMse6bEme/qYHmus1xrr7WP2W2C/Ob1YmP19iV4rPjLUZY9QDhJCBDM6ByUZOZibO2FCfok/Cg5/yuxhNK7EEU/8iCeudcUNAwlctK641hU3OOOmgbjeGde440c88SODCY0roXWmtE7QOkE7AFonaJ2s1pnSuhLjLlGtK6p3JvQDrH4A9AOgH8Dfimvc0eOD4eODwaOeIOUgIUQwJ+dg7sh/5+bm5uUnGBiKgT8O7jDrjCWd8bg3EveGk4NRxhVlPBHGG076w0l/OO6NxAejcWc87owlB6NJT4Txh2CMhfGHwB/MWELgDYMnwgxGwBMGTxi8IfCGwBMGTwQGI+CKgisKzhg4Y7RfTAgRTt5JUZg7vORIcnMlEokkJ0cikUhYgDgDSYA4C+FkPJKIx+PxSCLpYxgfw0bibDzGxGNMLJ6Mx5OxRDycTAZTyUgiGYsz8Rgbj7HxeDIeT8Zj6X9ySxROLDGIxdlInA0n2EgcInGIxSCGdyaYcIIJJtlgAoIJCCZZykFCiGAycjBXIpkgycmV5JzIwdwcSY5EwiIAFs+5Y4avSBMGCANACiAxPOVmeOEexv0TGIAkAAMw6jRm9lTxMeoBLAALDAtJFhj4Es0fFLe6hJAzMbIzmDPcHxy+K0eSmyNJ5xkAw0KKhSRAAiAFEYAoACQA4umrMiRH3TLAssCyKRYSLCRYNsWyOEMR2OH/xbJsKr2wwLDAsMCmgEkAkwImhfeknyEObByYFOUgIeSsGXXQJCcnh2Uz+mwZfTSMvuGuH3vy/z1FXy8dpmeKGfUkDHfOH+UgIeTcGZmD2YFykBBy7lAO8iJ2+QghAqAc5EXs8hFCBEA5yIvY5SOECIBykBexy0cIEQDlIC9il48QIgDKQV7ELh8hRACUg7yIXT5CiAAoB3kRu3yEEAFQDvIidvkIIQKgHORF7PIRQgRAOciL2OUjhAiAcpAXsctHCBEA5SAvYpePECIAykFexC4fIUQAlIO8iF0+QogAKAd5Ebt8hBABUA7yInb5CCECoBzkRezyEUIEQDnIi9jlI4QIgHKQF7HLRwgRAOUgL2KXjxAiAMpBXsQuHyFEAJSDvIhdPkKIACgHeRG7fIQQAVAO8iJ2+QghAqAc5EXs8hFCBEA5yIvY5SOECIBykBexy0cIEQDlIC9il48QIgDKQV7ELh8hRACUg7yIXT5CiAAoB3kRu3yEEAFQDvIidvkIIQKgHORF7PIRQgRAOciL2OUjhAiAcpAXsctHCBEA5SAvYpePECIAykFexC4fIUQAlIO8iF0+QogAKAd5Ebt8hBABUA7yInb5CCECoBzkRezyEUIEQDnIi9jlI4QIgHKQF7HLRwgRAOUgL2KXjxAiAMpBXsQuHyFEAJSDvIhdPkKIACgHeRG7fIQQAVAO8iJ2+QghAqAc5EXs8hFCBEA5yIvY5SOECIBykBexy0cIEQDlIC9il48QIgDKQV7ELh8hRACUg7yIXT5CiAAoB3kRu3yEEAFQDvIidvkIIQKgHORF7PIRQgRAOciL2OUjhAiAcpAXsctHCBEA5SAvYpePECIAykFexC4fIUQAlIO8iF0+QogAKAd5Ebt8hBABUA7yInb5CCECoBzkRezyEUIEQDnIi9jlI4QIgHKQF7HLRwgRAOUgL2KXjxAiAMpBXsQuHyFEAJSDvIhdPkKIACgHeRG7fIQQAVAO8iJ2+QghAqAc5EXs8hFCBEA5yIvY5SOECIBykBexy0cIEQDlIC9il48QIgDKQV7ELh8hRACUg7yIXT5CiAAoB3kRu3yEEAFQDvIidvkIIQKgHORF7PIRQgRAOciL2OUjhAiAcpAXsctHCBEA5SAvYpePECIAykFexC4fIUQAlIO8iF0+QogAKAd5Ebt8hBABUA7yInb5CCECoBzkRezyEUIEQDnIi9jlI4QIgHKQF7HLRwgRAOUgL2KXjxAiAMpBXsQuHyFEAJSDvIhdPkKIACgHeRG7fIQQAVAO8iJ2+QghAqAc5EXs8hFCBEA5yIvY5SOECIBykBexy0cIEQDlIC9il48QIgDKQV7ELh8hRACUg7yIXT5CiAAoB3kRu3yEEAFQDvIidvkIIQKgHORF7PIRQgRAOciL2OUjhAiAcpAXsctHCBEA5SAvYpePECIAykFexC4fIUQAlIO8iF0+QogAKAd5Ebt8hBABUA7yInb5CCECoBzkRezyEUIEQDnIi9jlI4QIgHKQF7HLRwgRAOUgL2KXjxAiAMpBXsQuHyFEAJSDvIhdPkKIACgHeRG7fIQQAVAO8iJ2+QghAqAc5EXs8hFCBEA5yIvY5SOECIBykBexy0cIEQDlIC9il48QIgDKQV7ELh8hRACUg7yIXT5CiAAoB3kRu3yEEAFQDvIidvkIIQKgHORF7PIRQgRAOciL2OUjhAiAcpAXsctHCBEA5SAvYpePECIAykFexC4fIUQAlIO8iF0+QogAKAd5Ebt8hBABUA7yInb5CCECoBzkRezyEUIEQDnIi9jlI4QIgHKQF7HLRwgRAOUgL2KXjxAiAMpBXsQuHyFEAJSDvIhdPkKIACgHeRG7fIQQAVAO8iJ2+QghAqAc5EXs8hFCBEA5yIvY5SOECIBykBexy0cIEQDlIC9il48QIgDKQV7ELh8hRACUg7yIXT5CiAAoB3kRu3yEEAFQDvIidvkIIQKgHORF7PIRQgRAOciL2OUjhAiAcpAXsctHCBEA5SAvYpePECIAykFexC4fIUQAlIO8iF0+QogAKAd5Ebt8hBABUA7yInb5CCECoBzkRezyEUIEQDnIi9jlI4QIgHKQF7HLRwgRAOUgL2KXjxAiAMpBXsQuHyFEAJSDvIhdPkKIACgHeRG7fIQQAVAO8iJ2+QghAqAc5EXs8hFCBEA5yIvY5SOECIBykBexy0cIEQDlIC9il48QIgDKQV7ELh8hRACUg7yIXT5CiAAoB3kRu3yEEAFQDvIidvkIIQKgHORF7PIRQgRAOciL2OUjhAiAcpAXsctHCBEA5SAvYpePECIAykFexC4fIUQAlIO8iF0+QogAKAd5Ebt8hBABUA7yInb5CCECoBzkRezyEUIEQDnIi9jlI4QIgHKQF7HLRwgRAOUgL2KXjxAiAMpBXsb5WNG5rCUh5IuhHORF7PIRQk4vLy8vNzd3nH4J5SAv43ysOTk5uRmwBjmEEDGcciWlHBQGv60UIUQ0lIOCOfNPPCcnB3uFhBARjbWGUg5+ceMH31gfOiEkq1AO8nImny+lISHiGn2QZMSKSTnIy1ife15e3qRJk4qKikpKShQKhVKpVBBCRFJSUiKVSvPz8/Py8k65wlIO8oKblNzcXO7TxBAsKSmRy+VyuXxEPVQqlVwuLy4uLi0tLSsrKy4uVqlUxcXF3CPxB5VKhcUTsCnI0xQZuSw/Gf4vSu2sVVpaKpfLZTJZeXm5QqEoLCzEYimVyuLi4srKSmxdKpWqrKxM2PZzSnK5HN8Ath+VSqVUKkc3e8Xp2lVpaWlRUVFpaSmuOCqVqqSkpKSkBH8rs33K5XL8u/D/VlRUSKVS/PmUr8u9T1z1Jk2aNGHCBFxJKQcFw/W6M3MwPz8/s3Ij6oFVnzhxIlfFsrKy8vJyLDCGI94pYDse8WaUGUY8BtufUK9LhKVUKouKiqqqqoqLi0tKSioqKlQqVWlpqVKplEqlMpkM01Amk2GsnLM3NjqnTvnmx/p1/BXc/GNgYaQqTm6rKpUK78esl0qlhYWF+DmUl5eP327x2YqKigoKCjLXWcpBAYzOwZycHKlUOlYOVlRUKBSKyspKqVTKFaa8vBzbcVFRUWVlZXl5uUwmww7j52mKp8GlHhd2mR1AVRr1B7Mcdpq4yCsuLi4uLlYqlVVVVQqFoqCgoKKigiv0OX5vXKP6Ar+IXcKKiorCwkK5XF5aWlpQUMDtV3EbadwAlJWV4QtVVVWVl5dLpVL8EMZ5Ca5rWVxcTDkoMG40MPMDHWunGOuN1S0rK8OtX2VlJW66y8vLy8rKMA0Vo3pwgsjchcEnx1bFxeJY8U2yBAaBUqksLS3FDlFxcTHuOuAuakVFBY6FYSfxHLylzK1p5qjO5yKVSqurq1Uq1aRJk6qrqxUKRXl5eXV1dVkarh2lpaXcmqJQKPBvLCwsLCsrwz7yWM+P7w2390qlUnLy5EHKQb5OmYPjRAl24HFwB7fkUqkUO4C4McSalZeXFxUVCdgfHB3NXJsYEY6UhtkMB84qKipkMhnGTeb+IEYk9q2w23gO3lJmO8FmM/5Q3Slhg5fJZJWVlXhPQUEBDoZmDtRww0oymQx/wCisrKzENBzr+TMzmnJQeCOOk3A5OFY9MPtwF0CpVJaVlVVUVPzhD3/44x//OHv27IKCAq4dK4Ter+GaFCouLpbJZKODb/TINMkeMpkMdxq+853vvPnmm5deeqlMJsPdC+wDKhQKHGPBfuK5eVeZaYU7np+3/eAoJ/76rbfe+uqrr/7lL395+eWXf//73//ud7/77W9/+8orr7zyyiu//e1vuZ9fffXVX//613jn+vXrxx8P5Zo0/pNyUGA56bOGzzAHcRuOBcMt9uTJk0OhUCwW8/l8L7/88iWXXIK/jkOEZ9oSTwfbQeYxOEV6J2vETjHeSb3C7ITbzgULFthsNgDYuHGjIt2QMAovvvji3bt3v/TSS9hFOtvvR54+XoxtBnddv0AO4nBnRUXF17/+dQBIpVKxWAxXsVQqlUqlTrn2MQyTTCYBIB6P33777eOPA8jTh3HkcnlOTg6NDwppRAKOzsERhx2wryeTyfD+kpKSKVOm9Pf3AwDDMKlUanBwcPPmzTNnzsT5NF+kbY7RCDDvVCpVdXX1tGnTpk2bNnXq1GlpU6dOnTx5Mh5/VJy8myzUeyD8KZXKpUuXBoNBAIhGo4888ohcLsfOVGFhYWVl5UUXXTQwMMCy7LPPPnsOjhfjZlWR3iWvrq7GwzWft/1w/cFvfetbGHyhUKi/v9/pdDocDqfTGQgE4vF4IpGIx+P4QzgcBoBUKjU0NAQAq1evxp3lU+L2dfAt5ebm0rwZIY1IQPzn+CXnWgY2oKlTp2IOJpPJVCrFMAwA2Gy2xx9/fPr06dxMAiyhTCbDgfCxnhwTFjOUG3bEHyorKzdu3Lh3797+/n6/3+/xePx+v8/nGxwc9Pl8Ho8Hf2hpafnZz37GDR1yPUQcmz+TNn02cNsSlUqFf6PijMfjMydeyDMG8nEWHk7CGOt3sY/Drc/c0QncmOHYvDx9cJMrE+6Z4qEwrli4EeIOa4zf3+dmjeDDysvL8T2vXbsWABiGwSj82c9+hj1B3AV+9NFHr7nmmgsuuOD48eMAsGzZsqKiourqapzPj/NRuNjCqVplZWXcUGPmXz16wEQxdroplcqNGzf29PS43W6Hw9HT07Np06bq6mqsFLcXwvUTx/qcS0pKLr300lgslkgk9u3bt2DBgiVLlixatOhXv/pVMplkWRbXkUQigf/ErgOuNatWrcrc1xn9/Nz9OD44AuUgL0LlIMMwiUQCt3KJRAIAYrGYzWZ76KGHpkyZgisMHkUZf/A7c8XD1bWsrKywsPCSSy7p7u7GpwWAVCqVTCYxcznRaBR/iMfjBw4cuPDCC+VyeUFBQVlZGa7YXDsTBc6sxHFxZXoCxOg1FnG/NeLzqaio4EJBqVRiyox+WObniXuXDz/8cCwWS6VSkUjk3nvvxXdSWFiIaSiVSv/0pz/hRwcALMs+88wzMpls06ZNuOOWTCaXLl2KHyDuOeKxjrFeF7MJj6cpFIqioqLi4uLnnnsOAAKBAABgJ2jTpk3YnMrLy+fOnQsAdrt9+vTp8+bNC4fDVqt1ypQp+GlgETMTHzdvmOwlJSV4vGX82VSZHym3gbzkkksOHTqUufeKIdXZ2XnZZZfh5Afu8WPlIL4xpVL5ve99D5vo/v37Fy1aNGfOnAcffDCVSkWj0Ugkgp8tPj/2DWOxWDKZjMViq1at4trG6OenHDy7hMpBlmXj8TjWOxAIhMNhXKMAQK/Xb9y4sbq6urCwcPLkybgOj/PkmIPcFMXCwsKqqirsIHBJx62cABCJRLixGJZlWZbFBm0ymTZs2LB+/fp169Y9+OCDDzzwwKZNmx4SyQMPPPDQQw/dddddy5YtW7Zs2dKlS5eN66677rrrrruWnOzOO++8/vrrq6urKysrVSpVUVERZs344w+VlZXf+MY3rFarzWa76KKLPB6Py+WaP38+Jlp1dfWkSZMqKiq2b98eiUReeOEFfDa5XD5r1iybzWY2m7/5zW9ardZgMHjjjTdigkul0vHneXB9qJkzZ95+++0/+tGP/vrXv2I30O/3x2Ix7A8+/PDDSqXyW9/61sKFC0tLS2+77TYA2Llzp1Qq/cc//sGyLEa2MmM6Ib4BzOKysjJMWJVKdeGFF77++utdXV3d3d09PT37Ttaboaenp6ura+/evW1tbXv27HG5XACQSCQYhsGo4jaxWq22vLy8tLQUZ9QqTz5YMeLvxc/zsssuC4VCALB79+4rr7xy48aNDMNwnQMcScdOA5eAuFFftWqVYuyzVigHzy4B+4OBQCASieB2NZlMRiIRzER8Ia1W+5Of/CQ/Px93csd6cmxMeCCY2xV65plnWJbFdoNNh5NIJLg9C2xeuOHF1ezZZ5+94oorrrnmmjlz5txXJHceOON8+bNk8lkhYWFUqm0oKAAR9Zlp1N8sssuu+xHP/oRbiSqqqqwPzhOFxvX4QcffBAAdu3apVQqP/74Y5Zln376aW7qb3V19YUXXoiDG0uWLJHL5ZiwTz31VCAQaG9vLyoq2rFjRyAQ+OUvf4nPieE7fj8UC63VanEDCQCBQCAajcbj8WAwGAwGWZb9r//6L5VK9b//+78A0NjYqFQq33rrLQC46qqrrr/++lgs9uabb2IEYN95xOAvdksVCsXs2bObm5v379/f3t7e3t6+d+/ejo6Ojo6OvXv37t27F+/htLe3t7S07Ny5c8eOHe3t7QDAxR+2rng8HgqFcPzu8ccfxy6zQqEoKioaKwe5E0kvv/zySCTCsuxnn32mVquHhoZisRjmYDAYjEQiyWQSnxxbbzgcxhdauXIlfqSUgyIQcHwwFAqFQqFgMBgIBPCHSCTi8/mSyeTg4CD23TQazcqVK8d5cq4d4HQKHH7GY4uBQACbFDYgr9cLAMFgMBaLYeAGg8FQKBSNRvFoXSQS0Wg011133fXXX3/FFVdcffXV8+bNEysH586dO3/+/IKCgsLCwuLi4qKioqKiosLCwqIxSDNkxqJCoZg1a9YNN9yAO4PK0810wzHZP/zhDwDwz3/+Uy6X//GPf0wmk++++y5295xO54IFCjV/jI4uLi3/zmNwDw9ttvK5XKV155BQDef//9/Px8btbU+PM8ZDLZ1KlTvV4vy7KDg4ODg4PhcNjn80Wj0XA4bLfbAeDRRx9VqVQLFiywWq1er7e0tHTBggUAsGHDhrKyMgDo7OzE3h82DO5YGQ40czP2X3/9dY1G09LS0tnZ2dnZmRmCqCNDe3t7c3PzJ5988tFHH2EwsSwbDoexs4ZYlvX5fAzDaLValUqVk5NTWVk5zn4xjpxKpdKrrroKBx90Ot2RI0dYlsUo9Pv9eEgkEomEw2HsJeD2wOPxAMC999471mCIgnLwbBMqB2Ox2NDQEG7cMAExFhOJBPYC/H6/3W5nGGbfvn3jP79UKsX9Pu6YSSgUwkiNx+PRaBTXpWg06na7sevn8/nwtfCF/H7/4OAgAAwMDFx99dVXX331TTfdNGfOnJvEM2/evAULFuB4HK7MMplsRMZlyszBzHyUSCTV1dU333xzSUkJDuSPP86AB0n+85//JJPJLVu2qFSql156CQDa2tpmzZrldDo9Hs/111//2muvAUBHR0d5eXlnZ2c8Hn/22Wd37NiRSCTee+89hULxyiuvJBKJnTt34sETHOscpx+K6+3XvvY1u92O20W3240Hsvx+v8PhwJX/pz/9KR7oePfddxmGqa6uvuaaaxKJxC9/+Uu5XB6Px48ePYohiH9mSfoqBlVVVTjxGCckdnV1dXZ2dnd3427vCCPu7Orqam1t/fTTT7dt2xYMBuPxuNfr9fl8uHENhUKBQMDv93P5hfMQsJs8zn4xftSXXXZZIpHA5goAg4ODwWAQg8/r9SYSCb/fj/8cGhoaGhri9pmWL19O44OiESoH4/E4NnE8hhsIBLxeLzavgYEBr9eLQ3idnZ2zZ88eZ73FcR9s95iDU6dOxfgLhULYrRgaGsKjw/gqHo/H6/X6/X6v1zs4OOj1eoPBIDayUCh00003ff/737/hhhvmzZt3ww03iJWDixYtWrBgAeZafn4+dgnxaPgpjRWLeOThtttuw71C7uDAWJ8nHknYsWMHAPz973+vrKzEXl5HRwd2FXEmPHfQoLi4GDNx7969//73vwHg7bfflsvl2KPs7e1VpPt6eLLEWK+LbWPKlCnYJAYGBgYHB91uN/48NDTkdrtTqdSTTz6pVCrvuuuucDis1WrLysqWL18ejUabmpqmT5+eSCR2796Nx4VxV12RvooBvmGlUomHaw4ePNjb24vjgPtOZf/+/dzP3d3d7e3tO3fu3LZtG7ftjEajOLsFpyJg7xXDa+bMmQUFBfhJjtMA7GkAABptSURBVJODeEz829/+NrZVv9/vdrsDgQDXSnEFCQQC+IPH4wmFQi6Xy+/3A8B9992noPFBsQiVg+Fw2O12YyThLW78BwYGcP/C7/c/8cQT06dP5y7QcErc/ESciIB7kQ6HI5FI4PPj6uT1ep1OJ74Kvpzb7cbeDf4vl8sViUQOHz583XXXzZkz5/vf//7ixYvnzZu3SDzz58/HzMLL+eBA4VhOuYOMlye59NJL586di7GVeXh9rDxSKpWvvvoqy7Jbt26Vy+WvvvoqAGzZsgV3bJVKJe7kKtPnKb722mupVKqlpQWPIL/11lsqlQr3i994442KigpuyvH4x0mUSuWMGTM8Hk8gEHC5XBaLBWs0MDDgdDr7+voAYNOmTQqF4uGHH3Y6nT/4wQ+Kiop27twJALNmzVq0aBEA/O53v+NOLMF9T8xBbCfcEeStW7cePXr04MGDBw4cOHjw4KFDhw4fPnzo0KFDhw7hnfgD2r9/f2dn5+7du7dv344HSfr7+z0eDx5B8vv9eNvX1xeNRs1m8+iD+6P/XuyZlpSUXHXVVclk0u12Y9a7XC7cNrvdbpzdhWsEbtGDweC+ffuMRmMikairq6PxQdF8gRzEapWXl+PF42bMmIG7OYFAwOl09vf3+3w+l8tltVpdLhcOC/71r3+dPXu2In3ZpXHOl8LLdWQ2haqqqkceeQQAjEajy+XCWaler9fhcPT39/f39+N61d/f73A4cOfLbrdbLBYA+PWvfz1nzpzrrrvu5ptvXrhw4YIFC24WyeLFixcvXow7wvn5+XioZJwcHDE+yK2El19++dKlS6urqydMmDBlyhQ8jjlO/xp71q+88grLsm1tbWVlZe+//z4APPcr+NK+Pvf/x4fjB3D3bt3q1SqDz/8EABefPFFrH7mVL6xXreoqGjy5Ml4IAJXUa/Xa7VasWo6nQ7SOVhWVvb1r39dqVQ+9thjDMNs2bJFLpdv376dZdmbb765qqqKm/zE7R3jz/L0pMhZs2YdPXpUq9ViAh45cuRo2pEjR44cOZJ558GDB3t6evBoydGjR+Px+MDAQH9/v91u59qVw+Ewm80A8Mwzz3DXgBin/ytPz+v8zne+E4/HA4HAwMAAtkaXy+V0OnErjsmIzTUajX766adLly41Go0AgPMHuXmXI56ccvDs+rw5qEyfPoxdtoqKisrKSqfTyTCMRqPBjZ7FYnE6nTg+0tzcvHjxYowzfAYc1Rrr+XFfGIdacOM/ceLE6urqnp4eALBarX19fXa7XaPR9Kf19fXhndY0s9mcSqUsFktTU9PatWtxzsrPf/7zxx577HGRbNq06dFHH12yZMndd9+9bNmyu+++G+fQLB0XN3vmzjvvvOOOO26//fYrr7xy2rRpeH0zlUqFV6kap0uImXXRRRe5XC6DwXDBBRfgmrlw4cJZs2bp9fpAIHDjjTf+6le/AoA9e/YUFRUdPHiQYZglS5Z84xvfMJvNFovl4osvttvtg4ODxTuceqIu9tFRUUzZ86cP3/+rbfe2tTUhEfPjh071tfXh0Hw85//nHvzc+fOTSaT+/btKykpWbJkSSqV6u7urqqqwnTA/V9uf5zrwMrTV7385je/+dZbb2m1Wq1Wq9Pp9BnwnwaDwWAw6HS648ePHz58eN++fT09Pbt27cLD2dhdtVgsNpsNZwvF43G9Xo87JdjxlEql4/y9CoVCpVJ997vfDYfDAwMDeAwKTynBXrDD4XA4HJiP0Wi0ra1t3rx5t912G+7urF69Wp5x1cJMlINn3efNQe7wBdcNmTx5Mnb7XS6XzWYzGo1WqxUArFZrU1MTdyayMn3y/GnPt+P29fBoIB6dvOiiizo6OgAgHA67XC63242tFlsYbmPtdrvT6cRZC4cOHbrwwgu5a3iUpC94N87rnlWlpaU4XVmZPpOk5HSXulNmUKRnVk6dOhWv3ImbIm767lhPwu3KXXnllVhxhmHuuOMOuVx+8cUXezwep9N50003lZaWfvDBB1yreP755wsLC0tLS6+99lqcrsQwzK233oqjk8r0WTrj9ENxFx6H9hTpyyvccssteNAAswkAHnzwwcrKSpzRXVZWdt9991VWVs6dO9fv9zMMM2/ePJweiO0HYxe3kRiCUqkUcwq3x5hWJSdfgY17q6M/TGxmF110EU7RDwaDg4ODVqs1EAgwDHP48OFrr72W+4vGnyeEbbuiomL27NnJZLK/vx/3S+x2O+6vOBwOu92OnU273d7S0nLnnXdefvnlK1as0Ol0LMuuXLmSm/J9yjpSDp5FX2x8kLuCpkwmmzlzpsViCQQCGo0GJ7iEw+GXXnpp5syZ3Fx8HMxSpNft8a8vhJmF3Ry8eBGub0ql8sc//nFLS4vNZnM4HC6XKxQK2Ww2n8/n9Xqxw+L1ej/55JOHHnoIr96BY3D4Prmre4qC+wQUJ58wP87jR5wagXAPEUcPFOnLPZ32uBPO5pswYQI3FIizDqVSKW5m8JwwbvIH3oNhgRfU476GAUfrcCxsnL8XXxH/Rnwq7NBdccUVOBzW29sLAL/4xS8wLktLS3FS5Lx583DuTmNjo0wm49JNfvJF87nxQaVSWVlZOWHCBNzGcP1EnHHFnU9ScjLuk8dd7OnTpz/88MN79+612+0+n+/gwYPPPfccjuHK5XIczx3/JEiuKDh/0O129/X1WSwWq9Vqt9ttNhvusvT391sslmPHji1btmz+/Pl44h3ugC9btozGB0XzeXMw8yRTXAOnTZuGxcbpoP/617+uvfZa3GvGK1NiK8HdGbzg2plcR4SbHIcpVpK+7nlRUdG0adNmzJiBp1VceOGFVVVVFRUVU6dOnTJlCq5y2GPFlZzrEWSe03buYdDgBkA+9mlzHO5/jRibz8wCzCbl6c4vxkTAPdnJkycXFhbi7iRuG/AB2JeZNGkSzonBz41bLfHYDj4Jnu2rTJ8DPk4FM8fU8IDv5MmTlUrl5ZdffuDAAZxY99hjj+FbKi8vz83NLS8vnz179r/+9S+1Wo3NRpk+hQODlTuvWZm+5L1MJisoKMBzN0d0AzM/wMwT7DLvx2QvKCjASekXXHDBzJkzJ0yYwA2DcmfXTJo0afzmim/su9/9LsMw2OG1WCw6nc5gMOj1eq1WazAYTCaTRqPZt2/fnj172tra2tvb29rajhw5EovF1q1bN06roBw8u77AfnHmzH7c3cNT6Hp7e++44w7cLGN3gxtgxtaG+9Q4tjXW8yvTe9y4uqrSl+3EviGuuvgDN5+Wm27NvSK+Q+wS4svl5+dzFz0WRea055KMq3KOhVsf8J/ch6NMX2UABxy4yw2M9XniAxTpDqk8ox/EhR0+g1KpxKnCuA3D/r48vfpx10/mNoEYHGO9Ll5rHs88kaav1IvHZEpKSqZMmdLa2goA69atk8lkeLYlvgoe+cEvbMocyuDeCf6AZZWlrzTBfbBjbYdGfLzcJKHMpBsxu1OhUOAEJnxdbr9knL9XLpdfcsklOA8GAEKhEHcKPF5VAaMK78TT7/CfiURi0aJFo0MwM7UpB8+iLzY+KE+f+o6r0zvvvPPwww/j7tLUqVO51UOePjWdu6ybIj2+M9bzc2Pw2DHBky64qVvYJcnPz8cvA8B2jwdVcbWRSqX4ivn5+ZiYiowrO8gzOmLnmCIj4hUn7+qeEpfpI3IQr77DDS+WZHw90CkplUqMIe40ZK5bijuquN3CAOJ2Nrlf5DYwyvTwHI70KdPfNDTW62JO4TRJhUKB71mpVOI7Lysrq66uvv/++2fMmIFf86BIH7zGvwtPKsf3w/VecYOH/+SesKCggNvMZJ7fkvm5KU6++L4qA/eceDBEmT6XSZm+PBJXr/GPk8hksilTpuCm95ZbbnniiScef/zxF1988b//+783b978zDPPPP3000899dRTTz21efPmZ5999sknn9y8efPTTz/92GOPPf/887W1tVhx5agcVGakP3cn5aDAPm8OcjtT0vSZ5yXpS31wezHKjB03boSba6bjjzdzRwNl6WtNV1dX46YbGyX+Oq6TXM4q06OK8nT3k1tRcSdOkdGHEgU3rKbM6JuM8zmMjlH8FQwvruPDHTAd63lwI4STb7BMXEDgm8ECcfXK7LriNo/LXGV6y3cmB3m4cUnuHln6VGhV+qJhyvTFdLlDH5lTBblPCavJhS++NI7JcI+Xp2cXnEktRvS7sYXgdoJrS9z2G//vaRsPt73hetb4VpUZewDKjEM0ivQQE/6MvfLRqwbl4DmS+TniDxMnThwx7jOifqKQf05ivU/y5SJsu8rcdHHHasaR2TPlIu+UuMNWGMp4MeoRX6dBOfjFcfHH/ZCXl4cb2xGFwdIK1gAFQjlIss2Ijvz4j+HuOW27laenakul0lN+nQbl4Bc3OgdzcnImTZrE7fjIMwaVRewPEvJlkZmDZ7idPpPtNz4hHrsfsc5SDvI14luvUG5uLnfRY7xmOjfIfTbbDyFfVjx3RE7765khyK2ztF8smNEhyH2sEydO5A6/Zu3OpnIMYr8v8tUyVjv8vMZ6fjyynxmCOTk51B8UzFg5OOKzxu8JHPEVWYSQcyM3N3f0V0tmohzkZayPdcKECXl5eafcaxZFzhjEfl/ky22sdvV529s5a5ljPTnlIC+SdF/vtB89hQ4hYsH+IK6qORlTO7gHUA7yIlJZCSECyJxICOkz9kZ8n62IKAcJIecIdgwh/U222YNykBBy1k2cOJEb1OJWau4L6UX3pcnBzztOTAjJHpmZiJe0ETtRTvKlyUGWEPKlJXZ+nMaXJgcJIV9eiUQC0xD3hWl8kBDyFZW5O8xm097xlyMHs71XTcipMQBJFpIAGes/AAsMO7JVM+d3K8fIy9xBzp4QhGzMQTZjSd+RGm46uHD/i6GFluxekiyEUhBiIQbAYKtOAZOEZGq4VWNbZoBNAou/cj7DHMy2nWL4suQgeyIHM+46qcEB3dJttt2ykExBJAURFpLD9zGQAuByMHUiB5nzOwe57MNvSUsmk/hlQVki23KQAYgBxAASAAk4eYdiGJuOPhYAGBYgSQstWbkMxxy2WC75MvaLT2zuR+0nn3/wa54AgEtAmj84FgYgceoo5FrNiV4gw+Vgim7pNvtuU3ByAqZObL8hY5znRBSev0ZMncmeBETZloOZu8UnAm94jHC4JbHAJE4sbIJlU8Cm6JZus+0W2FRGo00BG89cWIizEGcgxWQMfrPs+TlVFgDw60AzD49kTxpmVw6yJ46KpMdNgBnuEnL7wiyc3FVMjzHTLd1m3S2TMZadYCEEEAGWAQaATXLNOHVSmz//pVIpNstmVmdtDjLscCtJACSATdbXra2vbVLXNa2pb6hprFm1tmZVY0NN/Vq1Wl2vrq2vo1u6zbpbtbphjbqppr5pVWPDqrU1K5vuq2lc3bhm/dqajY21TfgwdX3Nmnp1TUNDnbpBrW5Qn6fq6+vr6upqa2sbGxu5YybZk4bZlYNwIgeTGUOECQBGXbe2Tt1UU7925dqaezfctfzHdy67/57lG1auWHfPqqa7VzXRLd1m3e3Kdffcu27l8g33Lb//7mUb71y28bZ719+trr1/7eqH6mvvr69b21hXW6+uqWmorWlQ19XXqtW1YufVWVRfX19bW1tfXy92xpxCNuYgCwCQHN7zZfHIG9Q3rF+hbjhm0/b2d/T6PuwI/KMt8J8W77Z23/a9vu17vTvolm6z8Lbd+1FP+OOOoX+3D/1zz9A/Ot27dGarUeMx6AYMeotFpzMaNBqTTmPSGYwao0FjMOgM5y8MRJEj5lSyOQeTw0eHWQCA+2rUK9fVdds6l/9i4e1PfX3RU/LFL15w8wsXLHxm+sLNM2ihJQuXH2yevvCpyttemDrv8ZKbn6384Qszbn/iys7jHVaLV6+3GQwmi05n1g/noNGgMes1RspBMWRtDmbMumKABVjTtOHudSsOBloWP/K1h7Zf8tM9leuaKxuay9e1VdJCS3Yu61srNzSXP9BataG57Cd7pzV9NnPh5tKjg20arV5vNBgMOov+uFmv0ZgMGpPJaNBZdDqjXuysOpsoB89URn+QyczB2nX339GwdK/3P4ufqv5Za/XG3ryaVknD/py6HgkttGTnou6WbNiXt7pZ0tgpqW2T1LbLbnoh/5Bnl1av05p0BqMGc/CY2XTMbDLqDZSDYsmuHGSBSQGTggQMzzAY3i9mAVbWr122/t7OoW23Plu9YWdxY4dkTZekpjfd5rrplm6z77ZbUtMuWdUqWXdoUm13Xl2vfNFvi3sGPjMYrVqjyWDQWXXDOXjUbDHqTWa9gXJQFNmWg5ACJjk80yo03CVkgQVY3di0dN3yDv9Htz4/+aGO8rXdkrWHJq7okNSmGxwttGTfklPXnbfusHRll+S+Tsl9XQXXvzShd2C3wdCvNVoMBgPm4FGz5Yi5z2AwmXUmykFRZF0O4uFhFo8XD/cHkwDJ2rUN92y4p9P/0S1PVt3frFrdLFnTmd9wUFHXnafultBCSzYuXTlrOvIa9uff0y5Zsz9n9YHCOS/nHvK0aY9b9YYTOXjEYjlksekNfWadxag3iR1WZxHl4Blh0+dmsnii8XAOMgDMqtr61T+p6fTtuPmpyRtbKn5yqGDlngl13VJ1F+UgLdm6dOWs7Z5Y0y6p681VHyq4t3vSdb+S7Hc3m4w2g8FkNOgseo1Rbzhqsh0xO/QGy/ndGTRQDp659HGS2PD4YHqprd2wqqmu3b1j8dMz1u8pb+ySNHbkNXTmNXSJ3dZpoWWMpaFL0tSR09SR19A5sa5buqqzZO6v83tcn+iNBpwlY9YbDPo+jcGpMTj0Ro3BeJTmD4oiG3MQAAAiAJHMK83UrdmwqmlNu3vHLc9MW9da2tAtaeqUNHbmUA7SkrVLQ5dkXYdk3d6cxo6J6i7pqk7F3JcLu9zb9UaN2XDcoj9u1Jv0eptW79YaHHrTcYPpoMGoETusziLKwTPFDncI8bw6vDRFEiBZV1e3av297Z4Pbn62uqlNXtcraeiSNHTmqLty0gPSdEu32XWr7pY0dkkauyTqbkldz6RVXcVzfjOxc/BjrQlzUGPWmQx6m14/oDXY9KbjBtNhykFRZFkOslwO4oUImfQPiTr16lXrl7d531v0XGVjW2ltr0TdlaPuylN35dBCS5Yu3ZiAkroeyZreCSu6iuf8Or9zcLvWpDPrdRadzqwzGfR9er1Db+gzGI/TfrFYsiwHT+oPJtL3YX9wzcoNy1u9Hyx8blpDW1VNT15t98S6rokNnTkNXRJaaMnCRd0tqe2R1PRKanpy1vTkr+hSzH1Z1uneqTWajHqTRYcTZUwGfZ/eYDEYNQbjccpBUWRfDg4PESZO5CALAEytum7lhnswB9VtU2t6JtZ2T6zrzqMcpCVrF3W3pKZXsro3p6YnZ01P4aqOsrn/UzKcg7o+i9YyPHFab9EbTAajxmCk6yyIIwtzkMm46Fb66x0AatV1Kzcsb/X+e+Fz0xpap9b05NWmT12ihZbsXOq6Jat7Jat7JbU9EnV3/pq9ZTf+T0mXe7vWaDDqLWadxaw3cBdW0Bt1euP5HIIGysEzxrCQZIe/oiSBZ5Kkc3DNyvuXtHn/uejZKY17pg9Pn+45cQITLbRk24I7xbU9koYuydrO/Lq28pt+VdLj/khrOm4wmMw6i1mv464xozeY9IbzeRK1gXLwzKX7g3jZfW4aTbKhcfW9TYu7gu/+8Pmp65tnrO+WNbRL1qe3urTQkp1Lw75Jq1sk93dM/HFb8bqWqQufLzng/VBrOWAwaox6g1mvychBi95gMZynUWg0GjUaTUNDw5o1a4bX9JO/q0RcWZiDwH0nSca3lCRq1ctXNP1wv+/9RY9Me+DT7z3Q+vX7d5Zu2Clf11y+dk95U0sl3dJttt02tVSu21P1UMeMn+6q2rTra/dv++b/2zz9iGfHcdM+g0lvNBpNRq3FoDUZtSaD0WjoMxj7jEaz8TxlMBjq6uqampqy5+uZOFmXg8PS302c/ta6xLp1tTVrl+wb2LX0F3NveeKS+Y9X3PHC1Dt+Wb34mcpbnqlevHkK3dJtFt7Of0px64vVP3hE+v+eqLh180XLnryux7DLaNZpdSad1qTX6vS6Y0btMb1Oo9MZtDqD7jyl0WhMJtOaNWtqamoAIHt6gigrczB9Lh1ehgtnEdasuKehqeaI7UBHf2ubZ2dXZGdv4D8t9rd6fO93+/5DCy1ZuHT6328f+ldX6L1DwX8fHPpPi+v9PdbthgGt2dxnMNgNBrvRaDYZ9RaD1mTUG41Gg0nM/tpZZTKZzGZzfX19Q0MDhmA0GhU7aE7IvhzMOKc4nYMALKxXr6+tqV/d2LS8UX3Xj+uXb6y9q35p7f0rV669mxZasnO5r+nuu398z7KmpSsal63ecO/Sdfes2li/uqa2rqaxtnZDbe2GutpGdW1dQ+0add3qWvWaWvWauvNUTU2NWq1esWJFY2Mjy7LZtmv8JchBPGRct6KuSb1+jXr9qsYf37fugbvWNNY3rGtqXFdf30gLLdm5qOsbVzbU165du2rF6qbGDSsbm1Y0rK2vW9uwprFO3bRG3aSuW1tf19BYp65X19bV165pOG+/r66urq6pqYk7TsKybCKROF0WnDtZnYOpjByEFEA0AekTj6NMEtgEE/EDm2DZFC20ZOmCAzvxJCQhxUCcSQEkgI2xkExxDT59seHs6iMJjWXZeDwOAFwCZs8oYfblILabUf1BYBiIxwEYBlIpAAYSwMaAjaRn2DB0S7dZeZtMxcKQZCCWYlmWBQbYKLBhBuJJSDD4VeYMAAMMCwwL7HkKI48LPu6r3LNEFuYgAAA3b5DNvOekO5mM1oYfLt3SbRbeMgBMZuvl2i07/BgivmzNQUIIOVcoBwkhX3WUg4SQrzrKQULIVx3lICHkq45ykBDyVUc5SAj5qqMcJIR81VEOEkK+6igHCSFfdZSDhJCvOspBQshXHeUgIeSrjnKQEPJV9/8BRSDa0hUTrqEAAAAASUVORK5CYII=" />
下面选取其中的代码片断讲解其核心原理：
function&onprogress()&&&&&&&&&{&&&&&&&&&&&&&//获得buffered数据&&&&&&&&&&&&&var&ranges&=&[];&&&&&&&&&&&&&for(var&i&=&0;&i&&;&i&++)&&&&&&&&&&&&&{&&&&&&&&&&&&&&&&&ranges.push([&&&&&&&&&&&&&&&&&&&&&media.buffered.start(i),&&&&&&&&&&&&&&&&&&&&&media.buffered.end(i)&&&&&&&&&&&&&&&&&&&&&]);&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&&&&&&&&&&//获得在容器中的当前进度&&&&&&&&&&&&&var&spans&=&progress.getElementsByTagName('span');&&&&&&&&&&&&&&&&&&&&&&&&&&//如果还没有加载完毕则继续加载&&&&&&&&&&&&&while(spans.length&&)&&&&&&&&&&&&&{&&&&&&&&&&&&&&&&&progress.appendChild(document.createElement('span'));&&&&&&&&&&&&&}&&&&&&&&&&&&&while(spans.length&&media.buffered.length)&&&&&&&&&&&&&{&&&&&&&&&&&&&&&&&progress.removeChild(progress.lastChild);&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&for(var&i&=&0;&i&&;&i&++)&&&&&&&&&&&&&{&&&&&&&&&&&&&&&&&spans[i].style.left&=&Math.round&&&&&&&&&&&&&&&&&(&&&&&&&&&&&&&&&&&&&&&(100&/&media.duration)&&&&&&&&&&&&&&&&&&*&&&&&&&&&&&&&&&&&&&&&&ranges[i][0]&&&&&&&&&&&&&&&&&)&&&&&&&&&&&&&&&&&&+&'%';&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&spans[i].style.width&=&Math.round&&&&&&&&&&&&&&&&&(&&&&&&&&&&&&&&&&&&&&&(100&/&media.duration)&&&&&&&&&&&&&&&&&&*&&&&&&&&&&&&&&&&&&&&&&(ranges[i][1]&-&ranges[i][0])&&&&&&&&&&&&&&&&&)&&&&&&&&&&&&&&&&&&+&'%';&&&&&&&&&&&&&}&&&&&&&&&}&
在上面的代码段中，使用的是设置&span&的宽度去代表进度条的每一个格的宽度，首先获得buffered数据，存放到数据ranges中，然后判断媒体文件是否加载完毕，如果还没加载完毕，则继续往DOM中添加&span&标签，而这个span标签的宽度和样式则是通过上面的代码按百分比计算出来。
最后，用户可以通过的例子，学习到本文中提到的在媒体加载前、加载中和加载后浏览器的相关事件，在这个例子中会输出相关的日志。
【编辑推荐】
【责任编辑： TEL：（010）】
关于的更多文章
这是一本介绍如何使用HTML5和JavaScript进行Android游戏开发的书
网友评论TOP5
再过一次生日，我就满七十岁了。而且正如大家印象中一样，像我这个年纪的...
讲师： 0人学习过讲师： 28人学习过讲师： 50人学习过
十一归来，貌似大家都没有什么劲头。本周五，为期两天
《待字闺中：编程面试题集》集合最新最全的面试经验和
这周Windows8.1正式版发布了，不知道各位有没有去更新
本书使用通俗易懂的语言，通过大量的实例，从实际应用的角度出发，全面系统地介绍了网络服务操作系统平台、电子邮件系统、Web站
51CTO旗下网站}
我要回帖
更多关于 css3 动画播放一次 的文章
更多推荐
- ·求《相见欢阿yueyue歌词》这首歌以及歌词,邮箱zrw14kzl@163.com,谢谢
- ·乔太守的风水书画作品吕守约的画值多少钱钱能买到？
- ·求一本小说，找到必有重谢与定有酬谢
- ·求告知，2024小武当山风景区景区内播放的是什么音乐？
- ·找自己写了一篇小说想找出版社发表？
- ·热血篮球 电视剧时寅俊的篮球鞋是什么
- ·清江广场金吉鸟健身卡所健身卡一年多少钱
- ·格温拜克是德国原装进口炒锅的吗?
- ·求五人制足球教学视频裁判的教学视频
- ·2000年悉尼奥运会邮票纪念币纪念币一套价值多少了！
- ·如何关闭10vs10万中的IntelliSense
- ·清江健身所金仕堡健身卡多少钱一年多少钱
- ·八个人一组，跪求有内涵的组名和小组口号霸气押韵
- ·怎么举报广西省百色市靖西县靖西县新靖镇政府
- ·意尔康运动鞋专卖店皮革是什么料子的?
- ·国家级裁判员查询游泳裁判员英语考试复习提纲
- ·团队拓展训练，不知道该去哪里好去哪里是比较有意思的
- ·如果传球以我强调他不同于其他闲列该太闲了怎么办办
- ·棒球投球速度的投球手有什么保护措施？投球手好像连头盔都不戴，那万一被击球手打出来的球击中不是很危险吗
- ·求炎の孕ませおっぱい炎孕身体测定2下载 CG 图包
- ·怎么检测音频是否css3 播放器按钮完毕css3
- ·求高达seed 网盘，seed destiny重制版，网盘最好，清晰度越高越好。
- ·想安装ps cc,但c盘host里host那个文件是空白的,安装破解步骤一样么?
- ·微软surface pro4book和pro4的区别
- ·在qt语音打字员上怎么工作啊?，就是打字员，求各位帮忙。
- ·请问zsun苹果盒盘怎样在使用过程中连接4G网络？
- ·求眉如黛的桃花入命 眉如黛，txt的
- ·lim4x/(e^2x-1)求极限，x到零
- ·其他harkar nc评测-BT怎么样？其他harkar nc评测-BT好吗
- ·跪求阎连科 四书 txt的耙楼天歌txt.
- ·谁知1030世佳捕鱼器有限公司中不中？谁用过给个答。谢！
- ·ppt自定义项目符号的项目符号设置好后怎么用不了，预览的时候还可以的。添加后就变成了下一个的图样。
- ·信访维稳形势研判会商研判例会内容，求几个点就可以
- ·用友u8销售成本结转软件U8.10.1怎样结转如成成本
- ·这个怎么做？？感激不尽！！ps:要应用题的解题步骤过程
- ·助理医师怎么变更证变更:我的证本来在a医院，因为工作调动现在要变更在b医院，现在资料正在a医院所在地区审核
