小程序 getBackgroundAudioManager

小程序弃用了audio组件,转而提供了2种音频播放的方式 :createInnerAudioContextgetBackgroundAudioManager

所区别的是
backgroundAudioManager 是 全局唯一的背景音频管理器

如果需要音乐类似QQ音乐那样,小程序在后台时,仍然在播放音乐 请使用 getBackgroundAudioManager 否则应该 使用普通音频API createInnerAudioContext

踩的坑
我在使用 getBackgroundAudioManager 的时候出现了2种错误。

  • setBackgroundAudioState:fail title is nil!;at api setBackgroundAudioState …
  • setBackgroundAudioState fail jsapi has no permission

对于第一个,需要我们设置几个属性(虽然我们可能用不上,但是必须要设置)

innerAudioContext.title = this.lyricTitle; //有值,但是不展示
innerAudioContext.singer = '暂无'; //有值,但是不展示
innerAudioContext.coverImgUrl = this.lyricCover; //有值,但是不展示
innerAudioContext.src = this.src; 

对于第二个,素我在使用 onPrev 和 onNext (iOS only)的时候出现的一个问题。
这里我在微信开放社区找到了答案 https://developers.weixin.qq.com/community/develop/doc/0000c82f83c2c85006199bd7a51c00

因为我在切换音乐的时候设置了 stop() 方法,只需要去除或者在 onPrev 的时候不执行就可以了。

innerAudioContext.onNext(()=>{
	console.log("下一首");
	this.changeAudio(2,true);
})
...
changeAudio(type,isIOS){
	if(!isIOS){ //ios 端后台播放,stop后会报错
	/* 清空当前内容 */
		this.innerAudioContext.src="1";   // 这里需要穿https 的路径
		this.innerAudioContext.title = '暂无'; //有值,但是不展示
		this.innerAudioContext.singer = '暂无'; //有值,但是不展示
		this.innerAudioContext.coverImgUrl = 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.jpg'; //有值,但是不展示
		this.innerAudioContext.stop();
		this.innerAudioContext.onStop(function(){
			console.log('停止播放');
		})
	}
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是uniapp小程序上传音频的步骤: 1.在页面中引入getBackgroundAudioManager API,用于录制和播放音频。 2.在页面中添加录音和上传音频的按钮,并为其绑定事件。 3.在录音按钮的事件处理函数中,调用getBackgroundAudioManager的startRecord方法开始录音。 4.在上传音频按钮的事件处理函数中,调用uni.uploadFile方法上传录音文件。 5.在上传成功的回调函数中,获取服务器返回的音频文件地址,并将其保存到页面数据中。 6.在页面中添加音频播放器,并为其设置src属性为保存的音频文件地址。 以下是示例代码: ```html <!--index.vue--> <template> <view class="container"> <button @tap="startRecord">开始录音</button> <button @tap="uploadAudio">上传音频</button> <audio :src="audioSrc" controls></audio> </view> </template> <script> export default { data() { return { audioSrc: '', // 音频文件地址 recorderManager: null // 录音管理器 } }, onLoad() { // 初始化录音管理器 this.recorderManager = uni.getRecorderManager() this.recorderManager.onStart(() => { console.log('录音开始') }) this.recorderManager.onStop(res => { console.log('录音结束', res) this.audioSrc = res.tempFilePath }) }, methods: { startRecord() { // 开始录音 this.recorderManager.start({ format: 'mp3' }) }, uploadAudio() { // 上传音频 uni.uploadFile({ url: 'https://example.com/upload', filePath: this.audioSrc, name: 'file', success: res => { console.log('上传成功', res) this.audioSrc = res.data // 保存音频文件地址 } }) } } } </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值