pc端、移动端插入背景音乐，自动播放，循环播放

css代码（让音乐小图片在播放的时候自动旋转）：

.close_music_div img{
    animation:run 5s linear 0s infinite;
}
@keyframes run{
    from{
        -webkit-transform:rotate(0deg);
    }
    to{
        -webkit-transform:rotate(360deg);
    }
}

html代码：

<div class="zp-bg-music">
     <p class="close_music_div"><a onclick="pauseVid()" href="javascript:void(0)"><img src="img/zp/music01.png" alt=""></a></p>
     <p class="open_music_div"><a onclick="playVid()" href="javascript:void(0)"><img src="img/zp/music01.png" alt=""></a></p>
     <audio  id="bg-music" autoplay preload="auto" src="img/zp/bgmusic.mp3" loop="loop"></audio>
</div>

js代码：

$(document).ready(function(){
    playVid();
});
var myVideo=document.getElementById("bg-music");
function playVid(){
    myVideo.play();
    $(".close_music_div").show();
    $(".open_music_div").hide();
}
function pauseVid(){
    myVideo.pause();
    $(".close_music_div").hide();
    $(".open_music_div").show();
}

 

1、audio的属性可查w3c，里面写的很详细，加上autoplay就是自动播放的意思。

2、百度上很多说移动端（手机）设置了不能自动播放，因为浪费用户流量，但经实际测试，以上代码可行。

3、pc的就不能自动播放了，会报错，需要到浏览器里面自行设置，以chrome浏览器为例：

在浏览器输入 chrome://flags/#autoplay-policy

第一个选项 Autoplay policy 设置为 no user gesture is required

 

4、然后下面是在测试之前百度的别人的方法，忘记链接地址了，也是可以参考的（针对移动端不能自动播放，因为觉得代码反锁所以自己改成了上面的那种形式），没有测试过：

$(document).ready(function(){
	            autoPlayMusic();
	            audioAutoPlay();
});
function openmusic(){
    autoPlayMusic();
    audioAutoPlay();
    $(".close_music_div").css({"display":"block"});
    $(".open_music_div").css({"display":"none"});
}

function pauseAuto(){
    var myaudio = document.getElementById('bg-music');
    myaudio.pause();
    $(".close_music_div").css({"display":"none"});
    $(".open_music_div").css({"display":"block"});
}

function audioAutoPlay() {
    var myaudio = document.getElementById('bg-music');
    myaudio.play();
    document.addEventListener("WeixinJSBridgeReady", function () {
        myaudio.play();
    }, false);
}
// 音乐播放
function autoPlayMusic() {
    // 自动播放音乐效果，解决浏览器或者APP自动播放问题
    function musicInBrowserHandler() {
        musicPlay(true);
        document.body.removeEventListener('touchstart', musicInBrowserHandler);
    }
    document.body.addEventListener('touchstart', musicInBrowserHandler);
    // 自动播放音乐效果，解决微信自动播放问题
    function musicInWeixinHandler() {
        musicPlay(true);
        document.addEventListener("WeixinJSBridgeReady", function () {
            musicPlay(true);
        }, false);
        document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
    }
    document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
}
function musicPlay(isPlay) {
    var media = document.querySelector('#bg-music');
    if (isPlay && media.paused) {
        media.play();
    }
    if (!isPlay && !media.paused) {
        media.pause();
    }
}