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

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

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

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

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

JS代码如下:

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 = '';

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

}else{

bgm.setAttribute('value',1);

bgm.innerHTML = '';

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 = '';

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 = '';

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 = '

抱歉！您的浏览器过旧，请更换新的浏览器再试

';

}

},100);

//初始化启动BGM

bgm.play();

},1000);

}

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