// 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;}
}