HTML多页面跳转时背景音乐不间断播放的实现方法

• February 15, 2020 • Read: 658 • 技术学习

原则上在不同的页面间相互跳转时,资源会重新加载,背景音乐的播放会被重置。
要实现背景音乐的连续播放,可以尝试使用如下的一些简单方法:

「一」使用框架实现
原理:在主页(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页面的连续播放问题