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

1. // index.js
2. // packageChat/components/audio-player/index.js
3. Component({
4.   /**
5.    * 组件的属性列表
6.    */
7.   properties: {
8.     /**
9.      * MP3 文件的 URL
10.      */
11.     src: {
12.       type: String,
13.       value: '',
14.       observer(newVal, oldVal) {
15.         if (newVal !== oldVal && newVal) {
16.           // 如果 InnerAudioContext 已存在，先停止并销毁它以避免多个实例
17.           if (this.innerAudioContext) {
18.             this.innerAudioContext.stop()
19.             this.innerAudioContext.destroy()
20.             this.innerAudioContext = null
21.           }
22.           // 初始化音频并获取时长
23.           this.initializeAudio()
24.         }
25.       }
26.     }
27.   },
29.   /**
30.    * 组件的初始数据
31.    */
32.   data: {
33.     playStatus: 0, // 0: 未播放, 1: 正在播放
34.     duration: 0, // 音频总时长（秒）
35.     remain: 0 // 剩余播放时间（秒）
36.   },
38.   /**
39.    * 组件生命周期
40.    */
41.   lifetimes: {
42.     attached() {
43.       if (this.data.src) {
44.         this.initializeAudio()
45.       }
46.     },
47.     detached() {
48.       // 组件卸载时，停止并销毁 InnerAudioContext
49.       if (this.innerAudioContext) {
50.         this.innerAudioContext.stop()
51.         this.innerAudioContext.destroy()
52.         this.innerAudioContext = null
53.       }
54.     }
55.   },
57.   /**
58.    * 组件的方法列表
59.    */
60.   methods: {
61.     /**
62.      * 播放按钮点击事件
63.      */
64.     playBtn() {
65.       const { src, playStatus } = this.data
67.       if (!src) {
68.         wx.showToast({
69.           title: '没有录音文件',
70.           icon: 'none'
71.         })
72.         return
73.       }
75.       // 如果 InnerAudioContext 尚未创建，初始化它
76.       if (!this.innerAudioContext) {
77.         this.initializeAudio()
78.       }
80.       // 如果当前正在播放，停止播放并重置状态
81.       if (playStatus === 1) {
82.         this.innerAudioContext.stop()
83.         this.setData({
84.           playStatus: 0,
85.           remain: this.data.duration
86.         })
87.         return
88.       }
90.       // 每次点击都重新开始播放
91.       this.innerAudioContext.src = src
92.       this.innerAudioContext.play()
94.       // 更新播放状态
95.       this.setData({
96.         playStatus: 1,
97.         remain: this.data.duration
98.       })
99.     },
100.     /**
101.      * 初始化 InnerAudioContext 并绑定事件
102.      */
103.     initializeAudio() {
104.       this.innerAudioContext = wx.createInnerAudioContext()
105.       this.innerAudioContext.obeyMuteSwitch = false
106.       this.innerAudioContext.src = this.data.src
108.       // 监听音频能够播放时触发
109.       this.innerAudioContext.onCanplay(() => {
110.         console.log('音频可以播放')
111.         const totalDuration = Math.floor(this.innerAudioContext.duration)
112.         if (totalDuration > 0) {
113.           this.setData({
114.             duration: totalDuration,
115.             remain: totalDuration
116.           })
117.         } else {
118.           console.warn('无法获取音频时长')
119.         }
120.       })
122.       // 监听播放开始
123.       this.innerAudioContext.onPlay(() => {
124.         console.log('音频开始播放')
125.       })
127.       // 监听播放结束
128.       this.innerAudioContext.onEnded(() => {
129.         console.log('音频播放结束')
130.         this.setData({
131.           playStatus: 0,
132.           remain: this.data.duration
133.         })
134.         // 触发自定义事件（如果需要）
135.         this.triggerEvent('playComplete')
136.       })
138.       // 监听播放错误
139.       this.innerAudioContext.onError(err => {
140.         console.error('播放错误：', err)
141.         wx.showToast({
142.           title: '播放失败，请重试',
143.           icon: 'none'
144.         })
145.         this.setData({
146.           playStatus: 0,
147.           remain: this.data.duration
148.         })
149.       })
151.       // 监听播放进度更新
152.       this.innerAudioContext.onTimeUpdate(() => {
153.         const current = Math.floor(this.innerAudioContext.currentTime)
154.         const remain = Math.floor(this.innerAudioContext.duration) - current
155.         this.setData({
156.           remain: remain > 0 ? remain : 0
157.         })
158.       })
159.     }
160.   }
161. })

复制代码

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

复制代码

1. /* packageChat/components/audio-player/index.wxss */
2. .voice-msg {
3.   display: flex;
4.   align-items: center;
5.   min-width: 200rpx;
6.   padding: 0 20rpx;
7.   height: 60rpx;
8.   background-color: rgba(149, 236, 105, 0.72);
9.   border-radius: 10rpx;
10.   box-shadow:0 3rpx 6rpx rgba(0, 0, 0, 0.13);
12.   .voice-icon {
13.     transform: rotate(180deg);
14.     width: 22rpx;
15.     height: 32rpx;
16.   }
18.   .voice-msg-text {
19.     margin-left: 10rpx;
20.     color:#000000 !important;
21.     font-size:30rpx !important;
22.   }
23. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。