解决H5中背景音乐ios及微信端无法自动播放问题 以及暂停

style

body{
  background: #ccc;
}
.music-pic{
    display: inline-block;
    width: 2rem /* 40/20 */;
    height: 2rem /* 40/20 */;
    overflow: hidden;
    background: url('music_icon.png') no-repeat;
    background-size: 100%;
    -webkit-animation: reverseRotataZ 1.2s linear infinite;
    position: absolute;
    z-index: 999;
    left: 82.53%;
    top: 2.4%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  /*移动端,div点击瞬间,出现阴影问题*/ 
}
.music-pic.close{
   display: inline-block;
    width: 2rem /* 40/20 */;
    height: 2rem /* 40/20 */;
    overflow: hidden;
    background: url('swiper_tip.png') no-repeat;
    background-size: 100%;
    -webkit-animation: none;
}
@-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);}
}

html

js

需要引入jq以及微信的js

 

                    
                    

你可能感兴趣的:(解决H5中背景音乐ios及微信端无法自动播放问题 以及暂停)