今天小编给大家分享一下微信小程序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端无法播放怎么解决”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。
标题名称：微信小程序audio组件在ios端无法播放怎么解决
URL分享：
http://cdxtjz.cn/article/gdoojg.html
