jQuery无限循环旋转音乐播放效果

本文介绍jQuery无限循环旋转音乐播放效果

主要js与解析

<script>
    window.onload = function () {
        /*背景音乐*/
        var img = document.querySelector('.play');
        var audio = document.createElement('audio');
        audio.src = 'mp3/1.mp3';

        audio.loop = 'loop';
        audio.autoplay = 'autoplay';
        audio.muted = false;
        document.body.appendChild(audio);
        var first = true;
        audio.play();
        $('.play').click(function () {
            console.log('audio.paused', audio.paused);
            if (audio.paused) {
                audio.play();
                img.style.animationPlayState = 'running';
                img.style.webkitAnimationPlayState = 'running';
            } else {
                audio.pause();
                img.style.animationPlayState = 'paused';
                img.style.webkitAnimationPlayState = 'paused';
            }
        });
        var ua = navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
            function autoPlayAudio() {
                wx.config({
                    // 配置信息, 即使不正确也能使用 wx.ready
                    debug: false
                        , appId: ''
                        , timestamp: 1
                        , nonceStr: ''
                        , signature: ''
                        , jsApiList: []
                });
                wx.ready(function () {
                    var inter = setInterval(function () {
                        if (audio.paused && first) {
                            $('.play').click();
                        } else {
                            first = false;
                            clearInterval(inter);
                        }
                    }, 1000);
                });
            }
            autoPlayAudio();
        } else {
            $(document).click(function () {
                console.log('documentvar被点击');
                var inter = setInterval(function () {
                    if (audio.paused && first) {
                        $('.play').click();
                    } else {
                        first = false;
                        clearInterval(inter);
                    }
                }, 1000);
            }
                );
        }
    }

    </script>