在我们做很多项目的时候,总会有需要给页面添加背景音乐的需求,在移动端呢,需要同时考虑到Android系统和iOS系统是否可以播放,以下代码音频播放代码可以完美的兼容Android和iOS系统,本人亲测有效。
html:
<div class="music-btn music-icon"></div>//设置音乐图标
<audio id="bg-music" loop="loop" preload="auto" src="d003_Bit_Bit_Loop.mp3" style="display:none; height: 0;"></audio>//音乐播放
css:
/*音乐*/
.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");
}
js:
// 背景音乐
// 点击音乐图标播放与暂停
$('.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");
}
}
}
如有问题或者错误,欢迎留言,谢谢~