1、效果演示:
2、具体代码如下:(可以支持暂停和继续播放噢 !)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>微信公众号平台网页音乐js自动播放代码下载</title>
<style>
/* audio */
.u-audio{position:absolute;left:85%;top:5%;width:30px;height:30px;background:url(music/music.png) right 0 no-repeat; -webkit-background-size: 30px 30px;background-size: 30px 30px;z-index:998;}
.u-play{
background-image: url(music/music.png);
-webkit-animation:reverseRotataZ 1.2s linear infinite;
animation:reverseRotataZ 1.2s linear infinite;
}
/* reverseRotataZ */
@-webkit-keyframes reverseRotataZ{
0%{-webkit-transform:rotateZ(0deg);}
100%{-webkit-transform:rotateZ(-360deg);}
}
@keyframes reverseRotataZ{
0%{transform:rotateZ(0deg);}
100%{transform:rotateZ(-360deg);}
}
</style>
</head>
<body>
<div class="u-audio">
<audio id="yy" autoplay preload src="music/bjyy.mp3" loop></audio>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
var bjyy=document.getElementById("yy");
function autoPlayAudio() {
wx.config({
debug: false
});
wx.ready(function() {
bjyy.play();
});
}
$(".u-audio").click(function(){
if($(this).attr("class")=="u-audio"){
bjyy.play();
$(".u-audio").addClass("u-play");
}else if($(this).attr("class")=="u-audio u-play"){
bjyy.pause();
$(".u-audio").removeClass("u-play");
}
});
$(".u-audio").trigger("click");
autoPlayAudio();
</script>
</body>
</html>
备注:音乐图标调整坐标只需要修改.u-audio{position:absolute;left:85%;top:5%; 例如left和top 百分比即可,一定要用百分比,否者音乐图标不能自适应了呢。