突发奇想，想给博客加个背景音乐，本来想直接找个插件一装。

找了半天试了半天都失效，无法播放音乐，但是也不报错。

然后查询了下，移动端包括电脑端很多浏览器现在都默认阻止音乐自动播放功能，说是为了用户体验度高一些，咳咳~

但是抱着不服气的态度，我觉得还是要搞一个，就去网上各种找资料各种改代码。

终于搞出来了，但是还是不太完美，本文就记录下怎么操作：

<script>
    let playState= true
    function testAutoPlay () {
    return new Promise(resolve => {
    if(playState){
    let audio = document.createElement('audio');
    audio.src = "//替换为自己的音乐地址"
    audio.loop="loop"
    document.body.appendChild(audio);
    let autoplay = true;
    audio.play().then(() => {
    autoplay = true;
    }).catch(err => {
    autoplay = false;
    }).finally((e) => {
    resolve(autoplay);
    });
    playState=false
    }else{
    resolve(false)}
    });
    }
    let audioInfo = {
    autoplay: false,
    testAutoPlay () {
    return testAutoPlay()
    },
    setAutoPlayWhenClick () {
    function setAutoPlay () {
    audioInfo.autoplay = true;
    document.removeEventListener('click', setAutoPlay);
    document.removeEventListener('touchstart', setAutoPlay);
    }
    document.addEventListener('click', setAutoPlay);
    document.addEventListener('touchstart', setAutoPlay);
    },
    init () {
    audioInfo.testAutoPlay().then(autoplay => {
    if (!audioInfo.autoplay) {
    audioInfo.autoplay = autoplay;
    }
    });
    audioInfo.setAutoPlayWhenClick();
        }
    };
    document.addEventListener('click', ()=>{
    audioInfo.init();
    });
    document.addEventListener('touchstart', ()=>{
    audioInfo.init();
    });
</script>

将上述代码放入博客 foot 或者 JS 文件中即可。

不完美的地方就是：

电脑端需要用户在网页进行点击操作后才可以自动播放；

手机端需要手指触摸到屏幕后才开始播放，其余 BUG 暂无。

好了，一个不实用的小功能，哈哈~