no message

pages/index/index.vue

@@ -2,8 +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>-->
-      <mumu-music musicSrc='https://jhxcnc.oss-cn-chengdu.aliyuncs.com/mp3/4272600974.mp3'></mumu-music>
+			<image class="music-img" v-if="!isIos" :class="isPlay?'music-anumation':'music-anumation'" src="@/static/img/c-music.png" mode="scaleToFill" @click.stop="musicPause()"></image>
+      <mumu-music v-else ref="musicObj" musicSrc='https://jhxcnc.oss-cn-chengdu.aliyuncs.com/mp3/4272600974.mp3'></mumu-music>
 		</view>
 		<swiper class="swiper" :vertical='true' @change="swiperChange">
 			<!-- 邀请函 -->
@@ -14,7 +14,7 @@
 					<view class="fs-48 fc-f text-align-center mb-16 wow animate__animated animate__bounceInLeft">
 						振合网科技集团实体联盟</view>
 					<view class="fs-32 fc-f text-align-center mb-72 wow animate__animated animate__bounceInRight">未来已来
-						一触即发</view>
+						一触即发1</view>
 					<image class="img-xian wow animate__animated animate__bounceInUp" src="@/static/img/xian.png"
 						mode="scaleToFill"></image>
 					<image class="name-text wow animate__animated animate__bounceInLeft"
@@ -161,6 +161,7 @@
 	} from '@/api/user.js';
 	import tools from "@/service/tools";
 	import wxJs from "jweixin-module"
+  import { useBgMusic } from '@/uni_modules/y-bg-music/js_sdk';
 	export default {
 		components: {},
 		data() {
@@ -179,6 +180,7 @@
 				audioServe: undefined,
 				isPlay: false,
 				isAutoPlay: false,
+				isIos: true,
 			}
 		},
 		onshow() {
@@ -190,7 +192,18 @@
 			if (isWeiXin) {
 				this.getJsConfig()
 			}
-			this.musicPlay()
+      const isiOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+      this.isIos=isiOS
+      if (isiOS) {
+        console.log('This is an iOS device');
+      } else {
+        this.audioServe = useBgMusic({
+          src: './static/mp3/4272600974.mp3',
+          loop: 999,      // 循环次数
+          controls:false   // 显示右上角控制元素
+        });
+      }
+
 		},
 		methods: {
 			musicPlay() {
@@ -232,12 +245,12 @@
 				}
 			},
 			musicPause() {
-				if (this.audioServe) {
-					this.audioServe.pause();
-					this.audioServe.onPause(() => {
-						this.isPlay = false;
-					});
-				}
+				// if (this.audioServe) {
+				// 	this.audioServe.pause();
+				// 	this.audioServe.onPause(() => {
+				// 		this.isPlay = false;
+				// 	});
+				// }
 
 			},
 			getJsConfig() {
@@ -256,6 +269,7 @@
 							jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
 						})
 						wxJs.ready(() => {
+
 							//自定义“分享给朋友”
 							// this.musicPlay()
 							wxJs.updateAppMessageShareData({
@@ -277,6 +291,11 @@
 									// 设置成功
 								}
 							})
+              if(this.audioServe){
+                this.audioServe.play();
+              }else if (!this.isIos){
+                this.$refs.musicObj.playTo()
+              }
 						});
 					}
 				})

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

