H5 자동 음악 로드, 일시 정지, 재생 클릭

html 코드

CSS 스타일

#btn{
    width: 0.9866666666666667rem;
    height: 0.9866666666666667rem;
    background: url("../../images/act/juxiantang/icon/mp3s.png") no-repeat;
    background-size:100% 100%;
    -webkit-background-size:100% 100%;
    -moz-background-size:100% 100%;
    -ms-background-size:100% 100%;
    -o-background-size:100% 100%;
    position: fixed;
    top: 2.1866666666666665rem;
    right: 0.22rem;
    z-index: 6666;
}

JS 코드 조작

음악.

method 위챗 브라우저인지 여부 판단

let isWeixin = () => {
    let ua = window.navigator.userAgent.toLowerCase()
    return;
    /micromessenger/
        .test(ua)
}
// method     
let audioPlayer = (id) => {
    let audio = document.getElementById(id)
    if (isWeixin()) {
        document.addEventListener(
            'WeixinJSBridgeReady'
            , () => {
                audio.play()
            }, false);

//    getNetworkType      ,       2
        if (typeof window.
                WeixinJSBridge
            ==
            "object"
            && typeof window.
                WeixinJSBridge
                .invoke ==
            "function"
        ) {
            window.
            WeixinJSBridge
                .invoke(
                    'getNetworkType'
                    , {}, () => {
                        audio.play()
                    })
        }
    } else {
        audio.play();
        let touchPlay = () => {
            audio.play();
            document.removeEventListener(
                'touchstart'
                , touchPlay, false)
        };
        if (audio.paused) {
            document.addEventListener(
                'touchstart'
                , touchPlay, false)
        }
    }
}
//   
audioPlayer(
    'audio-player'
);

var audio = document.getElementById("audio-player");
var btn = document.getElementById("btn");
var rotateVal = 0;

var InterVal;     //    
//      
function rotate () {
    InterVal = setInterval(function () {
        rotateVal += 4;
        //       (   )
        btn.style.transform = 'rotate(' + rotateVal + 'deg)';
        //       (   )
        //img.style.transform = 'rotate(-' + rotateVal + 'deg)'
        //             0.1s
        btn.style.transition = '0.1s linear'
    }, 100)
}
rotate ();
btn.onclick = function () {         //        
    if (audio.paused) { //            ，       ，    
        audio.play();
        rotate ()
    }else{
        audio.pause();
        clearInterval(InterVal)
    }
};