uni-app 音频播放 post请求,播放二进制流
在uni-app中,可以利用uni.createInnerAudioContext()
来获取并播放音频,例如:
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
innerAudioContext.src = 'https://bjetxgzv.cdn.bspapp.com/xxx.mp3';
innerAudioContext.onPlay(() => {
console.log('开始播放');
});
这里是一个get请求,通过这个src可以直接获取到音频的二进制流,然后就可以直接播放了。但是如果音频播放的接口是一个post请求的,这个就不好办了。
我的第一个想法是,把这个二进制流,利用 URL.createObjectURL()
创建一个url,但是微信小程序里不支持。
然后我就想到能不能把这个文件保存为一个临时文件,然后再获取url。最后证明这个方法是可行的。下面来看代码:
getMenAuio(content) {
return new Promise((resolve, reject) => {
uni.request({
url: 'https://请求地址',
method: 'POST',
data: {
...
},
responseType: 'arraybuffer',
header: {
'Content-Type': 'application/json'
},
success(res) {
resolve(res)
}
})
})
},
async doGetMenAuio(content, wxAudio) {
const target = `${wx.env.USER_DATA_PATH}/${new Date().getTime()}.mp3`
let res = await this.getMenAuio(content)
let fileManager = uni.getFileSystemManager()
fileManager.writeFile({
filePath: target,
data: res.data,
encoding: 'binary',
success: (res) => {
wxAudio.src = target
}
})
}
//使用方式
let content = '要合成语音的文本'
this.doGetMenAuio(content, this.innerAudioContext)
// 监听在语音准备好后就可以开始播放
this.innerAudioContext.onCanplay((res) => {
_this.innerAudioContext.play()
});
uni-app 音频播放 post请求,播放二进制流
https://www.zhaojun.inkhttps://www.zhaojun.ink/archives/uni-app-audio