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)" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><img src="img/zp/music01.png" alt=""></a></p>
     <p class="open_music_div"><a onclick="playVid()" href="javascript:void(0)" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><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();
    }
}