HTML5中多页面实现背景音乐的连续播放_html5 多个页面连续播放同一音乐-程序员宅基地

技术标签: HTML5  

 

前几天老师布置了一个课程作业,用所学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

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/DoWhatYouSay/article/details/80306109

智能推荐

动态版通讯录_动态通讯录-程序员宅基地

文章浏览阅读278次,点赞15次,收藏7次。目录一.通讯录的准备工作二.通讯录的实现步骤创建主菜单存放个人信息(静态)存放个人信息(动态)增加联系人(静态)增加联系人(动态)显示联系人删除指定的联系人查找指定联系人修改指定的联系人销毁通讯录(动态)三.源代码(动态)一.通讯录的准备工作首先我们要想一想开辟一个通讯录我们需要做哪些工作。要存放一些人的基本信息(名字+性别+年龄+电话+住址),增加联系人,删除联系人,修改联系人,查找联系人,最后要存入文档以便找不到。这里我们..._动态通讯录

win10和ubuntu的pyCharm配置python解释器_ubuntu conda环境文件夹中没有python.exe-程序员宅基地

文章浏览阅读2.5k次。ubuntu配置python3.6文件---新建项目---选择需要的python版本(基本解释器python3.6)创建---新建Python文件test01.py打开设置添加系统Python解释器,点齿轮--添加--系统解释器 选择python3 点击确定点击添加配置点击 “+” -> Python选定脚本路径点击确定,配置完成..._ubuntu conda环境文件夹中没有python.exe

StringUtils工具类常用方法汇总(判空、转换、移除、替换、反转)_stringutils.remove-程序员宅基地

文章浏览阅读4.9k次,点赞8次,收藏26次。Apache commons lang3包下的StringUtils工具类中封装了一些字符串操作的方法,非常实用,使用起来也非常方便。最近自己也经常在项目中使用到了里面的一些方法,在这里将常用的方法总结了一下,方便以后查阅,大家有兴趣也可以看一下。  首先需要说明的一点是,StringUtils类在操作字符串时,即使操作的为null值也是安全的,不会报NullPointerException,这一..._stringutils.remove

html如何做点击按钮左侧展开收起,如何使用CSS3 实现侧边栏展开收起动画-程序员宅基地

文章浏览阅读1.2k次。@keyframes规则用于创建动画。@keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果@keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:规定动画的名称规定动画的时长animationanimation 属性是一个简写属性,用于设置动画属性:animation-..._keyframes向左展开动画

python游戏程序代码大全_童年游戏,Python一行代码就能实现!-程序员宅基地

文章浏览阅读2.5k次。大家好,儿童节到了,虽然秃头程序员没有头发,但是童心还是一直都在的,今天就分享一个私藏的GitHub项目——free-python-games,一行代码就能进入使用Python开发的小游戏快乐玩耍!安装与使用安装当然也很简单一行代码就可以pip install freegames由于该项目中的所有游戏均是基于Python内置模块Turtle制作,所以没有太多依赖,安装不会有困难。安装完之后我们可以..._童年游戏代码大全

Eclipse中项目Src看不到.Java文件_eclipse导入的项目src下没java-程序员宅基地

文章浏览阅读5.2k次。Eclipse中项目Src看不到.Java文件需要从Java切换到java EE 工作空间_eclipse导入的项目src下没java

随便推点

YOLOV3实战4:Darknet中cfg文件说明和理解_yolo cfg-程序员宅基地

文章浏览阅读4.7w次,点赞89次,收藏435次。大家好,我是小p,从今天起,将逐渐从源码角度解析Darknet,欢迎加入对象检测群813221712讨论和交流,进群请看群公告!今天将要说明的是Darknet中的cfg文件,废话少说,直接干!(以cfg/yolov3.cfg为例,其它类似)[net] ★ [xxx]开始的行表示网络的一层,其后的内容为该层的参数配置,[net]为特殊的层,配置整个网..._yolo cfg

python生成唯一Id的几种方法_python并发生成唯一数据-程序员宅基地

文章浏览阅读2w次,点赞2次,收藏4次。# coding:utf-8import randomdef createRandomString(len): print ('wet'.center(10,'*')) raw = "" range1 = range(58, 65) # between 0~9 and A~Z range2 = range(91, 97) # between A~Z and a~..._python并发生成唯一数据

Maven1-配置及创建JavaSE项目_maven 创建javase工程-程序员宅基地

文章浏览阅读431次。一、Maven简介项目构建工具(不只是管理jar包),项目设计和编码由程序员来做,它做不了;而编译,运行,测试,打包,部署,jar管理它都能做Apache提供,Java开发的,运行Maven要有基本的java开发工具包Maven仓库:存储jar包本地仓库:当前本地电脑远程仓库:局域网中的服务器中央仓库:远程服务器有远程仓库:本地连接远程,远程仓库中有就下载到本地,没有就去连中央仓库,中央仓库下载到远程,远程再下载到本地,适合团队开发,远程仓库可以连接多个本地仓库,所以很多公_maven 创建javase工程

【转载】FPGA配置方式_quartus烧录-程序员宅基地

文章浏览阅读6.3k次,点赞2次,收藏31次。【概要】FPGA配置方式首先介绍下AS、PS、JTAG三种模式的区别。AS模式: 主动串行配置模式。将.pof文件烧写到flash(掉电不丢失)芯片,FPGA器件每次上电时,作为主控制器从配置器件flash(EPCS)主动读取程序文件并存放至FPGA内部的配置存储器(configure RAM),实现逻辑运作,该方法适用于不需要经常升级的场合,一次性读取程序文件;PS..._quartus烧录

GitHub集成Circle CI(附 Circle CI 配置示例文件)_circleci building status github-程序员宅基地

文章浏览阅读1.6k次。文章目录GitHub 集成Circle CICI(持续集成) 简单解释CI 工具Circle的使用将GitHub项目授权给 Circle CI书写 config.yml文件测试 Circle CI 配置文件是否生效备注写在最后GitHub 集成Circle CICI(持续集成) 简单解释CI 即 Continuous Integration. 当代码提交上来有变动的时候,在merge之前自动进行一些流程,如:代码风格检查、单元测试是否通过等。当被merge之后,又会自动进行一些流程,如:自动打包、_circleci building status github

matlab题目如何在一个圆形区域进行三维作图_meshgrid ,边界是圆-程序员宅基地

文章浏览阅读3.2k次,点赞3次,收藏7次。不废话上图[r,t]=meshgrid(0:0.1:2,0:0.02:2*pi);x=r.*cos(t);y=r.*sin(t);z=x.^2+y.^2;mesh(x,y,z)其实在数学上使用了一个圆的参数方程来实现绘制区域为圆形的效果在这个区域上面是一个碗状图形_meshgrid ,边界是圆