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,
        })
      }
    },
  },
})