no message

pages/index/index.vue

@@ -2,7 +2,8 @@
 	<view class="index-box box-border-box flex-common-css" @click.stop="play()">
 		<view class="flex-justify-space box-border-box plr-32">
 			<image class="logo-img" src="@/static/img/c-logo.png" mode="scaleToFill"></image>
-			<image class="music-img" :class="isPlay?'music-anumation':''" src="@/static/img/c-music.png" mode="scaleToFill" @click.stop="musicPause()"></image>
+<!--			<image class="music-img" :class="isPlay?'music-anumation':''" src="@/static/img/c-music.png" mode="scaleToFill" @click.stop="musicPause()"></image>-->
+      <mumu-music musicSrc='https://jhxcnc.oss-cn-chengdu.aliyuncs.com/mp3/4272600974.mp3'></mumu-music>
 		</view>
 		<swiper class="swiper" :vertical='true' @change="swiperChange">
 			<!-- 邀请函 -->
@@ -193,27 +194,41 @@
 		},
 		methods: {
 			musicPlay() {
-				if (!this.audioServe) {
-					this.audioServe = uni.createInnerAudioContext();
-					this.audioServe.autoplay = true;
-					this.audioServe.loop = true;
-					this.audioServe.obeyMuteSwitch = true;
-					this.audioServe.src = 'https://jhxcnc.oss-cn-chengdu.aliyuncs.com/mp3/4272600974.mp3';
-				}
-				this.audioServe.play();
-				this.audioServe.onPlay(() => {
-					this.isPlay = true;
-					this.isAutoPlay = true
-				})
-
-			},
+				// if (!this.audioServe) {
+				// 	this.audioServe = uni.createInnerAudioContext();
+				// 	this.audioServe.autoplay = true;
+				// 	this.audioServe.loop = true;
+				// 	this.audioServe.obeyMuteSwitch = true;
+				// 	this.audioServe.src = 'https://jhxcnc.oss-cn-chengdu.aliyuncs.com/mp3/4272600974.mp3';
+				// }
+				// this.audioServe.play();
+				// this.audioServe.onPlay(() => {
+				// 	this.isPlay = true;
+				// 	this.isAutoPlay = true
+				// })
+
+        // 创建bgAudioManager对象
+//         const bgAudioManager = uni.getBackgroundAudioManager();
+//         bgAudioManager.src = 'https://jhxcnc.oss-cn-chengdu.aliyuncs.com/mp3/4272600974.mp3';
+// // 开始播放的回调函数
+//         bgAudioManager.onPlay(() => {
+//           console.log('开始播放');
+//         });
+// // 播放报错的事件监听
+//         bgAudioManager.onError((res) => {
+//           console.log(res.errMsg);
+//           console.log(res.errCode);
+//         });
+
+
+      },
 			play() {
-				if (!this.isPlay && this.audioServe) {
-					this.audioServe.play();
-					this.audioServe.onPlay(() => {
-						this.isPlay = true;
-						this.isAutoPlay = true
-					})
+				if (!this.isPlay && this.audioServe ) {
+					// this.audioServe.play();
+					// this.audioServe.onPlay(() => {
+					// 	this.isPlay = true;
+					// 	this.isAutoPlay = true
+					// })
 				}
 			},
 			musicPause() {

uni_modules/mumu-music/changelog.md

@@ -0,0 +1,2 @@
+## 2.0.0（2022-01-28）
+更新支持 uni_modules规范。修复部分手机无法自动播放

uni_modules/mumu-music/components/mumu-music/mumu-music.vue

@@ -0,0 +1,135 @@
+<template>
+	<view class="main" id="bgMusic">
+		<view class="icon" :class="{ran:status}" @click="musicChange">
+			<image src="@/static/img/c-music.png" mode="widthFix" :style="icon_style"></image>
+		</view>
+		<view class="musicPlay" @touchstart.stop="playTo" v-if="musicPlay"></view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			sizi: {
+				default: 60,
+				type: [Number, String]
+			},
+			autoplay: {
+				default: true,
+				type: Boolean
+			},
+			musicSrc: {
+				default: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',
+				type: String
+			}
+		},
+		data() {
+			return {
+				icon_style: {},
+				audioMusic: {},
+				status: false,
+
+				musicPlay: true
+			}
+		},
+		beforeDestroy() {
+			this.pauseTo()
+		},
+		mounted() {
+			this.icon_style = {
+				width: this.sizi + 'rpx',
+				height: this.sizi + 'rpx',
+			}
+			this.$nextTick()
+				.then(res => {
+					const audioMusic = uni.createInnerAudioContext()
+					audioMusic.loop = true
+					audioMusic.onPlay(() => {
+						this.status = true
+						this.musicPlay = false
+					})
+					audioMusic.onPause(() => {
+						this.status = false
+					})
+					audioMusic.onError(err => {
+						console.log(err)
+					})
+
+					audioMusic.src = this.musicSrc
+					this.audioMusic = audioMusic
+
+					if (!this.autoplay) return
+					setTimeout(() => {
+						if (typeof WeixinJSBridge == "undefined") return
+						WeixinJSBridge.invoke('getNetworkType', {}, e => {
+							this.playTo()
+						})
+					}, 500)
+
+				})
+		},
+		methods: {
+			playTo() {
+				this.audioMusic.play()
+			},
+			pauseTo() {
+				this.audioMusic.pause()
+			},
+			musicChange() {
+				const status = this.status
+				if (status) {
+					this.audioMusic.pause()
+				} else {
+					this.audioMusic.play()
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.icon {
+		position: fixed;
+		top: 50rpx;
+		right: 30rpx;
+		z-index: 999;
+	}
+
+	.ran {
+		image {
+			animation: turn 1s linear infinite;
+		}
+	}
+
+	@keyframes turn {
+		0% {
+			-webkit-transform: rotate(0deg);
+		}
+
+		25% {
+			-webkit-transform: rotate(90deg);
+		}
+
+		50% {
+			-webkit-transform: rotate(180deg);
+		}
+
+		75% {
+			-webkit-transform: rotate(270deg);
+		}
+
+		100% {
+			-webkit-transform: rotate(360deg);
+		}
+	}
+
+	.musicPlay {
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		right: 0;
+		left: 0;
+		background-color: rgba($color: #000000, $alpha: 0);
+		z-index: 9999;
+	}
+</style>

uni_modules/mumu-music/package.json

@@ -0,0 +1,82 @@
+{
+  "id": "mumu-music",
+  "displayName": "背景音乐自动播放。可以实现苹果、安卓的自动播放。可使用本地音乐",
+  "version": "2.0.0",
+  "description": "浏览器中打开页面自动播放音频，支持多页面。",
+  "keywords": [
+    "背景音乐",
+    "自动播放",
+    "音频"
+],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "category": [
+        "前端组件",
+        "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无 ",
+      "data": "无 ",
+      "permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "y",
+          "vue3": "y"
+        },
+        "App": {
+          "app-vue": "n",
+          "app-nvue": "n"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "n",
+          "阿里": "n",
+          "百度": "n",
+          "字节跳动": "n",
+          "QQ": "n"
+        },
+        "快应用": {
+          "华为": "n",
+          "联盟": "n"
+        }
+      }
+    }
+  }
+}

uni_modules/mumu-music/readme.md

@@ -0,0 +1,72 @@
+# 插件介绍
+
+## 插件原理
+
+> 在微信浏览器中打开会调用微信浏览器独有的 api ，此 api 会有一个回调事件，把播放音频的函数放在回调用可以欺骗浏览器以为是用户触发的事件，这样就可以实习播放打开自动播放。
+>
+> 当前部分浏览器开始检测到微信的回调，检测到后就会判断出不是用户触发的事件，导致部分手机无法自动播放了。解决办法就是在用户打开页面的时候在页面上放置一层透明的元素，只要用户手指触摸或者滑动到屏幕就会调用播放音频。
+
+## 使用环境
+
+**本插件只支持H5平台**
+
+## 插件使用
+
+**插件已支持 uni_modules 支持组件easycom，以下代码演示的是普通使用**
+
+**改变图片与位置直接去修改源码即可，就懒得写props了**
+
+### 单页面使用
+
+单页面使用比较简单，直接导入注册即可
+
+``` html
+<!-- HTML -->
+<!-- musicSrc 传入音频链接，本地文件需要已根目录开头传递。如：/static/music.mp3 -->
+<mumu-music musicSrc='https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3'></mumu-music>
+```
+
+``` js
+// js
+import mumuMusic from '@/uni_modules/mumu-music/components/mumu-music/mumu-music.vue'
+	export default {
+		components: {
+			mumuMusic
+		}
+  }
+```
+
+### 多页面使用
+
+应无法在 App.vue 中直接写入元素，只有另辟蹊径在 main.js 中进行注册，使用 js 代码追加到 body 中。
+
+``` js
+// main.js 中的代码
+import mumuMusic from '@/uni_modules/mumu-music/components/mumu-music/mumu-music.vue'
+// Vue.component 需要放在导入 Vue 之后即可。 Vue3同理
+let mumuMusicEl = Vue.component('mumu-music', mumuMusic)
+mumuMusicEl = new mumuMusicEl()
+// musicSrc 传入音频链接,本地文件没有试过，大家可以试试
+mumuMusicEl.$props.musicSrc='https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3'
+mumuMusicEl = mumuMusicEl.$mount().$el
+document.body.appendChild(mumuMusicEl)
+
+```
+
+## 相关 API
+
+### 可传属性（Props）
+
+| 参数     | 说明                         | 类型             | 默认值         |
+| -------- | ---------------------------- | ---------------- | -------------- |
+| sizi     | 图标大小（rpx）              | Number \| String | 80             |
+| musicSrc | 音频链接（本地需要绝对路径） | String           | 默认的音频链接 |
+| autoplay | 是否自动播放                 | Boolean          | true           |
+
+## 案例演示
+
+![img](https://h5plugin.mumudev.top/public/music/qrcode.png)
+
+## 支持作者
+
+![支持作者](https://student.mumudev.top/wxMP.jpg)