微信小程序音頻播放 InnerAudioContext 的用法

發(fā)表時間：2022-7-26

發(fā)布人：葵宇科技

瀏覽次數(shù)：255

今天項目上涉及到了微信小程序播放音頻功能，所以今天跟著一些教程做了個簡單的播放器

1、實現(xiàn)思路

剛開始想著有沒有現(xiàn)成的組件可以直接用，找到了微信的媒體組件 audio，奈何看著 1.6.0版本開始，該組件不再維護。就百度了一下，還好有另一種方式，使用 InnerAudioContext 來實現(xiàn)音頻播放

2、界面預(yù)覽

點擊播放，播放按鈕改變?yōu)闀和?，播放后展示進度條，可拖動/點擊進度條實現(xiàn)進度控制，可設(shè)置倍速

沒有UI設(shè)計，所以界面很丑，界面后續(xù)完善，功能實現(xiàn)就行啦: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                             <!-- 時長 -->
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 Code

  1 // 創(chuàng)建音頻播放實例
  2 const myAudio = wx.createInnerAudioContext()
  3 
  4 Page({
  5   /**
  6    * 頁面的初始數(shù)據(jù)
  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, //當前播放的音頻，用于顯示播放時長進度條等
 32     forNowTime: '0', //當前播放時間
 33     forAllTime: '0', //總時長
 34     duration: 0, //總時間 秒
 35     current: 0, //slider當前進度
 36     seek: false, //是否處于拖動狀態(tài)
 37     paused: true, //是否處于暫停狀態(tài)
 38     doubleSpeed: 1.0, //播放倍速 默認1.0
 39     doubleSpeedSet: false //倍速設(shè)置小彈窗
 40   },
 41 
 42   /**
 43    * 生命周期函數(shù)--監(jiān)聽頁面加載
 44    */
 45   onLoad: function (options) {// 音頻播放初始化
 46     this.audioInit()
 47   },
 48 
 49 　// 音頻播放-初始化
 50   audioInit() {
 51     // 設(shè)置音頻播放倍速，此處若不設(shè)置，頁面上點擊設(shè)置倍速就不會產(chǎn)生效果
 52     myAudio.playbackRate = 1.0
 53     // 播放監(jiān)聽
 54     myAudio.onPlay(() => {
 55       console.log('開始播放')
 56       console.log(myAudio.playbackRate);
 57     })
 58     // 暫停監(jiān)聽
 59     myAudio.onPause(() => {
 60       console.log('停止播放')
 61     })
 62     // 監(jiān)聽音頻進入可以播放狀態(tài)的事件。但不保證后面可以流暢播放，必須要這個監(jiān)聽，不然播放時長更新監(jiān)聽不會生效，不能給進度條更新值
 63     myAudio.onCanplay(() => {
 64       myAudio.duration
 65     })
 66     // 播放時長更新監(jiān)聽
 67     myAudio.onTimeUpdate(() => {
 68       // 監(jiān)聽播放進度，更新頁面播放時長和進度條進度
 69       this.setData({
 70         forNowTime: parseInt(myAudio.currentTime),
 71         forAllTime: parseInt(myAudio.duration),
 72         current: myAudio.currentTime,
 73         duration: myAudio.duration
 74       })
 75     })
 76     // 播放出錯監(jiān)聽
 77     myAudio.onError((res) => {
 78       console.log(res.errMsg)
 79       console.log(res.errCode)
 80     })
 81   },
 82 
 83   // 開始播放
 84   audioPlay(val) {
 85     console.log("點擊了播放按鈕", val);
 86     if (val) {
 87       // 展示當前播放音頻的進度條
 88       this.setData({
 89         audioDisplay: val.currentTarget.dataset.info.id
 90       })
 91       // 設(shè)置當前播放音頻的路徑
 92       myAudio.src = https://www.wxapp-union.com/val.currentTarget.dataset.info.src
 93     }
 94     // 將暫停狀態(tài)賦值為false
 95     this.setData({
 96       paused: false,
 97     })
 98     // 播放
 99     myAudio.play()
100   },
101 
102   // 暫停播放
103   audioPause() {
104     // 將暫停狀態(tài)賦值為true
105     this.setData({
106       paused: true,
107     })
108     // 暫停
109     myAudio.pause()
110   },
111 
112   // 進度條改變
113   audioChanging(val) {
114     // 通過 seek 來更改當前播放實例的進度
115     myAudio.seek(val.detail.value)
116     // 界面顯示滑動的時間同步改變
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   // 點擊設(shè)置倍速，彈出小彈窗
128   setSpeed() {
129     this.setData({
130       doubleSpeedSet: true
131     })
132   },
133 
134   // 設(shè)置倍速的具體值
135   setSpeedTo(val) {
136     // 需要轉(zhuǎn)換為 Number ，否則不生效
137     myAudio.playbackRate = Number(val.currentTarget.dataset.num)
138     // 界面同步更改并關(guān)閉小彈窗
139     this.setData({
140       doubleSpeed: val.currentTarget.dataset.num,
141       doubleSpeedSet: false
142     })
143   },
144 
145   // 小彈窗關(guān)閉
146   setSpeedClose() {
147     this.setData({
148       doubleSpeedSet: false
149     })
150   },
151 
152   /**
153    * 生命周期函數(shù)--監(jiān)聽頁面隱藏
154    */
155   onHide: function () {
156     // 暫停播放
157     this.audioPause()
158   },
159 
160   /**
161    * 生命周期函數(shù)--監(jiān)聽頁面卸載
162    */
163   onUnload: function () {
164     // 停止播放
165     this.audioPause()
166     myAudio.stop()
167   },
168 })

View Code