扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
今天小编给大家分享一下微信小程序audio组件在ios端无法播放怎么解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
在右玉等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供网站设计、成都网站制作 网站设计制作按需求定制制作,公司网站建设,企业网站建设,成都品牌网站建设,全网整合营销推广,外贸网站制作,右玉网站建设费用合理。
解决方法: 给 audio 组件绑定点击事件,手动触发播放暂停方法。
代码片段:
wxml文件
未找到通话录音
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", }
以上就是“微信小程序audio组件在ios端无法播放怎么解决”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流