微信小程序audio組件在ios端無法播放怎么解決

蝸牛 互聯網技術資訊 2022-04-03 139 0

今天小編給大家分享一下微信小程序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)
????????})
??????}
????}

效果圖

微信小程序audio組件在ios端無法播放怎么解決  微信小程序 第1張

??微信小程序中使用vant,必須要在.json 文件中引用 不然標簽不會顯示哦

我是在app.json文件引得? 全局可用

"usingComponents":?{
????"van-button":?"@vant/weapp/button/index",
????"van-icon":?"@vant/weapp/icon/index",
??}

以上就是“微信小程序audio組件在ios端無法播放怎么解決”這篇文章的所有內容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學習更多的知識,請關注蝸牛博客行業資訊頻道。

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:niceseo99@gmail.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

評論

日本韩欧美一级A片在线观看