uniapp android 使用视频播放组件 uniapp播放音乐

转载

架构思维大师 2024-05-10 11:58:43

文章标签 小程序开发者工具播放音乐 App 文章分类 Android 移动开发

需求

uniapp前端项目需要使用背景模式播放音乐，此模式的特点是：当手机熄屏之后、或者App在后台时，音乐还会继续播放！所以非常适合播放音乐及朗读、朗诵文章、古诗之类长时间音频需求。

html5里面有个audio可以播放音乐，但现在小程序里面已经弃用了。应该还是平台差异造成的，毕竟电脑和手机不同。用还是能用，但开发者工具会不断的警告：

'<audio/>' 组件不再维护，建议使用能力更强的 'wx.createInnerAudioContext' 接口

这种情况下，在uniapp中就需要使用uni.getBackgroundAudioManager()来获取背景播放对象。

如果不需要在App切后台时继续播放，应该使用普通音频APIuni.createInnerAudioContext。

getBackgroundAudioManager文档

https://uniapp.dcloud.io/api/media/background-audio-manager?id=getbackgroundaudiomanager

如何使用

与普通播放不同的是，背景播放需要更多的配置。

在manifest.json中对应的小程序位置添加代码，我只是开发微信小程序，所以就只需要在mp-weixin节点下添加。

"requiredBackgroundModes" : ["audio"],

注：要点击源码视图才可以添加代码！

uniapp android 使用视频播放组件 uniapp播放音乐_开发者工具

本着偷懒的原则，直接修改了一个uniapp插件市场中的luch-audio，把innerAudioContext直接改成getBackgroundAudioManager。

let innerAudioContext = uni.getBackgroundAudioManager();

一跑就出问题了，说src无法赋值，添加判断代码后不出错了，但没有声音播放，看官方的文档，是需要个title的，果然添加之后能够播放了，但：

切换src的时候需要等大概20秒后才会出声音，怎么调整都不成，另外的两个属性值：coverImageUrl, singer如果添加了会出更多错误。

最后直接上真机调试，一切正常了。思考了下为什么要添加title呢？大概率背景播放的时候是会显示在手机下拉列表中的，有标题的话会更清晰。（欢迎指正）

官方示例：

const bgAudioManager = uni.getBackgroundAudioManager();
bgAudioManager.title = '致爱丽丝';
bgAudioManager.singer = '暂无';
bgAudioManager.coverImgUrl = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png';
bgAudioManager.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';