wutian-miniprogram/src/components/customAudioBar/index.ts

const _app = getApp<IAppOption>();

// pages/story/a.ts
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    url: {
      type: String,
      value: "",
      // 'https://circlehbsaas.oss-cn-beijing.aliyuncs.com/audio/20240907757_tmp_acf4f18c59553a8d2d9f74e173a16328.m4a.mp3',
    },
    time: {
      type: String,
      value: "",
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    play: false,
    innerAudioContext: null as WechatMiniprogram.InnerAudioContext | null,
  },

  lifetimes: {
    attached() {
      this.setData({
        innerAudioContext: wx.createInnerAudioContext(),
      });
    },
  },

  /**
   * 组件的方法列表
   */
  methods: {
    handlePlay() {
      const { url, play, innerAudioContext } = this.data;
      if (innerAudioContext) {
        if (play) {
          innerAudioContext.stop();
          return;
        }
        innerAudioContext.stop();
        innerAudioContext.src = url;
        innerAudioContext.play();
        this.setData({
          play: true,
        });
        innerAudioContext.onEnded(() => {
          this.setData({
            play: false,
          });
        });
      }
    },
    handlePause() {
      const { innerAudioContext } = this.data;
      if (innerAudioContext) {
        innerAudioContext.pause();
        this.setData({
          play: false,
        });
      }
    },
  },
});

export {};