微信小步伐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;
}
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]