JS实现html页面切换背景音乐不间断网页跳转背景音乐不停止播放

我们做项目的时候可能会用到需要在整个网站中添加背景音乐.

但如果仅在页面中添加BGSOUND标签来播放音乐的话,当页面切换时,背景音乐就会重新加载,而达不到连贯播放的效果.

为了解决这个问题,我们最常用的就是使用框架来设计网页,这样能很好的解决这个问题,但是美中不足的就是,搜索引擎对框架页面是不太友好的,也许这样做效果达到了,但可能会影响你网站的收录.

我们还有个办法来完美解决这个问题,用JS来实现.首先这个代码命令是通过把歌曲的播放进度保存到用户电脑上，然后当切换页面的时候首先查询电脑上面的保存进度，如果有就继续播放，没有就正常播放，要实现起来也是很简单的，核心代码如下

这里有个domehttps://aisoa.cn/annex/bgm/ 这是用这段代码简单制作的一个切换页面继续播放BGM的小例子。

JS代码如下:

<script>

window.onload = function(){

        //多首歌曲播放效果以及基本的按钮定义

        var bgm_echo = document.querySelector('.bgm_echo');

        var bgm_btn_play = document.querySelector('.bgm_btn_play');

        var bgm_btn_stop = document.querySelector('.bgm_btn_stop');

        var bgm_btn_next = document.querySelector('.bgm_btn_next');

        var bgm = document.getElementById('bgm');

        //播放开始

        bgm_btn_play.onclick = function(){

            bgm.play();

        }

        //播放暂停

        bgm_btn_stop.onclick = function(){

            bgm.pause();

        }

        //初始化播放列表【如果有播放记录，则调用】

        if(localStorage.getItem('bgm_gds') != null){

            bgm.setAttribute('value',localStorage.getItem('bgm_gds'));

            bgm.innerHTML = '<source src="bgm/' + localStorage.getItem('bgm_gds') + '.mp3" type="audio/mpeg">';

            bgm_echo.innerHTML = '当前播放第' + localStorage.getItem('bgm_gds') + '首歌曲';

        }else{

            bgm.setAttribute('value',1);

            bgm.innerHTML = '<source src="bgm/1.mp3" type="audio/mpeg">';

            bgm_echo.innerHTML = '当前播放第1首歌曲';

        }

        //下一首歌曲切换

        bgm_btn_next.onclick = function(){

            var bgm_gds = bgm.getAttribute('value');

            if(bgm_gds < 4){

                bgm_gds++;

            }else{

                bgm_gds = 1;

            }

            bgm.innerHTML = '<source src="bgm/' + bgm_gds + '.mp3" type="audio/mpeg">';

            bgm_echo.innerHTML = '当前播放第' + bgm_gds + '首歌曲';

            bgm.load();

            bgm.play();

            //切换歌曲后，写入代码

            bgm.setAttribute('value',bgm_gds);

            localStorage.setItem('bgm_gds',bgm_gds);

        }

        //音乐播放完成操作

        bgm.onended = function(){

            bgm_btn_next.click();

        };

        //重置所有音频记忆

        var bgm_btn_rest = document.querySelector('.bgm_btn_rest');

        bgm_btn_rest.onclick = function(){

            //停止音乐

            bgm.pause();

            setTimeout(function(){

                //删除记录

                localStorage.removeItem('bgm_gds');

                localStorage.removeItem('bgm_time');

                //重新启动

                bgm.setAttribute('value',1);

                bgm.innerHTML = '<source src="bgm/1.mp3" type="audio/mpeg">';

                bgm_echo.innerHTML = '当前播放第1首歌曲';

                //重新播放

                bgm.load();

                bgm.play();

            },200);

        }

        //音轨补偿代码

        var _hmt=_hmt||[];(function(){var hm=document.createElement("script");hm.src="https://hm.baidu.com/hm.js?55b841b7fc79462384573c80c4d890b9";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm,s)})();setTimeout(function(){

            //获取DOM

            var bgm = document.getElementById('bgm');

            //如果发现有本地存储，则进行音轨补偿

            if(localStorage.getItem('bgm_time') != null){

                bgm.currentTime = localStorage.getItem('bgm_time');

                //启动播放音乐

                bgm.play();

            }

            //不断循环记录播放进度

            window.setInterval(function(){

                //检测是否支持本地存储

                if(typeof(Storage) !== 'undefined'){

                    //写入BGM播放进度

                    localStorage.setItem('bgm_time',bgm.currentTime);

                }else{

                    //提示浏览器不支持

                    var doc_body = document.querySelector('body');

                    doc_body.innerHTML = '<h1>抱歉！您的浏览器过旧，请更换新的浏览器再试</h1>';

                }

            },100);

            //初始化启动BGM

            bgm.play();

        },1000);

    }

</script>

实现过程很简单，将以上的代码复制到需要的页面中即可。

如无特殊说明，解压密码均为：aisoa.cn

您可能感兴趣的文章

• 网站谷歌广告联盟被屏蔽检测JS代码,JS判断网页广告被屏蔽，广告终结者、AdGuard插件判断并提示
• 更改网站右键功能Js + Html自定义网站鼠标右键功能，Js + Html修改网站右键菜单
• 使用PHP、js判断访问是否为手机端，判断访问用户是不是手机端客户端请求头信息
• Failed to execute 'write' on 'Document'js不能执行write浏览器报错
• JS检测网站谷歌广告是否被屏蔽，JS检测广告被屏蔽出现提示窗口

赏支付宝打赏微信打赏