<html>
<head>
<title>按钮控制播放音乐</title>
<script src="http://wuover.qiniudn.com/jquery.js"></script>
</head>
<style type="text/css">
.pause {background-position: 0 bottom;}
.mscBtn {height: 50px;
background: #fff url(http://cctv2.qiniudn.com/musicbtn.png) no-repeat;
display: block;}
</style>
<script type="text/javascript">
$(function(){
var music = document.getElementById("bgMusic");
$("#audioBtn").click(function(){
if(music.paused){music.play();
$("#audioBtn").removeClass("pause").addClass("play");
}else{music.pause();
$("#audioBtn").removeClass("play").addClass("pause");}});
});
</script>
<body>
<a class="mscBtn" id="audioBtn" style="cursor:pointer;"></a>
<audio id="bgMusic" src="http://cctv3.qiniudn.com/zuixingfuderen.mp3" autoplay="autoplay"></audio>
</body>
<html>
解决ios不自动播放
<a class="mscBtn" id="audioBtn" style="cursor:pointer;"><i class="forbid"></i></a>
<audio id="bgMusic" src="audio/home.mp3" loop></audio>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
var $music = $('.mscBtn');
var audio = document.getElementById('bgMusic');
function audioAutoPlay(audio) {
document.addEventListener("WeixinJSBridgeReady", function () {
audio.play();
}, false);
document.addEventListener('YixinJSBridgeReady', function () {
audio.play();
}, false);
}
audioAutoPlay(audio);
$music.on('click', function () {
if ($music.hasClass('pause')) {
$music.removeClass('pause').addClass('play');
} else {
$music.removeClass('play').addClass('pause');
}
if (audio.paused) {
audio.play();
return
}
audio.pause();
});
</script>
