微信小程序audio組件在ios端無法播放的解決辦法
解決方法: 給 audio 組件綁定點擊事件,手動觸發播放暫停方法!
代碼片段:
wxml文件
<!-- 判斷是語音通話,有通話記錄,通話描述不包含'未接' --> <view class="reference" wx:if="{{itemList.activity_type === 'phone' && itemList.activity_reference_id && tool.indexOf(itemList.comment,'未接') === -1 }}"> <!-- 語音播放 --> <van-button class="ref-btn" wx:if="{{audioResourceMaps[itemList.activity_reference_id] === undefined}}" loading="{{itemList.activity_reference_id === currentGettingReferenceId}}" icon="play" type="info" plain data-reference-id="{{itemList.activity_reference_id}}" bindtap="getReference"> </van-button> <view wx:else class="audio-box"> <!-- 語音播放暫停 --> <van-button class="ref-btn" wx:if="{{audioResourceMaps[itemList.activity_reference_id]}}" data-reference-id="{{itemList.activity_reference_id}}" icon="pause" type="info" plain bindtap="pauseAudio"/> <!-- 點擊沒有通話錄音 --> <span wx:else class="no-audio-text">未找到通話錄音</span> </view> </view>
wxss文件
.reference { margin-top: 20rpx; height: 100%; padding: 5rpx; box-sizing: border-box; } .ref-btn { width: 80rpx; height: 80rpx; display: flex; } .ref-btn button { width: 80rpx; height: 80rpx; border-radius: 50%; }
js文件
/** * 組件的初始數據 */ data: { currentGettingReferenceId: null, //正在播放的音頻id audioResourceMaps: {}, //點擊過的音頻列表 isPause:false, // 是否暫停 }, /** * 組件的生命周期 */ lifetimes: { attached: function () { // 因為是子組件 所以要在這裡獲取實例 this.audioContext = wx.createInnerAudioContext(); }, detached: function () { // 停止播放 this.stopAudio() // 在組件實例被從頁面節點樹移除時執行 }, }, methods: { // 獲取錄音 getReference(e) { let id = e.target.dataset.referenceId if(id != this.data.currentGettingReferenceId){ this.stopAudio() } this.setData({ currentGettingReferenceId:id }) // 點擊獲取錄音url的接口。 接口請求根據自己的封裝來寫 WXAPI.getResourceUrl( `/conversation/conversationsession/${id}/`, { data_type: 'all', }).then(({resource_url}) => { console.log('音頻地址====',resource_url,) let url = resource_url && resource_url.indexOf('https://') > -1? encodeURI(resource_url) : null this.data.audioResourceMaps[id] = url; if(resource_url) this.playAudio(id,url) this.setData({ audioResourceMaps: this.data.audioResourceMaps }) console.log('播放過的列表=====',this.data.audioResourceMaps) }).catch(function (e) { console.log(e) }) }, // 暫停 pauseAudio(){ this.setData({ isPause: !this.data.isPause }) let id = this.data.currentGettingReferenceId console.log(id,'播放暫停的id') const innerAudioContext = this.audioContext if(this.data.isPause){ innerAudioContext.pause() console.log('暫停播放') }else{ innerAudioContext.play() console.log('繼續播放') } }, // 停止播放 stopAudio(){ const innerAudioContext = this.audioContext innerAudioContext.stop() let obj = this.data.audioResourceMaps for(let item in obj){ delete obj[item] } // 停止播放就要把播放列表id對應的音頻地址做清空處理 this.setData({ audioResourceMaps: obj, currentGettingReferenceId:null }) console.log('停止播放') }, // 播放 playAudio(id,url) { const innerAudioContext = this.audioContext console.log(url, '音頻的地址') if(url){ innerAudioContext.src = url innerAudioContext.play() innerAudioContext.onPlay(() => { console.log('開始播放') }) innerAudioContext.onTimeUpdate(() => { console.log(innerAudioContext.duration,'總時長') console.log(innerAudioContext.currentTime,'當前播放進度') }) setTimeout(() => { console.log(innerAudioContext.duration,'總時長') console.log(innerAudioContext.currentTime,'當前播放進度') }, 500) innerAudioContext.onEnded(() => { let obj = this.data.audioResourceMaps for(let item in obj){ delete obj[item] } this.setData({ audioResourceMaps: obj, currentGettingReferenceId:null }) console.log('播放完畢') }) innerAudioContext.onError((res) => { console.log(res.errMsg) console.log(res.errCode) }) } }
效果圖
⚠️微信小程序中使用vant,必須要在.json 文件中引用 不然標簽不會顯示哦
我是在app.json文件引得 全局可用
"usingComponents": { "van-button": "@vant/weapp/button/index", "van-icon": "@vant/weapp/icon/index", }
官網文檔:developers.weixin.qq.com/miniprogram…
總結
到此這篇關於微信小程序audio組件在ios端無法播放解決的文章就介紹到這瞭,更多相關小程序audio組件ios端播放內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!