给网页加个背景音乐

123天前347阅读约1分钟 

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

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

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

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

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

<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 暂无。

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

Javascript4 

给网页加个背景音乐 - Jdeal | Life is like a Design.