.custom-audio{border-radius:8vw;杈规锛?CCC1px瀹炲績锛涜儗鏅細#F3F6FC锛涢鑹诧細#333锛涙樉绀猴細寮规€э紱寮规€ф祦锛氳鐜板湪鎹㈣锛涘榻愰」鐩細灞呬腑锛涜瘉鏄庡唴瀹癸細绌烘牸涔嬮棿锛涘～鍏咃細2vw锛涘瓧浣撳ぇ灏忥細14px锛?10vw;绌虹櫧锛歯owrap锛涙樉绀猴細寮规€э紱瀵归綈椤圭洰锛氬眳涓紱璇佹槑鍐呭锛氬眳涓紱}}閬撶悊閮芥槸涓€鏍风殑锛屽洜涓哄皬绋嬪簭骞舵病鏈夊畼鏂圭淮鎶ら煶棰戠粍浠躲€傞煶棰戠粍浠剁殑瑕佹眰鍜岄檺鍒剁偣鍑绘挱鏀炬垨鏆傚仠鏄剧ず鎾斁杩涘害鍜屾€绘椂闀裤€傚綋椤甸潰闊抽鏇存柊鏃讹紝鍥炬爣浼氭洿鏀逛互鏄剧ず褰撳墠闊抽鐘舵€侊紙鏆傚仠/鎾斁/鍔犺浇锛夈€傚埛鏂扮粍浠剁姸鎬佸叏灞€鍙湁涓€涓煶棰戝浜庢挱鏀剧姸鎬佺寮€椤甸潰鍚庤嚜鍔ㄥ仠姝㈡挱鏀惧苟閿€姣侀煶棰戝疄渚嬬礌鏉?灞炴€?鏂规硶寮€濮嬸煕爑ni-appVue涔熸槸鍏堟瀯閫燚OM缁撴瀯鏃犻煶棰戞簮{{fmtSecond(currentTime)}}/{{fmtSecond(duration)}}瀹氫箟accepted缁勪欢props:{audioSrc:{type:String,default:''},}锛屽畾涔塁ustomAudio缁勪欢鍒濆鍖栫浉鍏崇殑鎿嶄綔锛屽苟鍦╥nnerAudioContext鍥炶皟涓坊鍔犱竴浜涜涓猴紙鎴戜滑韪╁埌浜嗕箣鍓嶈妺澶存枃绔犺繖閲岀殑鍧戠洿鎺ヤ笂浠ｇ爜锛塱mport{formatSecondToHHmmss,afterAudioPlay,beforeAudioRecordOrPlay}from'../../lib/Utils'consticonPaused='../../static/images/icon_paused.png'consticonPlaying='../../static/images/icon_playing.png'consticonStop='../../static/images/icon_stop.png'consticonLoading='../../鐘舵€乧/images/icon_loading.gif'//...data(){return{audioCtx:null,//闊抽涓婁笅鏂囨寔缁椂闂?0,//鎬婚煶棰戞寔缁椂闂碿urrentTime:0,//AudioImg:iconLoading,//榛樿鍊肩姸鎬佹鍦ㄥ姞杞絵},watch:{audioSrc:{handler(newSrc,oldSrc){console.log('watch',newSrc,oldSrc)this.audioImg=iconLoadingthis.currentTime=0this.duration=0if(this.audioCtx===undefined){this.audioCtx=uni.createInnerAudioContext()this.onTimeUpdate=this.audioCtx.onTimeUpdatethis.bindAuidoCallback(this.audioCtx)}else{this.audioCtx.src=newSrc}濡傛灉锛坱his.audioCtx.play){this.audioCtx.stop()getApp().globalData.audioPlaying=false}}}},mounted(){this.audioCtx=uni.createInnerAudioContext()this.audioCtx.src=this.audioSrcthis.audioCtx.startTime=0this.bindAuidoCallback(this.audioCtx)}锛屾柟娉曪細{bindAuidoCallback(ctx){ctx.onTimeUpdate((e)=>{this.onTimeUpdate(e)})ctx.onCanplay((e)=>{this.onCanplay(e)})ctx.onWaiting((e)=>{this.onWaiting(e)})ctx.onPlay((e)=>{this.onPlay(e)})ctx.onPause((e)=>{this.onPause(e)})ctx.onEnded((e)=>{this.onEnded(e)})ctx.onError((e)=>{this.onError(e)})},tips(){uni.showToast({title:'鏃犳晥鏋滈煶婧?璇峰厛褰曢煶',icon:'none'})},playOrStopAudio(){if(this.audioCtx===null){this.audioCtx=uni.createInnerAudioContext()this.audioCtx.src=this.audioSrcthis.bindAuidoCallback(this.audioCtx)}if(this.audioCtx.paused){if(beforeAudioRecordOrPlay('play')){this.audioCtx.play()this.audioImg=iconPlaying}}else{this.audioCtx.pause()afterAudioPlay()this.audioImg=iconPaused}},onTimeUpdate(e){console.log锛?onTimeUpdate'锛宼his.audioCtx.duration锛岃繖涓€俛udioCtx.currentTime)濡傛灉(this.audioCtx.currentTime>0&&this.audioCtx.currentTime<=1){this.currentTime=1}elseif(this.currentTime!==Math.floor(this.audioCtx.currentTime)){this.currentTime=Math.floor(this.audioCtx.currentTime)}constduration=Math.floor(this.audioCtx.duration)if(this.duration!==duration){this.duration=duration}},onCanplay(e){if(this.audioImg===iconLoading){this.audioImg=iconPaused}console.log('onCanplay',e)},onWaiting(e){if(this.audioImg!==iconLoading){this.audioImg=iconLoading}},onPlay(e){console.log('onPlay',e,this.audioCtx.duration)this.audioImg=iconPlayingif(this.audioCtx.duration>0&&this.audioCtx.duration<=1){this.duration=1}else{this.duration=Math.floor(this.audioCtx.duration)}},onPause(e){console.log('onPause',e)this.audioImg=iconPaused},onEnded(e){console.log('onEnded',e)if(this.audioImg!==iconPaused){this.audioImg=iconPaused}afterAudioPlay()},onError(e){uni.showToast({title:'Audioloadingfailed',icon:'none'})thrownewError(e.errMsg,e.errCode)},fmtSecond(sec){const{min,second}=formatSecondToHHmmss(sec)杩斿洖`${min}:${second}`}}锛岀浉鍚岀殑scss鏂囦欢.custom-audio{border-radius:8vw;杈规锛?CCC1px瀹炲績锛涜儗鏅細#F3F6FC锛涢鑹诧細#333锛涙樉绀猴細寮规€э紱寮规€ф祦锛氳鐜板湪鎹㈣锛涘榻愰」鐩細灞呬腑锛涜瘉鏄庡唴瀹癸細绌烘牸涔嬮棿锛涘～鍏咃細2vw锛涘瓧浣撳ぇ灏忥細14px锛?10vw;绌虹櫧锛歯owrap锛涙樉绀猴細寮规€э紱瀵归綈椤圭洰锛氬眳涓紱璇佹槑鍐呭锛氬眳涓紱}}鏈€鍚庯紝澶у鏈変粈涔堥棶棰樻垨鑰呭缓璁彲浠ュ拰鎴戜竴璧疯璁哄摝~
