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

最新推荐文章于 2024-07-15 17:37:16 发布

乾进

最新推荐文章于 2024-07-15 17:37:16 发布

阅读量3.3w

点赞数 15

分类专栏： HTML5 文章标签： HTML5

本文链接：https://blog.csdn.net/dowhatyousay/article/details/80306109

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前几天老师布置了一个课程作业，用所学HTML5相关知识写几个页面出来，于是就开始了制作：

做到最后效果如图：

这是其中一个页面的图片，头部六个都是跳转到其他相关页面的标题，此时我在主页中添加了背景播放音乐：

<!--添加音频播放，设置为自动播放,并隐藏播放控件的显示-->
		<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>

但是当跳转到其他页面时，背景音乐就没了，此时若在其他页面添加相同的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>

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

我把源码贴在了网上有需要的自己去下载吧：http://www.17sucai.com/pins/30768.html

乾进

关注

15
点赞
踩
85

收藏

觉得还不错? 一键收藏
25
评论
HTML5中多页面实现背景音乐的连续播放

前几天老师布置了一个课程作业，用所学HTML5相关知识写几个页面出来，于是就开始了制作：做到最后效果如图：这是其中一个页面的图片，头部六个都是跳转到其他相关页面的标题，此时我在主页中添加了背景播放音乐： <audio controls="controls" autoplay="...
复制链接

扫一扫

专栏目录