当前位置：网站首页 > 创业 > 正文

网页跳转背景音乐不间断播放

张子豪 2025-10-11 20:40 1

跟着网站的多元素成长，一个网站给人们体验是至关主要的。我们可能经常浏览网站的时辰会履历过，一个首页是有布景音乐主动播放的，可是我们点击到内容页面的时辰会发现，布景音乐就会从0:00的进度从头起头播放，这就会让人感觉反感，但只要我们可使网页跳转时布景音乐可以持续不间断播放，如许的结果就纷歧样了。那站长们应该怎么实现呢？

思绪：(1)我们可以利用框架(Frame)来解决;但懂点SEO优化的站长都知道，采纳框架这种方式对搜刮引擎长短常的不友爱，晦气于被收录；

(2)我们可以利用js+html5，再挪用几个api与浏览器的内核+cookie方式来解决；一来可以不利用框架的环境下网页跳转布景音乐维持本来的进度持续不间断播放；二来不影响搜刮引擎的友爱。

(3)因为考虑到浏览器内存的挪用机制，我们在利用音乐文件定名的方式最好是1.mp3,若是有多首布景音乐可以定名如：2.mp3....以此类推；

(4)因为网站都在办事器内，至于音频文件的存放路径，可觉得相对路径与路径挪用，最简单的方式可以直接挪用域名，然后在域名后面加上路径就可以了

东西/原料

Sublime,Webstorm，DW等等都可以

方式/步调

1
我们为了简单测试结果，我们可以简单成立两个相对应网页做好超链接，我们把一个网页定名为/new/test.html,第二个网页定名为index.html;
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页跳转布景音乐不间断测试页面一</title>
</head>
<body>
<a href="http://www.bjsyxc.com/index.html">点击进入测试二网页</a>
</body>
</html>
2
第二个网页代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页跳转布景音乐不间断测试页面二</title>
</head>
<body>
<a href="http://www.bjsyxc.com/news/index.html">点击进入测试一网页</a>
</body>
</html>
3
这时辰有人会说，若是有多首布景音乐的话，能不克不及有按钮节制，有不影响音乐的不间断播放呢？谜底是可以必定的。因为原始按钮不太美不雅，我可以在网上找一些适合做按钮的图片或者利用photoshop建造一些素材引用即可。这时辰我们考虑到按钮是否会影响页面内容的问题，我们可以利用一下样式来让按钮竖直标的目的下的悬浮在浏览器的左侧；
按钮样式代码如下：
4
焦点js代码如下：
5
小编在这里需要申明几点代码中会呈现这几句代码：
//下一首歌曲切换
bgm_btn_next.onclick = function(){
var bgm_gds = bgm.getAttribute('value');
if(bgm_gds < 3)
注：音乐播放完会主动播放一下曲，此中if判定语句里面的3代表你的办事器里面布景音乐的数目总数，若是只有一首布景音乐就直接改为1即可，依次类推。
6
因为考虑到浏览器内存的挪用机制，我们在利用音乐文件定名的方式最好是1.mp3,若是有多首布景音乐可以定名如：2.mp3....以此类推；
布景音乐可以直接挪用域名，然后在域名后面加上音频的路径与文件名就可以了。
7
关于摆设的问题，可以将上面所说起到的css样式与js,保留为一个外部的文件，然后在网站的所有网页内部挪用即可，然后在域名后面加上外部挪用的css与js文件路径与其文件名。