html页面跳转音乐不间断连续播放方法

2020年05月13日 5843点热度 4人点赞 0条评论

html页面跳转音乐不间断连续播放方法

前几天大头在研究个人引导页HTML页面跳转怎么才能保持音乐BGM不间断连续播放,网上查了好多方法,最终发现frameset框架可以完美实现音乐不间断播放,下面大头举个例子出个教程:

首先我们要创建一个主页index.html,这个页面用于存放frameset框架。

<!DOCTYPE html>
<html>
	<frameset cols="0%,100%">
		<frame src="music.html"/> //背景音乐
		<frame src="aa.html"/>  //要添加背景音乐的页面
	</frameset>
</html>

然后再创建一个music.html页面,用于存放背景音乐。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--BGM-->
		<audio controls="controls" autoplay="autoplay" controls="controls" hidden="hidden">
			<source src="https://music.163.com/song/media/outer/url?id=1297498908.mp3" type="audio/mpeg">
		</audio>
	</body>
</html>

接着再创建两个内容页面,用于测试跳转的时候,音乐是否不间断连续播放,大头这里把这两个页面取名为aa.html和bb.html。

aa.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>这里是A页面</h1>
		<a href="bb.html">去b</a>
	</body>
</html>

bb.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>这里是B页面</h1>
		<a href="aa.html">去a</a>
	</body>
</html>

最后运行代码,成功实现跳转页面音乐不间断连续播放。不过大头听说frameset框架不利SEO,哎,算了算了,反正只是个个人引导页,无所谓。

代码下载:https://datou0.lanzous.com/icjuh1e

 

大头

勤而自律,心似明镜。