原则上在不同的页面间相互跳转时,资源会重新加载,背景音乐的播放会被重置。
要实现背景音乐的连续播放,可以尝试使用如下的一些简单方法:
「一」使用框架实现
原理:在主页(index.html)中添加两个框架,一个框架(music.html)播放音乐并设置为隐藏,另一个页面(main.html)为想要显示的页面,并删除播放控件。
主页代码:
<html>
<frameset cols="0%,100%">
<frame src="music.html" noresize="noresize" />
<frame src="main.html" noresize="noresize" />
</frameset>
</html>
音乐部分代码:
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--添加音频播放,设置为自动播放,并隐藏播放控件的显示-->
<audio autoplay="autoplay" controls="controls" hidden="hidden">
<source src="file/example.mp3" type="audio/mp3">
<source src="file/example.mp3" type="audio/ogg">
<embed height="50px" width="100px" src="file/example.mp3">
</audio>
</body>
</html>
实际上是隐藏了music.html,只显示main.html,然后页面切换只是在main.html所在的那个frame发生,而主页面和music页面实际未重新加载。
这样音乐可以连续播放,但缺点是没办法在index.html页面中控制音频播放,且框架iframe引用对搜索引擎排名有负面影响,尤其是引用外部内容。因为iframe对搜索引擎来说是不友好元素,可以让引擎看到的东西和外部看到的不一样。所以iframe内容不会被当作页面内容。
「二」使用Ajax或其他方式实现
◉使用ajax和history.pushState无刷新改变页面URL
◉通过history.pushState无刷新改变url
◉知乎-页内跳转时不间断播放
框架参考博文链接:
HTML5中多页面实现背景音乐的连续播放
音乐在不同HTML页面的连续播放问题
版权所有 Copyright 2023 WorldlineChanger Personal. All rights reserved.
太强了