0.基本配置

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

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

    });

在Chrome上写的一个HTML设置背景音乐自动循环播放的时候

<audio autoplay="autoplay" loop="loop" controls="controls">
    <source src="./music.mp3"
        type="audio/mpeg">
</audio>

可是在实际操作中如果没有controls的话就不显示也不播放

添加了controls显示背景音乐但是是需要手动点击播放，会循环播放

失效的原因：

2018年4月份发布的Chrome 66也正式关掉了声音自动播放，也就是说<audio autopaly></audio> <video autoplay></video>在桌面版浏览器也将失效

网络上搜到的一些答案都是2018年之前的方法好多试了都无效

搜到的一种解决办法如下：

<embed src="./music.mp3" width=170 height=25 loop="true" autostart="true">

测试在Chrome浏览器中可以自动播放，但是不能循环