微信小程序苹果部分内容打不开(微信小程序audio组件在ios端无法播放的解决办法)
类别:编程学习 浏览量:1173
时间:2021-11-03 15:23:26 微信小程序苹果部分内容打不开
微信小程序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端播放内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- 微信小程序静态页面详情(微信小程序基础教程之echart的使用)
- 小程序实现左右滑动窗口(小程序实现分页效果)
- 小程序可滑动弧形进度条(小程序实现文字循环滚动动画)
- python编写小程序实现密码验证(python实现扫描ip地址的小程序)
- 微信小程序转盘动画效果(微信小程序实现摇筛子效果)
- 微信小程序签名怎么操作(微信小程序实现简单手写签名组件的方法实例)
- 微信小程序双人游戏横屏(微信小程序实现拼图游戏)
- 小程序ui设计样式(AmazeUI 平滑滚动效果的示例代码)
- 微信小程序获取时间(微信小程序wxs日期时间处理的实现示例)
- 微信小程序计算器怎么用(微信小程序实现计算器功能)
- 微信小程序实现自动定位(微信小程序实现锚点定位功能的方法实例)
- 聊天室python小程序(用Python写一个模拟qq聊天小程序的代码实例)
- 用python制作一个简单的小程序(Python简单基础小程序的实例代码)
- 小程序scroll-view自适应高度(小程序瀑布流解决左右两边高度差距过大的问题)
- 小程序ui图与移动ui(AmazeUI 缩略图的实现示例)
- 微信小程序存token(小程序开发实现access_token统一管理)
- 有种尴尬叫朋友圈忘屏蔽,大学生上演社死现场,父母亲自下场吐槽(有种尴尬叫朋友圈忘屏蔽)
- 朋友圈屏蔽你的人,可以直接看淡了(朋友圈屏蔽你的人)
- 金球奖只青睐那些会戴珠宝的女人(金球奖只青睐那些会戴珠宝的女人)
- 浙江省一个县,人口超40万,建县历史超1100年(浙江省一个县人口超40万)
- 五代十国南唐历代国君(五代十国南唐历代国君)
- 飞机引进工程师杨隆 匠人匠心,只争朝夕(飞机引进工程师杨隆)
热门推荐
- 宝塔linux面板安装(宝塔Linux控制面板专业版破解步骤亲测可用)
- laravel事务状态(laravel dingo API返回自定义错误信息的实例)
- sqlserver访问远程数据库(SQL Server实现跨库跨服务器访问的方法)
- 云服务器9兆带宽的上传速度是多少(云服务器网速多少怎么计算?云服务器的1兆带宽是多少的?)
- SQLSERVER 拼接含有变量字符串案例详解(SQLSERVER 拼接含有变量字符串案例详解)
- 织梦网站导航下拉代码(适合企业站的织梦常用标签大全自己整理)
- sql server 获取时间(SQL SERVER中常用日期函数的具体使用)
- 怎么用css设计边框(单元素利用css实现多重边框效果示例代码)
- python中随机生成不重复随机数(python 在指定范围内随机生成不重复的n个数实例)
- 阿里云ecs 更换操作系统(为什么禁用阿里云ECS的内网后不能使用云监控?)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9