@@ -70,6 +70,7 @@
 		},
 		methods: {
 			playTo() {
+        console.log('playTo:aaaaaaaaaaaaaaaaaaaa')
 				this.audioMusic.play()
 			},
 			pauseTo() {

uni_modules/y-bg-music/changelog.md

@@ -0,0 +1,7 @@
+## 1.0.2（2024-09-27）
+【新增】触摸任意位置自动播放，用于弥补“非微信内置浏览器”无法自动播放的问题
+## 1.0.1（2024-09-10）
+[修复] 解决类型报错问题
+[新增] 兼容Vue2
+## 1.0.0（2024-09-10）
+第一个版本

uni_modules/y-bg-music/js_sdk/index.ts

@@ -0,0 +1,131 @@
+import './style.scss'
+
+
+type PLAY_STATE = 'play' | 'pause';
+
+// soundjs loader
+const script = document.createElement('script');
+script.src = 'https://cdn.bootcdn.net/ajax/libs/SoundJS/1.0.2/soundjs.min.js';
+script.type = 'text/javascript';
+
+// 控制按钮
+const musicSvgImg = '<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" width="36px" height="36px" fill="#fff">    <path d="M 11 3 L 11 4 L 11 8 L 11 14.541016 A 4 4 0 0 0 9 14 A 4 4 0 0 0 5 18 A 4 4 0 0 0 9 22 A 4 4 0 0 0 13 18 L 13 8 L 19 8 L 19 3 L 11 3 z"/></svg>'
+const controlsDom = document.createElement('div');
+controlsDom.className = 'y-bg-music-controls';
+controlsDom.innerHTML = musicSvgImg
+
+type BgMusicOptions = {
+    /** 音频文件 mp3 */
+    src: string,
+    /** 循环次数，默认 999 */
+    loop?: number
+    /** 控制按钮 */
+    controls?: boolean
+}
+
+export const useBgMusic = (options: BgMusicOptions) => {
+    if (typeof options.controls === 'undefined') {
+        options.controls = true;
+    }
+
+    if (typeof options.loop === 'undefined') {
+        options.loop = 999;
+    }
+
+    let musicLoadComplete = false;
+    let musicInstance: any = null;
+
+    // 动态加载音频库
+    script.onload = () => {
+        // 注册音频加载完成事件
+        createjs.Sound.alternateExtensions = ['mp3'];
+        createjs.Sound.on('fileload', () => {
+            musicLoadComplete = true;
+        }, window);
+
+        // 注册音频
+        createjs.Sound.registerSound(options.src, 'sound');
+    }
+    // 预防重复加载
+    if (script.parentElement === null) {
+        document.body.appendChild(script);
+    }
+    if (controlsDom.parentElement === null) {
+        document.body.appendChild(controlsDom);
+
+        if (options.controls) {
+            controlsDom.classList.add('y-bg-music-controls__show');
+
+            controlsDom.onclick = () => {
+                if (getState() === 'play') {
+                    pause();
+                } else {
+                    play();
+                }
+            }
+        }
+    }
+
+    // 触摸自动播放
+    document.addEventListener('touchend', () => {
+        play();
+    }, { once: true });
+
+    /** 获取播放状态 */
+    function getState():PLAY_STATE {
+        if (!musicInstance) { 
+            return 'pause';
+        }
+
+        return musicInstance.paused ? 'pause' : 'play';
+    }
+
+    /**
+     * 播放
+     * 
+     * 请放到 wx.ready 回调中调用
+     */
+    function play() {
+        // 存在音频实例，直接恢复播放
+        if (musicInstance) {
+            musicInstance.paused = false;
+            controlsDom.classList.add('y-bg-music-controls__player');
+            return;
+        }
+
+        // 不存在音频实例，等待音频加载完成后播放
+        const timer = setInterval(() => {
+            if (window.createjs && musicLoadComplete) {
+                clearInterval(timer);
+                musicInstance = createjs.Sound.play('sound');
+                musicInstance.loop = options.loop;
+                controlsDom.classList.add('y-bg-music-controls__player');
+            }
+        }, 300);
+    }
+
+    /**
+     * 暂停
+     */
+    function pause() {
+        musicInstance.paused = true
+        controlsDom.classList.remove('y-bg-music-controls__player');
+
+    }
+
+    /**
+     * 销毁
+     */
+    function destroy() {
+        musicInstance.stop();
+        musicInstance = null;
+        controlsDom.classList.remove('y-bg-music-controls__show');
+    }
+
+    return {
+        getState,
+        play,
+        pause,
+        destroy
+    }
+}

uni_modules/y-bg-music/js_sdk/style.scss

@@ -0,0 +1,40 @@
+.y-bg-music-controls {
+    --y-bg-music-controls-size: 80rpx;
+
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s;
+
+    position: fixed;
+    right: 20rpx;
+    top: 200rpx;
+    width: var(--y-bg-music-controls-size);
+    height: var(--y-bg-music-controls-size);
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.25);
+    backdrop-filter: blur(9rpx);
+    -webkit-backdrop-filter: blur(9rpx);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+
+    &__show {
+        opacity: 1;
+        pointer-events: auto;
+    }
+
+    &__player {
+        animation: y-bg-music-rotate 3s linear infinite;
+    }
+}
+
+// 关键帧 旋转动画
+@keyframes y-bg-music-rotate {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

uni_modules/y-bg-music/js_sdk/type.d.ts

@@ -0,0 +1 @@
+declare var createjs:any;

uni_modules/y-bg-music/package.json

@@ -0,0 +1,85 @@
+{
+  "id": "y-bg-music",
+  "displayName": "微信H5自动播放背景音乐，无需触摸点击",
+  "version": "1.0.2",
+  "description": "使用微信内置浏览器打开，背景音乐将自动播放，无需人为干预",
+  "keywords": [
+    "y-bg-music",
+    "自动播放背景音乐",
+    "自动播放音乐"
+],
+  "repository": "https://github.com/edk24/y-components",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "type": "sdk-js",
+    "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",
+        "alipay": "y"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "y",
+          "vue3": "y"
+        },
+        "App": {
+          "app-vue": "n",
+          "app-nvue": "n",
+          "app-uvue": "n"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "n",
+          "IE": "n",
+          "Edge": "n",
+          "Firefox": "n",
+          "Safari": "n"
+        },
+        "小程序": {
+          "微信": "n",
+          "阿里": "n",
+          "百度": "n",
+          "字节跳动": "n",
+          "QQ": "n",
+          "钉钉": "n",
+          "快手": "n",
+          "飞书": "n",
+          "京东": "n"
+        },
+        "快应用": {
+          "华为": "n",
+          "联盟": "u"
+        }
+      }
+    }
+  }
+}

