说明
音频播放列表中播放云开发中存储的音频文件,可以使用fileid,直接播放。
错误实现方式
在xml文件中添加<audio>组件,src为云存储文件的fileid来实现音频播放,报错Uncaught (in promise) NotSupportedError: The element has no supported sources.,截图如下:
原因为该组件src只能设置具体地址,该组件无法解析云文件的fileid到详情里的地址。
解决办法:使用wx.createInnerAudioContext()创建内部 audio 上下文 InnerAudioContext 对象,xml无需写<audio>组件,通过innerAudioContext.src设置为获取到的fileid。
遇到的问题:因为切换音频列表中的任意音频播放(当前音频正在播放中),而生成的音频实例只有一个,所以播放暂停等操作都是在同一个音频实例上,导致不暂停当前播放直接播放另一个音频还会继续播放前一段音频。
解决办法:定义一个全局InnerAudioContext 对象,在播放方法中首先销毁掉原来的对象并重新生成一个,之后再设置src并play()。注意:需在可播放状态监听事件里play()。暂停方法中则执行pause()。
完善:这样的话暂停当前选中音频,再重新点击播放会从头开始播放。暂停时设置一个变量preIndex存当前选中index,播放时判断当前选中index是否为preIndex,若不是则代表切换到了另一个音频,销毁当前InnerAudioContext 对象并重新生成一个。否则继续播放这个对象。当播放完时可以添加监听方法,改变播放状态。
部分代码:
var innerAudioContext = wx.createInnerAudioContext();
Page({
data:{
voiceList:[],//音频列表,fileid
preIndex:-1,//正在播放中的音频index
},
//播放
play: function(e) {
var that = this;
//获取下一个播放的音频index
var index = e.currentTarget.dataset.index;
//正在播放的音频
var preIndex = that.data.preIndex;
if (index != preIndex) {
innerAudioContext.destroy();
innerAudioContext = wx.createInnerAudioContext();
innerAudioContext.src = voiceList[index].fileId;
innerAudioContext.onCanplay(function() {
innerAudioContext.play();
})
} else {
innerAudioContext.play();
}
},
//暂停
pause: function() {
var that = this;
innerAudioContext.pause();
that.setData({
preIndex:that.data.selectIndex
})
}
})
参照你这个解决的 但是销毁前 nnerAudioContext.destroy(); 不然会报错
你好,我在用innerAudioContext做播放音乐,遇到点问题能否给看看。https://developers.weixin.qq.com/community/develop/doc/000888a0c90168f5d1986205051000
也是通过wx 这个创建实例的方法 创建的,但是直接.src 后面如果是一个写死的链接ios 可以正常播放,只要搞成动态的就没声音了,安卓是好的
没太懂,可以提供一个代码片段看看
找到原因了后台返回的音频地址里面有汉字,编码一下ios 就可以了
嗯嗯
你好,我发现我的小程序里也有问题2。请问全局使用同一个innerAudioContext和每次新建销毁有何不同?是否尝试过用同一个实例,每次修改src后play() ?
不销毁只是修改src,存在不可控问题,具体可以尝试一下
为什么通过接口获取的视频链接动态写上去不可以呢,但是直接写死一个src 后面的就可以了