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
作者
卑微幻想家
发布于
2023-03-30
许可协议