JianMiau/sheep
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增自动播放背景音乐功能

Browse Source
This commit is contained in:
Dxr 2022-09-21 21:04:38 +08:00
parent e8f95a4d4d
commit 679a7e4b66
4 changed files with 30 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -7,6 +7,12 @@
<title>鱼了个鱼</title>
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({id: "JonPnywkOzKkLXdw",ck: "JonPnywkOzKkLXdw"})</script>
<script type="text/javascript" src="/src/assets/musics/auto-music.js"></script>
<!-- 微信上进入页面是会自动播放的 其它浏览器打开需要触碰一下页面任意地方才会播放 -->
<div class="video_exist play_yinfu" id="audio_btn" style="display: block;z-index:999999;">
<div id="yinfu" class="rotate"></div>
<audio preload="auto" autoplay="autoplay" id="audio" src="/src/assets/musics/1.mp3" loop="loop"></audio>
</div>
</head>
<body>
<div id="app"></div>

BIN
src/assets/musics/1.mp3 Normal file
View File

Binary file not shown.

BIN
src/assets/musics/2.mp3 Normal file
View File

Binary file not shown.

24
src/assets/musics/auto-music.js Normal file
View File

@ -0,0 +1,24 @@
//--创建页面监听，等待微信端页面加载完毕 触发音频播放
document.addEventListener("DOMContentLoaded", function () {
function audioAutoPlay() {
var audio = document.getElementById("audio");
audio.play();
document.addEventListener(
"WeixinJSBridgeReady",
function () {
audio.play();
},
false
);
}
audioAutoPlay();
});
//--创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放
document.addEventListener("touchstart", function () {
function audioAutoPlay() {
var audio = document.getElementById("audio");
audio.play();
}
audioAutoPlay();
});