yuminge-app/yun-min-program-plugin-master/packageI/newMedia/components/audioPlay/audioPlay.js

// 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);
    }
  }
});