不使用框架JS代码完美实现页面切换背景音乐不间断网页跳转背景音乐不停止播放-爱搜啊博客

当前位置:首页» 资源分享»正文

不使用框架JS代码完美实现页面切换背景音乐不间断网页跳转背景音乐不停止播放

发布:爱搜啊  时间:2018年10月06日  分类:资源分享   评论

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

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

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

不使用框架JS代码完美实现页面切换背景音乐不间断网页跳转背景音乐不停止播放

我们还有个办法来完美解决这个问题,用JS来实现.首先这个代码命令是通过把歌曲的播放进度保存到用户电脑上,然后当切换页面的时候首先查询电脑上面的保存进度,如果有就继续播放,没有就正常播放,要实现起来也是很简单的,核心代码如下,这里有个dome http://aisoa.cn/annex/bgm/ 这是shi用这段代码简单制作的一个切换页面继续播放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>

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


转载请保留出处和本文地址: http://aisoa.cn/post-2186.html

评论 赞助本站

爱搜博客赞助收款二维码

欢迎参与讨论,新评论稍后显示,广告一律删除!