定义音乐按钮
<div id="music-btn" class="o-play" style="width: 24px; height: 24px; display: block; position: absolute; top: 12px; right: 12px; z-index: 9999; background: url(images/musicbtn.png) no-repeat center/cover;"></div>
音乐
<audio id="o-music" src="img/bg.mp3" class="muisc" preload="preload" autoplay="autoplay" loop="loop"></audio>
src 属性规定要播放的视频的 URL
preload 属性规定是否在页面加载后载入视频。如果设置了 autoplay 属性,则忽略该属性。
loop 属性规定当视频结束后将重新开始播放。设置该属性,则视频将循环播放。
autoplay 属性设置为自动播放的 video 元素: autoplay 属性规定一旦视频就绪马上开始播放。
js文件
<script type="text/javascript">
ios自动播放
function audioAutoPlay(id){
var audio = document.getElementById(id),
play = function(){
audio.play();
document.removeEventListener("touchstart",play, false);
};
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
play();
}, false);
document.addEventListener('YixinJSBridgeReady', function() {
play();
}, false);
document.addEventListener("touchstart",play, false);
}
audioAutoPlay('o-music');
音乐按钮
$('#music-btn').on('click', function(){
if(!document.querySelector('#o-music').paused){
document.querySelector('#o-music').pause();
$(this).removeClass('o-play');
}else{
document.querySelector('#o-music').play();
$(this).addClass('o-play');
}
});
//禁止安卓手机图片点击
for(var i=0; i<document.querySelectorAll('img').length; i++){
document.querySelectorAll('img')[i].addEventListener('click', function(e){
e.preventDefault();
})
}
</script>