xinda-miniprogram/src/components/freeAudio/index.js

const app = getApp();
import dayjs from "dayjs";
Component({
  behaviors: [],
  properties: {
    audio: {
      type: Object,
      observer(val) {
        if (this.audioContext) {
          const { play } = this.data;
          if (play) {
            this.audioContext.pause();
            this.setData({
              play: false,
              progress: 0,
              time: "00",
            });
          }
          this.audioContext.destroy();
        }
        if (val) {
          this.audioAddEventListener(val);
        }
      },
    },
  },
  data: {
    Timestamp: app.globalData.Timestamp,
    progress: 0,
    time: "00",
    duration: "00",
    play: false,
    loading: true,

    imageUrl: app.globalData.imageUrl,
    progressimg: true,
  },
  lifetimes: {
    created() {},
    async attached() {},
    moved() {},
    detached() {
      if (this.audioContext) {
        const { play } = this.data;
        if (play) {
          this.audioContext.pause();
        }
        this.audioContext.destroy();
      }
      this.audioAddEventListener = null;
      this.setData({
        play: false,
        progress: 0,
        time: "00",
      });
    },
  },
  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function () {},
    hide: function () {
      const { play } = this.data;
      if (play) {
        this.audioContext.pause();
      }
    },
    resize: function () {},
  },
  methods: {
    togglePlay() {
      const { play, loading } = this.data;
      if (loading) {
        wx.showToast({
          title: "音频加载中",
          icon: "none",
        });
        return;
      }
      if (play) {
        this.audioContext.pause();
      } else {
        this.audioContext.play();
      }
    },
    formatTime(time) {
      let m = parseInt(time / 60);
      let s = parseInt(time % 60);
      return this.towNum(m) + ":" + this.towNum(s);
    },
    towNum(num) {
      if (num >= 10) {
        return num;
      } else {
        return "0" + num;
      }
    },
    audioAddEventListener(val) {
      const that = this;
      this.setData({
        duration: this.formatTime(val.size),
      });
      that.audioContext = wx.createInnerAudioContext();
      that.audioContext.src = val.url;
      that.setData({
        loading: false,
      });
      that.audioContext.onError(({ errCode, ...reset }) => {
        console.log("reset: ", reset);
        console.log("errCode: ", errCode);
        if (errCode === 10004 || errCode == 10001 || errCode == -1) {
          that.audioContext.destroy();
          that.setData({
            loading: true,
          });
          setTimeout(() => {
            that.audioAddEventListener(val);
          }, 300);
        }
      });
      that.audioContext.onPlay(() => {
        that.setData({
          play: true,
        });
      });
      that.audioContext.onPause(() => {
        console.log(1111111);
        that.setData({
          play: false,
        });
      });
      that.audioContext.onEnded(() => {
        that.audioContext.seek(0);
        that.setData({
          play: false,
          progress: 0,
          time: "00",
        });
      });
      that.audioContext.onTimeUpdate(() => {
        const duration = that.audioContext.duration || 0;
        const currentTime = that.audioContext.currentTime || 0;
        const progress = (currentTime / duration) * 100;
        if (duration == Infinity) {
          return;
        }
        that.setData({
          play: true,
          duration: that.formatTime(duration),
          time: that.formatTime(currentTime),
        });
        if (that.data.progressimg) {
          this.setData({
            progress: progress,
          });
        }
      });
    },
    handleAuthChangeimg() {
      console.log(11111);
      this.setData({
        progressimg: false,
      });
    },
    handleAuthChange(e) {
      console.log(22222222222);
      let { duration } = this.data;
      const secods = this.audioContext.duration || duration.split(":")[0] * 60 + duration.split(":")[1] * 1;
      const progress = e.detail.value;
      let seek = ((secods / 100) * progress).toFixed(3) * 1;
      this.audioContext.seek(seek);
      this.setData({
        progressimg: true,
      });
    },
  },
});