uni-app 背景音频 熄屏或者退回桌面之后不在播放
uni-app 背景音频 熄屏或者退回桌面之后不在播放
·
解决办法：下载安卓原生插件 ，并在离线打包中配置前台服务配置
1、将插件导入到HBuilder X中
2、manifest.json中配置如下
"nativePlugins" : {
"XZH-musicNotification" : {
"page" : "page/story/storyDetails",
"favour" : "false",
"themeColor" : "#ffffff",
"titleColor" : "#ffffff",
"artistColor" : "#ffffff",
"__plugin_info__" : {
"name" : "XZH-musicNotification",
"description" : "Android音乐通知栏",
"platforms" : "Android",
"url" : "",
"android_package_name" : "",
"ios_bundle_id" : "",
"isCloud" : false,
"bought" : -1,
"pid" : "",
"parameters" : {
"page" : {
"des" : "页面路径（如：pages/*/*）",
"key" : "xzh_page",
"value" : ""
},
"favour" : {
"des" : "是否开启收藏按钮",
"key" : "xzh_favour",
"value" : ""
},
"themeColor" : {
"des" : "widget背景色(请使用 ARGB 格式)",
"key" : "xzh_theme_color",
"value" : ""
},
"titleColor" : {
"des" : "widget歌名字体色(请使用 ARGB 格式)",
"key" : "xzh_title_color",
"value" : ""
},
"artistColor" : {
"des" : "widget歌手字体色(请使用 ARGB 格式)",
"key" : "xzh_artist_color",
"value" : ""
}
}
}
}
}
3、封装 JS 调用的方法
播放器调用代码的封装： musicNotification.js 提取码：3146
背景音频的封装： audioUtils.js 提取码：3146
4、使用
（1）在app.vue 里面调用初始化的方法
this.$mc.init({
//点击通知栏跳转页面
path: '/pages/story/storyDetails.vue',
//设置状态栏小图标，只有 android 8.0 以上才有效
icon: '/static/image/logo.png',
})
（2）main.js 中全局定义 背景音频
//安卓原生插件的js逻辑
import music from '@/utils/musicNotification.js'
Vue.prototype.$mc = music;
//背景音频
import audioUtils from './utils/audioUtils.js'
Vue.prototype.$audioUtils = audioUtils;
（3）需要用到播放器的页面，进行创建生成
import music from '@/utils/musicNotification.js'
data() {
return {
isInitPlay:false,
audio:null,
isLockActivity:false,
}
}，
onLoad() {
//有问题哈，这个背景音频的方法在其他页面使用了也会执行,所以需要加个判断是否是当前页面
let currentRoutes = getCurrentPages(); // 获取当前打开过的页面路由数组
let currentRoute = currentRoutes[currentRoutes.length - 1].route //获取当前页面路由
if (currentRoute == "pages/story/storyDetails") {
this.isaudio=true;
}
//判断用户是否前往设置通知权限 在返回后重新设置故事信息
if(uni.getStorageSync("musicIsUpdata")==1){
this.updataInfoX(this.storyList[this.current])
uni.setStorageSync("musicIsUpdata",0)
}
this.audio=this.$audioUtils.initContext();//获取封装的背景音频
}，
onUnload() {
this.isaudio=false;
let timer=setTimeout(function(){
// 添加移除 播放器
plus.globalEvent.removeEventListener('musicNotificationPause')
uni.removeStorageSync("createMusic");
music.playOrPause(JSON.parse(false))
music.cancel();
clearTimeout(timer)
},300)
},
mounted(){
let _this=this;
//切换下一首
plus.globalEvent.addEventListener('musicNotificationNext', function(e) {
_this.onNext();
music.playOrPause(JSON.parse(true));
});
//切换上一首
plus.globalEvent.addEventListener('musicNotificationPrevious', function(e) {
_this.onPre();
music.playOrPause(JSON.parse(true));
});
//暂停与播放
plus.globalEvent.addEventListener('musicNotificationPause', function(e) {
_this.onSwitch()
});
//音频进入可以播放状态
this.audio.onCanplay(function(e){
if(this.isaudio){
this.timeLength=Math.floor(_this.audio.duration)
if(this.isHide){
//更新音频播放
this.Notification()
}
}
})
}，
onHide() {
this.isHide=true;
//显示音频播放器
this.Notification();
},
methods:{
// 提示用户给予通知权限
updataInfo(storyInfo){
let Info=storyInfo;
let res = music.update({
songName: Info.title,
favour: false, //这里我写死，
picUrl: Info.img_url
});
switch (res.code) {
case -1: //未知错误
return;
case -2: //没有权限
uni.showModal({
title: '开启通知说明',
cancelText:"前往设置",
confirmText:"本次忽略",
content: '尊敬的用户您好,应用需要开启通知以保证程序在后台能够正常运行。如果您选择不开启,应用在后台一段时间将被系统回收,导致播放中断,强烈建议您开启!(忽略后下次启动可继续在此页面点击前往设置)',
success: function (res) {
if (res.confirm) {
} else if (res.cancel) {
music.openPermissionSetting(); //没有权限，跳转设置页面
uni.setStorageSync("musicIsUpdata",1)
}
}
});
return;
}
},
// 更新通知信息
updataInfoX(storyInfo){
let res = music.update({
songName: storyInfo.title,
favour: false, //这里我写死，
picUrl: storyInfo.img_url
});
console.log(res)
switch (res.code) {
case -1: //未知错误
return;
case -2: //没有权限
return;
}
},
Notification(){
if(this.isHide){
if(this.isInitPlay){
this.updataInfoX(this.storyList[this.current])
}else{
let storyList=this.storyList[this.current]
music.createNotification(res=>{
this.updataInfo(storyList)
music.playOrPause(JSON.parse(true))
this.isInitPlay=true
})
}
}
},
lockActivity(){
// 设置锁屏页，同时返回授权状态
if (!music.openLockActivity({
lock: !this.isLockActivity
})) {
// 没有权限，弹出一个对话框
uni.showModal({
content: 'android 10 以上需要开启悬浮窗权限才能打开锁屏页',
success: (res) => {
if (res.confirm) {
// 用户点击确定，注册授权监听
plus.globalEvent.addEventListener('openLockActivity', ({
type
}) => {
if (type) {
// 获得悬浮窗权限，重新设置锁屏页
this.lockActivity()
}
// 注销授权监听
plus.globalEvent.removeEventListener('openLockActivity');
});
/**
* 没有悬浮窗权限，跳转设置页面
* android 10 以上没有这权限打不开锁屏页
*/
music.openOverlaySetting();
}
}
});
} else {
// 有权限，就修改前端状态
this.isLockActivity = !this.isLockActivity;
}
},
}
5、离线打包中的配置
1、在AndroidManifest.xml里面配置三个权限
<!-- 允许程序快捷方式的创建应用-->
<uses-permission android:name="android.permission.INSTALL_SHORTCUT"/>
<!-- 允许程序在手机屏幕关闭后后台进程仍然运行-->
<uses-permission android:name="android.permission.WAKE_LOCK"/>
<!-- 前台服务的权限-->
<uses-permission android:name="android.permission.FOREGROUND_SERVICE"/>
2、dcloud_uniplugins.json：集成的信息
{
"nativePlugins": [
{
"integrateType": "aar",
"compileOptions": {
"sourceCompatibility": "1.8",
"targetCompatibility": "1.8"
},
"plugins": [{
"type": "module",
"name": "XZH-musicNotification",
"class": "com.xzh.musicnotification.MusicNotificationModule"
}]
}
]
}
3、导入音频播放器的 musicNotification-release.aar 压缩文件
4、在AndroidManifest.xml里面配置参数
<meta-data
android:name="xzh_favour"
android:value="true"/>
<meta-data
android:name="xzh_theme_color"
android:value="#55000000"/>
<meta-data
android:name="xzh_title_color"
android:value="#ffffff"/>
<meta-data
android:name="xzh_artist_color"
android:value="#ffffff"/>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
0
0- 0
已为社区贡献5条内容
所有评论(0)