现在的活动h5基本都会有bgm的需求,下面提供一个通用的做法。
上面是开关的按钮,页面刚加载进来的时候,音乐是自动播放的。点击开关按钮可以控制音乐的播放和暂停。
产品:需求很简单,怎么实现我不管!
开发:好!那我给你来个五彩斑斓的黑
html:
<!--背景音乐-->
<audio id="music" loop="loop" style="display: none;"></audio>
<!--音乐按钮-->
<div id="btn-music" >
<img src="images/btn_music_on.png" alt="" id="btn-music-on" />
<img src="images/btn_music_off.png" alt="" id="btn-music-off" class="hide" />
</div>
样式根据自己的需要来吧。
看看js:
var c = document.getElementById("music");
c.src = "./mp4/bgm.mp3";
c.play();
//处理微信的时候
document.addEventListener("WeixinJSBridgeReady", function(){
if(typeof WeixinJSBridge == "object"){
WeixinJSBridge.invoke("getNetworkType", {}, function(j){
c.play();
})
}
});
music_state = 1;
//音乐按钮
$("#btn-music").on("click", function(){
if(music_state){
c.pause();
music_state = 0;
$("#btn-music-off").removeClass("hide");
$("#btn-music-on").addClass("hide");
}else{
c.play();
music_state = 1;
$("#btn-music-on").removeClass("hide");
$("#btn-music-off").addClass("hide");
}
});