yuminge-app/yun-min-program-plugin-master/packageC/components/audio-slider/audio-slider.js

// packageC/components/audio-slider/audio-slider.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    src: {
      value: '',
      type: String
    },
    duration: {
      value: 0,
      type: String
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    songStop: false,
    innerAudioContext: null,
    slmin: '00:00',
    audio_duration: '00:00',
    currentTime: 0,
    valueSlmin: 0,
    draging: false //正在拖拽
  },
  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached() {
      this.init();
    },
    moved() {},
    detached() {
      if (this.data.innerAudioContext) this.data.innerAudioContext.destroy();
    },
  },
  /**
   * 组件的方法列表
   */
  methods: {
    init() {
      var that = this;
      this.data.innerAudioContext = wx.createInnerAudioContext();
      this.data.innerAudioContext.src = this.data.src;
      if (!this.data.src) {
        wx.showToast({
          title: "音频链接出错！",
          icon: "error",
        });
        return;
      }
      this.data.innerAudioContext.onCanplay(() => {
        console.log('音频进入可以播放状态========================',this.data.duration,this.data.innerAudioContext.duration);
        setTimeout(() => {
          let _duration = this.data.innerAudioContext.duration != Infinity || !this.data.innerAudioContext.duration ? this.data.innerAudioContext.duration : this.data.duration;
          let duration = parseInt(_duration);
          this.setData({
            audio_duration: duration ? this.realFormatSecond(duration) : '---',
            draging: false,
            slmin: "0:00:00",
          });
        }, 200);
      });
      this.data.innerAudioContext.onPlay(() => {
        console.log('开始播放');
        this.setData({
          songStop: true
        });
      });
      this.data.innerAudioContext.onTimeUpdate(() => {
        if (this.data.draging) return;
        if (!this.data.innerAudioContext.currentTime) return;
        let _duration = this.data.innerAudioContext.duration != Infinity || !this.data.innerAudioContext.duration ? this.data.innerAudioContext.duration : this.data.duration;
          
        let smun = (parseInt(this.data.innerAudioContext.currentTime) / parseInt(_duration)) * 100;
        
        let duration = this.realFormatSecond(_duration);
        if (this.data.currentTime && this.data.currentTime == parseInt(this.data.innerAudioContext.currentTime)) return;
        this.data.currentTime = parseInt(this.data.innerAudioContext.currentTime);
        var valueSlmin = parseInt(smun);
        that.setData({
          valueSlmin: valueSlmin, //进度条百分比
          audio_duration: duration, //音频时长
          slmin: this.realFormatSecond(parseInt(this.data.innerAudioContext.currentTime)) //当前播放时间
        });
      });
      this.data.innerAudioContext.onError((res) => {
        wx.showToast({
          title: "播放错误",
          icon: "none",
        });
        this.setData({
          songStop: false
        });
      });
      this.data.innerAudioContext.onEnded((res) => {
        console.log('结束播放');
        this.setData({
          songStop: false,
          valueSlmin: 0,
          slmin: "0:00:00",
          draging: false
        });
        // this.data.innerAudioContext.seek(0);
      });
      this.data.innerAudioContext.onPause(() => {
        this.setData({
          songStop: false
        });
      });
      // this.data.innerAudioContext.onSeeked(() => {
      //   // this.playMusic()
      // });
    },
    sildein(e) {
      var setvalue = e.detail / 100;
      let _duration = this.data.innerAudioContext.duration != Infinity || !this.data.innerAudioContext.duration ? this.data.innerAudioContext.duration : this.data.duration;
      var long = _duration * setvalue;
      this.data.innerAudioContext.seek(long);
    },
    realFormatSecond(second) {
      var secondType = typeof second;

      if (secondType === "number" || secondType === "string") {
        second = parseInt(second);

        var hours = Math.floor(second / 3600);
        second = second - hours * 3600;
        var mimute = Math.floor(second / 60);
        second = second - mimute * 60;
        if (isNaN(second)) {
          return '---';
        } else {
          return hours + ":" + ("0" + mimute).slice(-2) + ":" + ("0" + second).slice(-2);
        }

      } else {
        return "0:00:00";
      }
    },
    playMusic() {
      this.data.innerAudioContext.play();
    },
    pauseMusic() {
      this.data.innerAudioContext.pause();
    },
    startDrag() {
      this.data.draging = true;
    },
    endDrag() {
      this.data.draging = false;
    }
  }
});