html页面加上背景音乐自动播放

0.基本配置

音乐图片百度云链接
密码: 8e8e

图片

music.gif

music_no.png

music_off.png

1.css内容

<style>
        #audio_btn {
            position: fixed;
            right: 8px;
            top: 0;
            z-index: 200;
            display: none;
            width: 32px;
            height: 32px;
            background-repeat: no-repeat;
            cursor: pointer;
        }
        .play_yinfu {
            position: fixed;
            right: 10px;
            float: right;
            top: 1px;
            width: 30px;
            height: 30px;
            background-image: url("/images/music.gif");
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 60px 60px;
        }
        .rotate {
            position: fixed;
            right: 10px;
            float: right;
            top: 1px;
            width: 30px;
            height: 30px;
            background-size: 100% 100%;
            background-image: url("/images/music_off.png");
            -webkit-animation: rotating 1.2s linear infinite;
            -moz-animation: rotating 1.2s linear infinite;
            -o-animation: rotating 1.2s linear infinite;
            animation: rotating 1.2s linear infinite;
        }
        @-webkit-keyframes rotating {
            from {
                -webkit-transform: rotate(0deg);
            }
            to {
                -webkit-transform: rotate(360deg);
            }
        }
        @keyframes rotating {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        @-moz-keyframes rotating {
            from {
                -moz-transform: rotate(0deg);
            }
            to {
                -moz-transform: rotate(360deg);
            }
        }
        .off {
            position: fixed;
            right: 10px;
            float: right;
            top: 1px;
            background-size: 100% 100%;
            background-image: url("/images/music_no.png");
            background-repeat: no-repeat;
            background-position: center center;
        }
</style>

2.html内容

<!--音乐-->
<div class="video_exist play_yinfu" id="audio_btn" style="display: block;z-index:999999;">
    <div id="yinfu" class="rotate"></div>
    <audio preload="auto" autoplay="" id="media" src="" 
      autoplay preload loop="loop"></audio>
</div>

3.js代码

function audioAutoPlay(id) {
        var audio = document.getElementById(id);
        audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
            audio.play();
        }, false);
    }
    audioAutoPlay('media');


    $(function() {
        var audio = $('#media');
        audio[0].play();
        $("#audio_btn").bind('click', function() {
            $(this).hasClass("off") ? ($(this).addClass("play_yinfu").removeClass("off"), $("#yinfu").addClass("rotate"), $("#media")[0].play()) : ($(this).addClass("off").removeClass("play_yinfu"), $("#yinfu").removeClass("rotate"),
$("#media")[0].pause());
        });


    });