H5网页实现打开页面自动播放背景音乐，以及点击关闭背景音乐

相信大家都见过一些H5邀请函，打开之后会自动播放音乐，屏幕有上角也会自动360度旋转图标，以下是简单的案例，大家可以参考。

1、html部分代码：放置音乐、放置旋转按钮

<div style="display: none;">
  <audio id="music1" src="https://www.tpxhm.com/fdetail/music/EasyBreeze.mp3" controls>
    <source src="https://www.tpxhm.com/fdetail/music/EasyBreeze.mp3" type="audio/mpeg" />
  </audio>
</div>
<a href="javascript:;" class="closemusic rotates"></a>
<style>
  .closemusic{
    display: block;
    width: 2rem; height: 2rem; background: url(images/bgmBtn-fbd2dc.svg) no-repeat; background-size: 100% 100%; position: fixed; right: 0.8rem; top:0.8rem;
    z-index: 11;
  }
  .closemusic.rotates{
    animation: 2s rotates linear infinite
  }
  @keyframes rotates {
    0%{}
    100%{transform:rotate(360deg);}
  }
</style>

2、按钮点击事件：实现点击关闭和开启音乐

<script>
$(".closemusic").click(function(){ 
  if($(this).hasClass('rotates')){
    $(this).removeClass('rotates')
     document.getElementById('music1').pause();
  }else{
    $(this).addClass('rotates')
     document.getElementById('music1').play();
  }
   
}) 
</script>

3、效果展示：

4、关于ios微信不自动播放音乐可以参考这边文章：https://www.tpxhm.com/fdetail/818.html