H5背景音乐播放暂停加图标自动旋转功能

H5背景音乐播放暂停加图标自动旋转功能，支持微信内自动播放代码实例!实现html页面背景音乐自动播放，右上角增加播放图标状态显示，支持暂停，使用最新微信JDK支持微信内打开自动播放功能。自行替换js跟MP3图标吧！
代码如下：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<style>
* { margin: 0; padding: 0; }
input, button, select, textarea, div, p, img { outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: 100%; }
body, html { height: 100%; width: 100%; }
li { list-style: none; }
img { vertical-align: top; height: auto; }
body a { outline: none; blr: expression(this.onFocus=this.blur()); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
html { -webkit-text-size-adjust: none; font-size: 62.5%; }
body { font-size: 1.2rem; background-color: #000; overflow: hidden; font-family: PingFangSC-Regular, sans-serif; }
	@-webkit-keyframes reverseRotataZ {
  0%{
    -webkit-transform: rotateZ(0deg);
  }
  100%{
    -webkit-transform: rotateZ(-360deg);
  }
}
@-webkit-keyframes rotataZ{
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(360deg);
  }
}
#musicControl {
  position:fixed;
  right:10px;
  top:18px;
  margin-top:0;
  display:inline-block;
  z-index:99999999
}
#musicControl a {
  display:inline-block;
  width: 25px;
  height: 25px;
  overflow:hidden;
  background:url('http://www.8gws.com/shopapp/img/music.svg') no-repeat;
  background-size:100%;
}
#musicControl a audio{
  width:100%;
  height:56px;
}
#musicControl a.stop {
  background-position:left bottom;
}
#musicControl a.on {
  background-position:0px 1px;
  -webkit-animation: reverseRotataZ 1.2s linear infinite;
}
#music_play_filter{
  width:100%;
  height:100%;
  overflow:hidden;
  position:fixed;
  top:0;
  left:0;
  z-index:99999998;
}
</style>
</head>
<body>
<span id="musicControl">
    <a id="mc_play" class="on">
        <audio id="musicfx" loop="loop" autoplay="autoplay">
            <source src="https://cy-sycdn.kuwo.cn/bc252bc2be7d932fb1855feef9b1e058/63306219/resource/n2/41/24/2477968581.mp3" type="audio/mpeg" id="hhh">
        </audio>
    </a>
</span>
<script>
$('#mc_play').click(function () {
	var music = document.getElementById('musicfx');
	if (music.paused) {
		music.play();
		$('#mc_play').attr('class', 'on');
	} else {
		music.pause();
		$('#mc_play').attr('class', 'stop');
	}
})
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
	document.addEventListener('DOMContentLoaded', function () {
		function audioAutoPlay() {
			var audio_ = document.getElementById('musicfx')
			document.addEventListener("WeixinJSBridgeReady", function () {
				audio_.play()
			}, false)
		}
		audioAutoPlay()
	});//www.8gws.com
}
</script>