javascript">// 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() {// 组件卸载时，停止并销毁 InnerAudioContextif (this.innerAudioContext) {this.innerAudioContext.stop()this.innerAudioContext.destroy()this.innerAudioContext = null}}},/*** 组件的方法列表*/methods: {/*** 播放按钮点击事件*/playBtn() {const { src, playStatus } = this.dataif (!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 = srcthis.innerAudioContext.play()// 更新播放状态this.setData({playStatus: 1,remain: this.data.duration})},/*** 初始化 InnerAudioContext 并绑定事件*/initializeAudio() {this.innerAudioContext = wx.createInnerAudioContext()this.innerAudioContext.obeyMuteSwitch = falsethis.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) - currentthis.setData({remain: remain > 0 ? remain : 0})})}}
})

<view class="voice-msg" bindtap="playBtn"><imagesrc="{{ 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;}
}