微信小程序mp3音频播放组件，仅需传入url即可

// index.js
// packageChat/components/audio-player/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    /**
     * MP3 文件的 URL
     */
    src: {
      type: String,
      value: '',
      observer(newVal, oldVal) {
        if (newVal !== oldVal && newVal) {
          // 如果 InnerAudioContext 已存在，先停止并销毁它以避免多个实例
          if (this.innerAudioContext) {
            this.innerAudioContext.stop()
            this.innerAudioContext.destroy()
            this.innerAudioContext = null
          }
          // 初始化音频并获取时长
          this.initializeAudio()
        }
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    playStatus: 0, // 0: 未播放, 1: 正在播放
    duration: 0, // 音频总时长（秒）
    remain: 0 // 剩余播放时间（秒）
  },

  /**
   * 组件生命周期
   */
  lifetimes: {
    attached() {
      if (this.data.src) {
        this.initializeAudio()
      }
    },
    detached() {
      // 组件卸载时，停止并销毁 InnerAudioContext
      if (this.innerAudioContext) {
        this.innerAudioContext.stop()
        this.innerAudioContext.destroy()
        this.innerAudioContext = null
      }
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 播放按钮点击事件
     */
    playBtn() {
      const { src, playStatus } = this.data

      if (!src) {
        wx.showToast({
          title: '没有录音文件',
          icon: 'none'
        })
        return
      }

      // 如果 InnerAudioContext 尚未创建，初始化它
      if (!this.innerAudioContext) {
        this.initializeAudio()
      }

      // 如果当前正在播放，停止播放并重置状态
      if (playStatus === 1) {
        this.innerAudioContext.stop()
        this.setData({
          playStatus: 0,
          remain: this.data.duration
        })
        return
      }

      // 每次点击都重新开始播放
      this.innerAudioContext.src = src
      this.innerAudioContext.play()

      // 更新播放状态
      this.setData({
        playStatus: 1,
        remain: this.data.duration
      })
    },
    /**
     * 初始化 InnerAudioContext 并绑定事件
     */
    initializeAudio() {
      this.innerAudioContext = wx.createInnerAudioContext()
      this.innerAudioContext.obeyMuteSwitch = false
      this.innerAudioContext.src = this.data.src

      // 监听音频能够播放时触发
      this.innerAudioContext.onCanplay(() => {
        console.log('音频可以播放')
        const totalDuration = Math.floor(this.innerAudioContext.duration)
        if (totalDuration > 0) {
          this.setData({
            duration: totalDuration,
            remain: totalDuration
          })
        } else {
          console.warn('无法获取音频时长')
        }
      })

      // 监听播放开始
      this.innerAudioContext.onPlay(() => {
        console.log('音频开始播放')
      })

      // 监听播放结束
      this.innerAudioContext.onEnded(() => {
        console.log('音频播放结束')
        this.setData({
          playStatus: 0,
          remain: this.data.duration
        })
        // 触发自定义事件（如果需要）
        this.triggerEvent('playComplete')
      })

      // 监听播放错误
      this.innerAudioContext.onError(err => {
        console.error('播放错误：', err)
        wx.showToast({
          title: '播放失败，请重试',
          icon: 'none'
        })
        this.setData({
          playStatus: 0,
          remain: this.data.duration
        })
      })

      // 监听播放进度更新
      this.innerAudioContext.onTimeUpdate(() => {
        const current = Math.floor(this.innerAudioContext.currentTime)
        const remain = Math.floor(this.innerAudioContext.duration) - current
        this.setData({
          remain: remain > 0 ? remain : 0
        })
      })
    }
  }
})

<view class="voice-msg" bindtap="playBtn">
  <image
    src="{{ playStatus === 0 ? '/sendingaudio.png' : '/voice.gif' }}"
    mode="aspectFill"
    class="voice-icon"
  />
  <text class="voice-msg-text"> {{ playStatus === 1 ? (remain + "''") : (duration + "''") }} </text>
</view>

/* packageChat/components/audio-player/index.wxss */
.voice-msg {
  display: flex;
  align-items: center;
  min-width: 200rpx;
  padding: 0 20rpx;
  height: 60rpx;
  background-color: rgba(149, 236, 105, 0.72);
  border-radius: 10rpx;
  box-shadow:0 3rpx 6rpx rgba(0, 0, 0, 0.13);

  .voice-icon {
    transform: rotate(180deg);
    width: 22rpx;
    height: 32rpx;
  }

  .voice-msg-text {
    margin-left: 10rpx;
    color:#000000 !important;
    font-size:30rpx !important;
  }
}

原文地址：https://blog.csdn.net/asa12345asas/article/details/145030780

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！