本文转自：新华网00:0000:00详情收起00:0000:00// 音频播放var a...|看西部、探新奇、品美食......第四届西洽会等你来打卡本文转自：新华网00:0000:00详情

本文转自：新华网00:0000:00详情收起00:0000:00//音频播放varaudioPlayer=document.querySelector('.audio-box');//varplayPause=audioPlayer.querySelector('#playPause');varplaypauseBtn=audioPlayer.querySelector('.audio-bottom-control-play');varplaypauseBtnSmall=audioPlayer.querySelector('.audio-left');//varloading=audioPlayer.querySelector('.loading');varprogress=audioPlayer.querySelector('.progress');varprogressSmall=audioPlayer.querySelector('.progresssmall');varsliders=audioPlayer.querySelectorAll('.slider');varvolumeBtn=audioPlayer.querySelector('.volume-btn');varvolumeControls=audioPlayer.querySelector('.volume-controls');varvolumeProgress=volumeControls.querySelector('.slider.progress');varplayer=audioPlayer.querySelector('#audio-resource');varcurrentTime=audioPlayer.querySelector('.audio-bottom-time-now');varcurrentTimeSmall=audioPlayer.querySelector('.audio-time-now');vartotalTime=audioPlayer.querySelector('.audio-bottom-time-all');vartotalTimeSmall=audioPlayer.querySelector('.audio-time-all');varrefreshbtn=audioPlayer.querySelector('.audio-bottom-control-refresh');//varspeaker=audioPlayer.querySelector('#speaker');vardraggableClasses=['pin'];varcurrentlyDragged=null;window.addEventListener('mousedown',function(event){if(!isDraggable(event.target))returnfalse;currentlyDragged=event.target;varhandleMethod=currentlyDragged.dataset.method;this.addEventListener('mousemove',window[handleMethod],false);window.addEventListener('mouseup',function(){currentlyDragged=false;window.removeEventListener('mousemove',window[handleMethod],false);},false);});playpauseBtn.addEventListener('click',togglePlay);playpauseBtnSmall.addEventListener('click',togglePlay);player.addEventListener('timeupdate',updateProgress);refreshbtn.addEventListener('click',refreshAll);player.addEventListener('volumechange',updateVolume);player.addEventListener('loadedmetadata',function(){totalTime.textContent=formatTime(player.duration);totalTimeSmall.textContent=formatTime(player.duration);});player.addEventListener('canplay',makePlay);player.addEventListener('ended',function(){//playPause.attributes.d.value="";//player.currentTime=0;$('.audio-left,.audio-yuan').addClass('pause');$('.audio-left,.audio-yuan').removeClass('play');$('.audio-pointer').addClass('stopplaydeg');$('.audio-pointer').removeClass('playdeg');$('.audio-bottom-control-play').removeClass('audio-bottom-control-ing');$('.audio-bottom-control-play').addClass('audio-bottom-control-stop');});volumeBtn.addEventListener('click',function(){volumeBtn.classList.toggle('open');volumeControls.classList.toggle('hidden');});//window.addEventListener('resize',directionAware);sliders.forEach(function(slider){varpin=slider.querySelector('.pin');slider.addEventListener('click',window[pin.dataset.method]);});//directionAware();functionisDraggable(el){varcanDrag=false;varclasses=Array.from(el.classList);draggableClasses.forEach(function(draggable){if(classes.indexOf(draggable)!==-1)canDrag=true;});returncanDrag;}functioninRange(event){varrangeBox=getRangeBox(event);varrect=rangeBox.getBoundingClientRect();vardirection=rangeBox.dataset.direction;if(direction=='horizontal'){varmin=rangeBox.offsetLeft;varmax=min+rangeBox.offsetWidth;if(event.clientX<min||event.clientX>max)returnfalse;}else{varmin=rect.top;varmax=min+rangeBox.offsetHeight;if(event.clientY<min||event.clientY>max)returnfalse;}returntrue;}functionupdateProgress(){varcurrent=player.currentTime;varpercent=current/player.duration*100;progress.style.width=percent+'%';progressSmall.style.width=percent+'%';currentTime.textContent=formatTime(current);currentTimeSmall.textContent=formatTime(current);}functionupdateVolume(){volumeProgress.style.height=player.volume*100+'%';if(player.volume>=0.5){//speaker.attributes.d.value='';}elseif(player.volume<0.5&&player.volume>0.05){//speaker.attributes.d.value='';}elseif(player.volume<=0.05){//speaker.attributes.d.value='';}}functiongetRangeBox(event){varrangeBox=event.target;varel=currentlyDragged;if(event.type=='click'&&isDraggable(event.target)){rangeBox=event.target.parentElement.parentElement;}if(event.type=='mousemove'){rangeBox=el.parentElement.parentElement;}returnrangeBox;}functiongetCoefficient(event){varslider=getRangeBox(event);varrect=slider.getBoundingClientRect();varK=0;if(slider.dataset.direction=='horizontal'){varoffsetX=event.clientX-slider.offsetLeft;varwidth=slider.clientWidth;K=offsetX/width;}elseif(slider.dataset.direction=='vertical'){varheight=slider.clientHeight;varoffsetY=event.clientY-rect.top;K=1-offsetY/height;}returnK;}functionrewind(event){if(inRange(event)){player.currentTime=player.duration*getCoefficient(event);}}functionchangeVolume(event){if(inRange(event)){player.volume=getCoefficient(event);}}functionformatTime(time){varmin=Math.floor(time/60);varsec=Math.floor(time%60);return(min<10?'0'+min:min)+':'+(sec<10?'0'+sec:sec);}functiontogglePlay(){if(player.paused){//playPause.attributes.d.value="";$('.audio-left,.audio-yuan').addClass('play');$('.audio-left,.audio-yuan').removeClass('pause');$('.audio-pointer').addClass('playdeg');$('.audio-pointer').removeClass('stopplaydeg');$('.audio-bottom-control-play').removeClass('audio-bottom-control-stop');$('.audio-bottom-control-play').addClass('audio-bottom-control-ing');player.play();}else{//playPause.attributes.d.value="";$('.audio-left,.audio-yuan').addClass('pause');$('.audio-left,.audio-yuan').removeClass('play');$('.audio-pointer').addClass('stopplaydeg');$('.audio-pointer').removeClass('playdeg');$('.audio-bottom-control-play').removeClass('audio-bottom-control-ing');$('.audio-bottom-control-play').addClass('audio-bottom-control-stop');player.pause();}}functionmakePlay(){//playpauseBtn.style.display='block';//playpauseBtnSmall.style.display='block';//loading.style.display='none';}//functiondirectionAware(){//if(window.innerHeight<250){//volumeControls.style.bottom='-54px';//volumeControls.style.left='54px';//}elseif(audioPlayer.offsetTop<154){//volumeControls.style.bottom='-164px';//volumeControls.style.left='-3px';//}else{//volumeControls.style.bottom='52px';//volumeControls.style.left='-3px';//}//}functionrefreshAll(){player.currentTime=0;progress.style.width=0;progressSmall.style.width=0;currentTime.textContent='00:00';currentTimeSmall.textContent='00:00';}