网页添加背景音乐
<div style=" position: fixed; top: 35%;background:rgb(255 255 255 / 50%); color: black; border-radius: 200px; padding: 3px 11px; font-size: 2px; right:8px; ">
<p class="close_music_div"><i onclick="pauseAuto()" class="f85" style="color: white;font-style: normal;">关闭<br />音乐</i></p>
<p class="open_music_div" style="display: none"><i onclick="openmusic()" class="f85" style="color: white;font-style: normal;">开启<br />音乐</i></p>
<audio style="display:none; height: 0" id="bg-music" preload="auto" src="static/images/music.mp3" loop="loop"></audio>
<script>
//音乐自动播放
$(document).ready(function(){
autoPlayMusic();
audioAutoPlay();
});
function openmusic(){
autoPlayMusic();
audioAutoPlay();
$(".close_music_div").css({"display":"block"});
$(".open_music_div").css({"display":"none"});
}
function pauseAuto(){
var audio = document.getElementById('bg-music');
audio.pause();
$(".close_music_div").css({"display":"none"});
$(".open_music_div").css({"display":"block"});
}
function audioAutoPlay() {
var audio = document.getElementById('bg-music');
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
audio.play();
}, false);
}
// 音乐播放
function autoPlayMusic() {
// 自动播放音乐效果,解决浏览器或者APP自动播放问题
function musicInBrowserHandler() {
musicPlay(true);
document.body.removeEventListener('touchstart', musicInBrowserHandler);
}
document.body.addEventListener('touchstart', musicInBrowserHandler);
// 自动播放音乐效果,解决微信自动播放问题
function musicInWeixinHandler() {
musicPlay(true);
document.addEventListener("WeixinJSBridgeReady", function () {
musicPlay(true);
}, false);
document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
}
document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
}
function musicPlay(isPlay) {
var media = document.querySelector('#bg-music');
if (isPlay && media.paused) {
media.play();
}
if (!isPlay && !media.paused) {
media.pause();
}
}
</script>
</div>版权保护: 转载请保留链接: https://cgy.isi8.cn/js/261.html
- 上一篇:微信网页隐藏复制链接
- 下一篇:好多粉推广埋码
