News Contents
信息中心

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

发表日期:2019/8/22      浏览次数:

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

但如果仅在页面中添加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 < 3){

                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);

        }

        

        //音轨补偿代码

        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);

            },100);

            //初始化启动BGM

            bgm.play();

        },1000);

    }

</script>

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


盛大建站承接个人、公司、企业的网站建设、网页设计、网店制作、独立商城制作、外贸网站制作,也承接同行介绍的业务,欢迎联系!
本站承接主要业务如下:
1、提供免备案虚拟主机(网站空间),有独立国内服务器、高速美国服务器、香港服务器、韩国服务器、日本服务器,>> http://www.fuanxx.com
2、网站建设:个人网店制作、企业建站、公司网站、新闻、下载等;论坛、博客网站搭建,承接外贸英文站制作
3、承接阿里巴巴、京东、淘宝、天猫等的商品数据采集
4、网站防钓鱼,可以过360、QQ、搜狗、金山、微信拦截
5、要就发IP网站限制访问系统,防止同行抄袭并保障海外客户访问不受影响,>> http://www.198ip.com
  下一篇:没有了!
十年如一日,我们专注于提供高品质 定制网站建设服务!
您的信任,我们的责任,期待与您的合作!