uni_modules/y-bg-music/readme.md

@@ -0,0 +1,61 @@
+# y-bg-music 自动播放背景音乐
+
+仅微信内置浏览器支持，进入页面自动播放。无需“触摸、点击”之类的操作。
+
+使用简单
+
+## 演示效果
+
+![alt text](https://y-components.edk24.com/static/y-bg-music/demo.png)
+
+使用微信扫一扫查看效果
+
+## 使用
+
+**Vue2将下述代码放到首页 onLoad 中即可**
+
+```vue
+<script lang="ts" setup>
+import weixin from 'weixin-js-sdk'; // npm install weixin-js-sdk
+import { useBgMusic } from '@/uni_modules/y-bg-music/js_sdk';
+
+
+const bgmusic = useBgMusic({
+    src: 'https://superzdd.github.io/wechat-h5-backgound-music-survey/bgmusic.mp3',
+    loop: 999,      // 循环次数
+    controls:true   // 显示右上角控制元素
+});
+
+
+// 留空也要调用一下，否则无法自动播放
+weixin.config({
+    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
+    appId: '', // 必填，公众号的唯一标识
+    timestamp: 0, // 必填，生成签名的时间戳
+    nonceStr: '', // 必填，生成签名的随机串
+    signature: '', // 必填，签名，见附录1
+    jsApiList: [ ]
+});
+
+weixin.ready(() => {
+    bgmusic.play(); // 播放～
+});
+</script>
+```
+
+## 常见问题
+
+1. 播放控制元素太丑
+    
+    答：可以隐藏的，然后自己写一个替代。
+
+## 参考
+
+技术实现思路来自 [superzdd](https://github.com/superzdd) 大佬的开源仓库 [微信端H5背景音乐自动播放研究](https://github.com/superzdd/wechat-h5-backgound-music-survey)
+
+## 意见反馈、联系我
+
+绿泡泡：Base1024
+
+![wx](https://y-components.edk24.com/static/y-bg-music/wx-qrcode.jpg)
+