html音乐自动播放暂停js,JS实现html页面切换背景音乐不间断网页跳转背景音乐不停止播放...

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

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

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

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

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

JS代码如下:

window.onload &＃61; function(){

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

var bgm_echo &＃61; document.querySelector(&＃39;.bgm_echo&＃39;);

var bgm_btn_play &＃61; document.querySelector(&＃39;.bgm_btn_play&＃39;);

var bgm_btn_stop &＃61; document.querySelector(&＃39;.bgm_btn_stop&＃39;);

var bgm_btn_next &＃61; document.querySelector(&＃39;.bgm_btn_next&＃39;);

var bgm &＃61; document.getElementById(&＃39;bgm&＃39;);

//播放开始

bgm_btn_play.onclick &＃61; function(){

bgm.play();

}

//播放暂停

bgm_btn_stop.onclick &＃61; function(){

bgm.pause();

}

//初始化播放列表【如果有播放记录&＃xff0c;则调用】

if(localStorage.getItem(&＃39;bgm_gds&＃39;) !&＃61; null){

bgm.setAttribute(&＃39;value&＃39;,localStorage.getItem(&＃39;bgm_gds&＃39;));

bgm.innerHTML &＃61; &＃39;&＃39;;

bgm_echo.innerHTML &＃61; &＃39;当前播放第&＃39; &＃43; localStorage.getItem(&＃39;bgm_gds&＃39;) &＃43; &＃39;首歌曲&＃39;;

}else{

bgm.setAttribute(&＃39;value&＃39;,1);

bgm.innerHTML &＃61; &＃39;&＃39;;

bgm_echo.innerHTML &＃61; &＃39;当前播放第1首歌曲&＃39;;

}

//下一首歌曲切换

bgm_btn_next.onclick &＃61; function(){

var bgm_gds &＃61; bgm.getAttribute(&＃39;value&＃39;);

if(bgm_gds <4){

bgm_gds&＃43;&＃43;;

}else{

bgm_gds &＃61; 1;

}

bgm.innerHTML &＃61; &＃39;&＃39;;

bgm_echo.innerHTML &＃61; &＃39;当前播放第&＃39; &＃43; bgm_gds &＃43; &＃39;首歌曲&＃39;;

bgm.load();

bgm.play();

//切换歌曲后&＃xff0c;写入代码

bgm.setAttribute(&＃39;value&＃39;,bgm_gds);

localStorage.setItem(&＃39;bgm_gds&＃39;,bgm_gds);

}

//音乐播放完成操作

bgm.onended &＃61; function(){

bgm_btn_next.click();

};

//重置所有音频记忆

var bgm_btn_rest &＃61; document.querySelector(&＃39;.bgm_btn_rest&＃39;);

bgm_btn_rest.onclick &＃61; function(){

//停止音乐

bgm.pause();

setTimeout(function(){

//删除记录

localStorage.removeItem(&＃39;bgm_gds&＃39;);

localStorage.removeItem(&＃39;bgm_time&＃39;);

//重新启动

bgm.setAttribute(&＃39;value&＃39;,1);

bgm.innerHTML &＃61; &＃39;&＃39;;

bgm_echo.innerHTML &＃61; &＃39;当前播放第1首歌曲&＃39;;

//重新播放

bgm.load();

bgm.play();

},200);

}

//音轨补偿代码

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

//获取DOM

var bgm &＃61; document.getElementById(&＃39;bgm&＃39;);

//如果发现有本地存储&＃xff0c;则进行音轨补偿

if(localStorage.getItem(&＃39;bgm_time&＃39;) !&＃61; null){

bgm.currentTime &＃61; localStorage.getItem(&＃39;bgm_time&＃39;);

//启动播放音乐

bgm.play();

}

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

window.setInterval(function(){

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

if(typeof(Storage) !&＃61;&＃61; &＃39;undefined&＃39;){

//写入BGM播放进度

localStorage.setItem(&＃39;bgm_time&＃39;,bgm.currentTime);

}else{

//提示浏览器不支持

var doc_body &＃61; document.querySelector(&＃39;body&＃39;);

doc_body.innerHTML &＃61; &＃39;

}

},100);

//初始化启动BGM

bgm.play();

},1000);

}

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