当前位置：网站首页>uni-app 背景音频 熄屏或者退回桌面之后不在播放

uni-app 背景音频 熄屏或者退回桌面之后不在播放

2022-07-24 13:44:00 【一个博客】

解决办法：下载安卓原生插件 ，并在离线打包中配置前台服务配置

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 提取码：7zbd
背景音频的封装： audioUtils.js 提取码：xtyy

4、使用

（1）在app.vue 里面调用初始化的方法

			this.$mc.init({
    
				//点击通知栏跳转页面
				path: '/pages/story/storyDetails.vue',
				//设置状态栏小图标，只有 android 8.0 以上才有效
				icon: '/static/image/logo.png',
			})

（2）main.js 中全局定义 背景音频

//背景音频
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"/>

在这里插入图片描述

原网站

版权声明
本文为[一个博客]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_45784582/article/details/125899816

边栏推荐

猜你喜欢

随机推荐