H5自动加载音乐，点击暂停、播放

html代码

    <div id="btn">
        <audio id="audio-player" ref="audio" preload="preload" autoplay="autoplay" loop="loop">
            <source src="../../mp3/kwgr11.mp3" type="audio/mpeg">
            Your browser does not support the audio tag.
        </audio>
    </div>

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)
    }
};