Quellcode durchsuchen

Merge branch 'master' of http://git.jhcs888.com/zpj/zh-new-promotion

# Conflicts:
#	pages/index/index.vue
zpj vor 2 Jahren
Ursprung
Commit
5655f7af38

+ 64 - 29
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" 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">
 			<!-- 邀请函 -->
@@ -201,6 +202,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() {
@@ -219,6 +221,7 @@
 				audioServe: undefined,
 				isPlay: false,
 				isAutoPlay: false,
+				isIos: true,
 			}
 		},
 		onshow() {
@@ -231,39 +234,64 @@
 				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() {
-				if (!this.audioServe) {
-					this.audioServe = uni.createInnerAudioContext();
-					this.audioServe.autoplay = true;
-					this.audioServe.loop = true;
-					this.audioServe.obeyMuteSwitch = true;
-					this.audioServe.src = 'https://jhnewshop.oss-cn-chengdu.aliyuncs.com/RockHouseJail.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() {
-				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() {
@@ -282,12 +310,13 @@
 							jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
 						})
 						wxJs.ready(() => {
+
 							//自定义“分享给朋友”
 							// this.musicPlay()
 							wxJs.updateAppMessageShareData({
                 title: '振合网“实体联盟”招商说明会-邀请函',
                 desc: '10月20日我们不见不散!',
-								link: "https://enroll.jhcs888.com/#/", // 分享链接,该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
+								link: "https://enroll.jhcs888.com", // 分享链接,该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
 								imgUrl: 'https://jhnewshop.oss-cn-chengdu.aliyuncs.com/storage/attest/20210927/949e48fb7c286836097efdd4ba4d0bd9.jpg', // 分享图标
 								success: function() {
 									// 设置成功
@@ -297,12 +326,17 @@
 							wxJs.updateTimelineShareData({
                 title: '振合网“实体联盟”招商说明会-邀请函',
                 desc: '10月20日我们不见不散!',
-								link: "https://enroll.jhcs888.com/#/", // 分享链接,该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
+								link: "https://enroll.jhcs888.com", // 分享链接,该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
 								imgUrl: 'https://jhnewshop.oss-cn-chengdu.aliyuncs.com/storage/attest/20210927/949e48fb7c286836097efdd4ba4d0bd9.jpg', // 分享图标
 								success: function() {
 									// 设置成功
 								}
 							})
+              if(this.audioServe){
+                this.audioServe.play();
+              }else if (!this.isIos){
+                this.$refs.musicObj.playTo()
+              }
 						});
 					}
 				})
@@ -314,6 +348,7 @@
 			},
 
 			swiperChange(e) {
+        console.log('aaaaaaaaaaaaaaaaaaaaaaaaaaaa')
 				this.play()
 				if (e.detail.current != this.index) {
 					this.index = e.detail.current;

BIN
static/mp3/4272600974.mp3


+ 2 - 0
uni_modules/mumu-music/changelog.md

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

+ 136 - 0
uni_modules/mumu-music/components/mumu-music/mumu-music.vue

@@ -0,0 +1,136 @@
+<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() {
+        console.log('playTo:aaaaaaaaaaaaaaaaaaaa')
+				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>

BIN
uni_modules/mumu-music/components/mumu-music/music.png


+ 82 - 0
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"
+        }
+      }
+    }
+  }
+}

+ 72 - 0
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)

+ 7 - 0
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)
+第一个版本

+ 131 - 0
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
+    }
+}

+ 40 - 0
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);
+    }
+}

+ 1 - 0
uni_modules/y-bg-music/js_sdk/type.d.ts

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

+ 85 - 0
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"
+        }
+      }
+    }
+  }
+}

+ 61 - 0
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)
+