建站技术分享网
/*音乐*/
.music-btn{
width: 0.4rem;
height: 0.4rem;
position: fixed;
top: 0.15rem;
left: 0.15rem;
background-size: 100% 100%;
z-index: 1;
}
.music-icon{
background-image: url("../img/play.png");
}
.pause{
background-image: url("../img/pause.png");
}
</style>
<div class="music-btn music-icon"></div>
<audio id="bg-music" loop="loop" preload="auto" src="/static/images/alittestory.mp3" style="display:none; height: 0;"></audio>
<script>
// 背景音乐
// 点击音乐图标播放与暂停
$('.music-btn').click(function () {
bf();
})
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();
}
}
function bf() {
var audio = document.getElementById('bg-music');
if (audio !== null) {
if (audio.paused) {
audio.play();
$('.music-btn').addClass("music-icon");
$('.music-btn').removeClass("pause");
} else {
audio.pause();
$('.music-btn').removeClass("music-icon");
$('.music-btn').addClass("pause");
}
}
}
</script>
×
打赏作者
感谢您的支持，我们会一直保持!
请土豪扫码随意打赏
打开支付宝扫一扫，即可进行扫码打赏哦
分享从这里开始，精彩与您同在
版权所有，转载注意明处：FEIBA分享博客 » 兼容电脑端移动端苹果端和安卓端网页加入背景音乐
发表评论