HTML5中多页面实现背景音乐的连续播放

最新推荐文章于 2025-05-07 11:23:24 发布

ghjzzhg

最新推荐文章于 2025-05-07 11:23:24 发布

阅读量2.1w

点赞数 13

CC 4.0 BY-SA版权

分类专栏：前台页面类文章标签： audio Html 音乐

本文链接：https://blog.youkuaiyun.com/ghjzzhg/article/details/86087279

前台页面类专栏收录该内容

45 篇文章

订阅专栏

本文介绍了一种在网页中实现跨页面连续播放背景音乐的方法，通过创建独立的音乐播放页面并利用frameset进行整合，确保音乐在页面跳转时不间断。同时，提供了调整背景音乐音量的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在单个页面中插入背景音乐，当跳转到其他页面时，背景音乐就没了，此时若在其他页面添加相同的audio控件，那么跳转后音乐会重新播放；因此想办法让他能够在跳转后能够继续播放此音乐：

新建一个music.html页面


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--添加音频播放，设置为自动播放,并隐藏播放控件的显示-->
		<audio controls="controls" autoplay="autoplay" controls="controls" hidden="hidden">
			<source src="file/tears.mp3" type="audio/mp3">
			<source src="file/tears.mp3" type="audio/ogg">
			<embed height="50px" width="100px" src="file/tears.mp3">
		</audio>
	</body>
</html>

将原先其他页面中的媒体播放控件都去掉

再新建一个backMusic.html页面：


<!DOCTYPE html>
<html>
	<frameset cols="0%,100%">
		<frame src="music.html"/>
		<frame src="index.html" />
	</frameset>
</html>

此时以此页面为主页运行即可达到预想的效果。

设置背景音乐音量大小：

<body>
		<!--添加音频播放，设置为自动播放,并隐藏播放控件的显示-->
		<audio id="bgAudio" controls="controls" autoplay="autoplay" hidden="hidden">
			<source src="mp3/wangjie.mp3" type="audio/mp3">
			<source src="mp3/wangjie.ogg" type="audio/ogg">
<!-- 			<embed height="50px" width="100px" src="mp3/wangjie.mp3"> -->
		</audio>
	</body>
	<!-- 设置背景音乐音量为0.2，即正常音量的20% -->
	<script type="text/javascript">
		myVid=document.getElementById("bgAudio");
		myVid.volume=0.2;
	</script>