微信小程序音頻播放 InnerAudioContext 的(de)用法
發表時(shí)間：2022-7-26
發布人(rén)：融晨科技
浏覽次數：255
今天項目上(shàng)涉及到(dào)了(le／liǎo)微信小程序播放音頻功能，所以(yǐ)今天跟着一些教程做了(le／liǎo)個(gè)簡單的(de)播放器
1、實現思路
剛開始想着有沒有現成的(de)組件可以(yǐ)直接用，找到(dào)了(le／liǎo)微信的(de)媒體組件 audio，奈何看着 1.6.0版本開始，該組件不(bù)再維護。就(jiù)百度了(le／liǎo)一下，還好有另一種方式，使用 InnerAudioContext 來(lái)實現音頻播放
2、界面預覽
點擊播放，播放按鈕改變爲(wéi / wèi)暫停，播放後展示進度條，可 拖動/點擊 進度條實現進度控制，可設置倍速
沒有UI設計，所以(yǐ)界面很醜，界面後續完善，功能實現就(jiù)行啦:grinning:
3、界面代碼
WXML：
1 <view class="item-con">
2 <block wx:for="{{audios}}" wx:index="idx" wx:item="item" wx:key="idx">
3 <view class="audio-item">
4 <view class="audio-info">
5 <text>{{index+1+"."+item.name}}</text>
6 <view wx:if="{{audioDisplay!=item.id||paused}}" class="audio-btn" bindtap="audioPlay" data-info="{{item}}">播放</view>
7 <view wx:else class="audio-btn btn-pause" bindtap="audioPause">暫停</view>
8 </view>
9 <view class="audio-control" wx:if="{{audioDisplay==item.id}}">
10 <!-- 時(shí)長 -->
11 <view class="audio-number">{{forNowTime?forNowTime:0}}s</view>
12 <slider class="audio-slider" activeColor="#5189FF" block-size="12" value="{{current}}" max="{{duration}}" step="0.01" bindchanging="audioChanging" bindchange="audioChange">
13 </slider>
14 <view class="audio-number">{{forAllTime?forAllTime:0}}s</view>
15 <!-- 倍速控制 -->
16 <view class="audio-number speed" bindtap="setSpeed">
17 x{{doubleSpeed}}
18 <view wx:if="{{doubleSpeedSet}}" class="speed-wa" catchtap="setSpeedClose"></view>
19 <view wx:if="{{doubleSpeedSet}}" class="double-speed">
20 <view class="speed-item" catchtap="setSpeedTo" data-num="0.5">x0.5</view>
21 <view class="speed-item" catchtap="setSpeedTo" data-num="1.0">x1.0</view>
22 <view class="speed-item" catchtap="setSpeedTo" data-num="1.5">x1.5</view>
23 <view class="speed-item" catchtap="setSpeedTo" data-num="2.0">x2.0</view>
24 </view>
25 </view>
26 </view>
27 </view>
28 </block>
29 </view>
View CodeJS
1 // 創建音頻播放實例
2 const myAudio = wx.createInnerAudioContext()
3
4 Page({
5 /**
6 * 頁面的(de)初始數據
7 */
8 data: {
9 audios: [{
10 id: 1,
11 name: "秒針",
12 src: "https://sharefs.ali.kugou.com/202202121104/0639f9c2315cbb939aff741be27860ff/KGTX/CLTX001/02c4d6fefd5d899081ba45f47be48adb.mp3"
13 },
14 {
15 id: 2,
16 name: "做酒",
17 src: "https://sharefs.ali.kugou.com/202202121113/38ab5022041cea53ccff0752d481f818/KGTX/CLTX001/8fa49a75490d252a624c3e1872a26261.mp3"
18 },
19 {
20 id: 3,
21 name: "好想抱住你",
22 src: "https://sharefs.ali.kugou.com/202202121104/7aa9c439b799ea26ace0fee414aa9c12/KGTX/CLTX001/43f9b75efe102a48ab20131dcaa2b557.mp3"
23 },
24 {
25 id: 4,
26 name: "紅塵彼岸卻無她",
27 src: "https://sharefs.ali.kugou.com/202202121113/59831d34060f1dfcd2a114e74879868a/KGTX/CLTX001/8a57fbfe87af1dbcac1e9115a2ff1a06.mp3"
28 },
29 ],
30 // 音頻播放控制
31 audioDisplay: null, //當前播放的(de)音頻，用于(yú)顯示播放時(shí)長進度條等
32 forNowTime: '0', //當前播放時(shí)間
33 forAllTime: '0', //總時(shí)長
34 duration: 0, //總時(shí)間 秒
35 current: 0, //slider當前進度
36 seek: false, //是(shì)否處于(yú)拖動狀态
37 paused: true, //是(shì)否處于(yú)暫停狀态
38 doubleSpeed: 1.0, //播放倍速 默認1.0
39 doubleSpeedSet: false //倍速設置小彈窗
40 },
41
42 /**
43 * 生命周期函數--監聽頁面加載
44 */
45 onLoad: function (options) {// 音頻播放初始化
46 this.audioInit()
47 },
48
49 // 音頻播放-初始化
50 audioInit() {
51 // 設置音頻播放倍速，此處若不(bù)設置，頁面上(shàng)點擊設置倍速就(jiù)不(bù)會産生效果
52 myAudio.playbackRate = 1.0
53 // 播放監聽
54 myAudio.onPlay(() => {
55 console.log('開始播放')
56 console.log(myAudio.playbackRate);
57 })
58 // 暫停監聽
59 myAudio.onPause(() => {
60 console.log('停止播放')
61 })
62 // 監聽音頻進入可以(yǐ)播放狀态的(de)事件。但不(bù)保證後面可以(yǐ)流暢播放，必須要(yào / yāo)這(zhè)個(gè)監聽，不(bù)然播放時(shí)長更新監聽不(bù)會生效，不(bù)能給進度條更新值
63 myAudio.onCanplay(() => {
64 myAudio.duration
65 })
66 // 播放時(shí)長更新監聽
67 myAudio.onTimeUpdate(() => {
68 // 監聽播放進度，更新頁面播放時(shí)長和(hé / huò)進度條進度
69 this.setData({
70 forNowTime: parseInt(myAudio.currentTime),
71 forAllTime: parseInt(myAudio.duration),
72 current: myAudio.currentTime,
73 duration: myAudio.duration
74 })
75 })
76 // 播放出(chū)錯監聽
77 myAudio.onError((res) => {
78 console.log(res.errMsg)
79 console.log(res.errCode)
80 })
81 },
82
83 // 開始播放
84 audioPlay(val) {
85 console.log("點擊了(le／liǎo)播放按鈕", val);
86 if (val) {
87 // 展示當前播放音頻的(de)進度條
88 this.setData({
89 audioDisplay: val.currentTarget.dataset.info.id
90 })
91 // 設置當前播放音頻的(de)路徑
92 myAudio.src = https://www.wxapp-union.com/val.currentTarget.dataset.info.src
93 }
94 // 将暫停狀态賦值爲(wéi / wèi)false
95 this.setData({
96 paused: false,
97 })
98 // 播放
99 myAudio.play()
100 },
101
102 // 暫停播放
103 audioPause() {
104 // 将暫停狀态賦值爲(wéi / wèi)true
105 this.setData({
106 paused: true,
107 })
108 // 暫停
109 myAudio.pause()
110 },
111
112 // 進度條改變
113 audioChanging(val) {
114 // 通過 seek 來(lái)更改當前播放實例的(de)進度
115 myAudio.seek(val.detail.value)
116 // 界面顯示滑動的(de)時(shí)間同步改變
117 this.setData({
118 forNowTime: parseInt(val.detail.value)
119 })
120 },
121
122 // 進度條改變完成
123 audioChange(val) {
124 myAudio.seek(val.detail.value)
125 },
126
127 // 點擊設置倍速，彈出(chū)小彈窗
128 setSpeed() {
129 this.setData({
130 doubleSpeedSet: true
131 })
132 },
133
134 // 設置倍速的(de)具體值
135 setSpeedTo(val) {
136 // 需要(yào / yāo)轉換爲(wéi / wèi) Number ，否則不(bù)生效
137 myAudio.playbackRate = Number(val.currentTarget.dataset.num)
138 // 界面同步更改并關閉小彈窗
139 this.setData({
140 doubleSpeed: val.currentTarget.dataset.num,
141 doubleSpeedSet: false
142 })
143 },
144
145 // 小彈窗關閉
146 setSpeedClose() {
147 this.setData({
148 doubleSpeedSet: false
149 })
150 },
151
152 /**
153 * 生命周期函數--監聽頁面隐藏
154 */
155 onHide: function () {
156 // 暫停播放
157 this.audioPause()
158 },
159
160 /**
161 * 生命周期函數--監聽頁面卸載
162 */
163 onUnload: function () {
164 // 停止播放
165 this.audioPause()
166 myAudio.stop()
167 },
168 })
View Code4、注意事項
4.1 在(zài)初始化的(de)時(shí)候需要(yào / yāo)設置一下播放倍速，不(bù)然後面的(de)播放倍速功能可能會不(bù)生效
4.2 初始化時(shí)，需要(yào / yāo)配置 InnerAudioContext.onCanplay(function callback) 監聽，不(bù)然後續播放時(shí)長監聽可能監聽不(bù)到(dào)
4.3 播放時(shí)間和(hé / huò)進度條
這(zhè)裏播放時(shí)長和(hé / huò)進度條爲(wéi / wèi)什麽不(bù)用兩個(gè)變量來(lái)控制
因爲(wéi / wèi)獲取到(dào)的(de)音頻長度和(hé / huò)當前播放位置是(shì)小數形式的(de)，我隻想進度條用小數來(lái)控制，而(ér)播放時(shí)間想顯示整數，所以(yǐ)用了(le／liǎo)4個(gè)變量，當然也(yě)有其他(tā)更好的(de)方法，後續會改進
