微信小程序audio组件在ios端无法播放的解决办法
作者:🍬Black Eyed Peas🍥 发布时间:2024-04-18 09:47:26
标签:小程序,audio,组件
解决方法: 给 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…
来源:https://juejin.cn/post/6979873540526833701
0
投稿
猜你喜欢
- 在写sql的时候,由于有部分语句别名不能调用,百度了一下原因,原来是由于别名机制不同引起的。为了避免下一次再犯同样的错误,今天把网上找到资料
- 前言最近在使用Pycharm,在运行或者安装的过程中出现了各种各样的报错,前面已经介绍过安装pygame出现报错的解决方法。文章总结了大部分
- 目录前言连接管理额外连接管理端口总结前言下面这个报错,相信大多数童鞋都遇见过;那么碰到这个问题,我们应该怎么办呢?在MySQL 5.7及之前
- 本文实例讲述了Django框架用户注销功能实现方法。分享给大家供大家参考,具体如下:HttpResponse()里有个delete_cook
- 一,jieba的介绍jieba 是目前表现较为不错的 Python 中文分词组件,它主要有以下特性:支持四种分词模式:精确模式全模式搜索引擎
- 本文实例为大家分享了python openCV实现摄像头获取人脸图片的具体代码,供大家参考,具体内容如下在机器学习中,训练模型需要大量图片,
- 我就废话不多说,咱直接看代码吧!tf.transposetranspose( a, perm=None,  
- 一、关系数据库1.数据模型实体间的关系分为以下有三种:1*)一对一模型一对一(one-to-one)关系模型用二维表格表示数据及数据联系,是
- 增加异常捕获,更容易现问题的解决方向import sslimport urllib.requestfrom bs4 import Beaut
- 本文实例讲述了Java连接各种数据库的方法。分享给大家供大家参考。具体如下://MySQL:  
- 由于tensorflow版本不同,可能一些函数的调用也有变换,这时候可能需要查看tensorflow版本,可以在终端输入查询命令如下:imp
- PPT链接说实话,看到这个题目时我觉得这有什么好讨论的,肯定会是场一边倒的讨论。因为个人比较倾向于短命名,简单优雅,可能是出于程序员的洁癖,
- 1引言实现磁带备份数据的功能有两方面的困难:首先,SQL Server(以下简称SQL)所提供的数据库的整体备份及恢复功能不能直接满足本系统
- groupby()函数在python的DataFrame中对数据进行分组统计主要使用groupby()函数。1. groupby基本用法1.
- 下边是我对部分内容的总结,里边偏向了T-SQL语句实现的总结,对于SQL Server Management Studio中对象管理器的操作
- JavaScript中有很多内部属性和方法,在大多数情况下,只有JavaScript引擎才可以访问,但不论什么都是有特例的,在这里就是指Mo
- 本文实例讲述了Python处理命令行参数模块optpars用法。分享给大家供大家参考,具体如下:optpars是python中用来处理命令行
- 呵呵,这几天沉溺于灌水,发现转贴的时候真的是很不方便,文字、图形、颜色、连接,如果都转过来真的是满费劲的,于是就写了一个小东西,简陋的很,不
- 在 asp 应用中,经常用到 Session 对象来保存用户临时私有数据,而 asp 的 Session 对象是依赖于浏览器的 Cookie
- 本文转自微信公众号:"算法与编程之美"一、前言三步搭建MUI页面主框架法包括新建含mui的HTML文件、输入mheade