// packageI/newMedia/components/audioPlay/audioPlay.js let audioContext = null; var app = getApp(); Component({ /** * 组件的属性列表 */ options: { addGlobalClass: true }, properties: { openUpload: { value: false, type: Boolean }, audioSrc: { //value: 'https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/testyinping.mp3', value:"", type: String }, drag:{ //是否开启拖拽 value:true, type:Boolean } }, observers:{ 'audioSrc'(newVal,oldVal){ this.setData({ currentTime:0, playFlag:false, playingFlag:false }); this.createInnerAudio(); } }, /** * 组件的初始数据 */ data: { duration:0,//总长度 currentTime:0, //当前长度 playFlag:false, //音乐是否可以播放,是否可以拖拽,音乐可以播放才可以拖拽 playingFlag:false, //是否正在播放 draging:false, //是否正在拖拽中 }, ready(){ this.createInnerAudio(); }, lifetimes: { detached: function() { audioContext.destroy(); // 在组件实例被从页面节点树移除时执行 }, }, /** * 组件的方法列表 */ methods: { getAudioFile() { wx.chooseMessageFile({ count: 1, type: 'file', extension:[".mp3","mp3"], success:(res)=> { this.uploadAudioM(res.tempFiles[0].path); }, fail:(err)=>{ } }); }, createInnerAudio(){ if(audioContext!=null){ audioContext.destroy(); } if(this.data.audioSrc == "") return; audioContext = wx.createInnerAudioContext(); audioContext.src = this.data.audioSrc; audioContext.onCanplay((res)=>{ audioContext.duration; setTimeout(()=>{ let duration = parseInt(audioContext.duration); this.setData({duration,playFlag:true, draging:false}); },100); }); audioContext.onTimeUpdate((res)=>{ if(this.data.draging) return; //正在拖拽中,不更新进度条 let currentTime = parseInt(audioContext.currentTime); let duration = parseInt(audioContext.duration); if(currentTime==this.data.currentTime) return; let setObj = {currentTime}; if(duration!= this.data.duration){ setObj["duration"]=duration; } this.setData(setObj); }); audioContext.onPlay(()=>{ this.setData({draging:false}); this.setData({playingFlag:true}); }); audioContext.onPause(()=>{ this.setData({ playingFlag:false }); }); wx.onAudioInterruptionBegin(()=>{ this.setData({ playingFlag:false }); }); wx.onAudioInterruptionEnd(()=>{ this.setData({playingFlag:false}); }); audioContext.onEnded(()=>{ this.setData({playingFlag:false}); }); audioContext.onError(()=>{}); }, handPlayAudio(){ if(!this.data.playFlag) return; if(this.data.playingFlag){ this.setData({playingFlag:false}); audioContext.pause(); }else { this.setData({playingFlag:true}); audioContext.play(); } }, uploadAudioM(videoData) { let urlStr = app.getNetAddresss("upload.uploadPic"); urlStr += "&upload_type=audio"; wx.showLoading({ title: '上传中', }); wx.uploadFile({ url: urlStr, //仅为示例,非真实的接口地址 filePath: videoData, name: "file", formData: {}, success:(resdata)=> { let res = JSON.parse(resdata.data); this.triggerEvent("successUp",{res}); if(res.result!=1) app.tips(res.msg); //this.createInnerAudio(); //audioContext.src = "https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/testyinping.mp3"; }, complete:()=>{ wx.hideLoading(); } }); }, //拖拽处理函数 startDrag(){ this.setData({draging:true}); }, endDrag(limit){ audioContext.seek(limit); } } });