多个html5页面背景音乐,HTML5页面背景音乐代码 网页背景音乐通用代码
这篇文章主要为大家详细介绍了HTML5页面背景音乐代码 网页背景音乐通用代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。
网页背景音乐是个比较老旧的问题和技术了,上世纪90年代就是十分流行的了,给自己的网页加上一段背景音乐轻快而且于感染力,随着网页技术的发展,除了少部分音乐站点、个人博客、游戏站点外几乎很少有使用到网页背景音乐的地方,当然了这也是织梦361小编的个人看法。言归正传,来介绍一下我们今天的内容:HTML5页面背景音乐代码 网页背景音乐通用代码。我们分2个部分来讲。
1、网页背景通用常用代码embed标签
用法一:
hidden="true"表示隐藏播放,即不显示播放器的外观,若要想显示,把"true" 替换为"false"即可,这样为默认是最小化播放,若还想具体显示播放器的大小,另加上height="高度值" width="宽度值" 就可以了。
autostart="true"表示当前页一载入则自动播放,若不希望播放改为autostart="false"
即可...
loop="true"表示无限次循环播放音乐直到当前页关闭为止,不想循环播放替换为 loop="false"就OK了
用法二:
loop="-1"表示无限次循环播放,可设置播放次数,用具体数字代替即可,比如我希望它播放两次,则loop="2"
controls="ControlPanel"这个控制选项可省略
width="0" height="0"表示隐藏播放,和前面的一样。
若欲设置播放器的外观,则替换为具体的数值就可以了,比如width="123" height="100"
2、HTML5页面播放音乐代码标签
用法:
路径选在音乐所在位置就行了。
关于点击按钮音乐开启/停止播放的效果做了个简单的例子
css样式代码:.pause {
height: 50px;
background: url(images/musicbtn.png) no-repeat;
display: block;
background-position: 0 bottom;
}
.play {
height: 50px;
background: url(images/musicbtn.png) no-repeat;
display: block;
}
JS代码:function autoPlay() {
var myAuto = document.getElementById('bgMusic');
var btn = document.getElementById('audioBtn');
if (myAuto.paused) {
myAuto.play();
btn.classList.remove("pause");
btn.classList.add("play");
} else {
myAuto.pause();
btn.classList.remove("play");
btn.classList.add("pause");
}
}
另外iPhone不会开启自动播放,需要再加一个js
function audioAutoPlay() {
var audio = document.getElementById("bgMusic"),
play = function () {
audio.play();
document.removeEventListener("touchstart", play, false);
};
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
play();
}, false);
document.addEventListener('YixinJSBridgeReady', function () {
play();
}, false);
document.addEventListener("touchstart", play, false);
}
最后我们还需要在body的onload事件调用,这样一个流程下来就实现了HTML5在iPhone实现背景音乐自动播放了。你学会了吗
。
以上就是HTML5页面背景音乐代码 网页背景音乐通用代码的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361模板网。
感谢打赏,我们会为大家提供更多优质资源!
多个html5页面背景音乐,HTML5页面背景音乐代码 网页背景音乐通用代码相关推荐
- audio插入背景音乐_HTML5 标签audio添加网页背景音乐代码
html5 是 HTML 5 的新标签,定义声音,好比音乐或其余音频流.html 能够在开始标签和结束标签之间放置文本内容,这样老的浏览器就能够显示出不支持该标签的信息.ide HTML5 Audio ...
- 防qq页面多边形html5,高仿QQ Xplan的H5页面
上个月底,在朋友圈看到一个号称"这可能是地球上最美的h5"的分享,点进入后发现这个h5还很别致,思考了一会,决定要不高仿一个? 到今天为止,高仿基本完成 除了手机端的media控制 ...
- HTML5期末大作业:动漫网站设计——迪斯尼公主(6个页面) HTML+CSS+JavaScript 动漫网页HTML代码 学生网页课程设计期末作业下载 动漫大学生网页设计制作成
HTML5期末大作业:动漫网站设计--迪斯尼公主(6个页面) HTML+CSS+JavaScript 动漫网页HTML代码 学生网页课程设计期末作业下载 动漫大学生网页设计制作成 临近期末, 你还在为 ...
- HTML5期末大作业:运动系列——NBA篮球主题学生网页设计(7个页面) HTML+CSS+JavaScript 体育网页设计HTML代码 学生网页课程设计期末作业下载 大学生网页设计制作成
HTML5期末大作业:运动系列--NBA篮球主题学生网页设计(7个页面) HTML+CSS+JavaScript 体育网页设计HTML代码 学生网页课程设计期末作业下载 大学生网页设计制作成 临近期末 ...
- HTML5期末大作业:网站——美丽家乡(南京介绍7个页面) 家乡文化介绍 学生DW网页设计作业源码(HTML+CSS+JS) ~学生dreamweaver网页设计作业成品
HTML期末大作业~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个人网站作业模板 ~简单个人网页制作 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到 ...
- 自动滚放的html,HTML5实现视频播放器随页面滚动固定页面右下角效果详解
简要教程 这是一款可以自动将HTML5视频播放器在页面向下滚动时,将其固定在页面右下角位置的jquery和CSS3效果. 使用方法 在页面中引入jquery文件. HTML结构 使用一个 元素来包裹H ...
- 移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来。本文整理一些常用的meta标签...
<!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --><html lang="zh-cmn-Hans"> ...
- html5/css3响应式页面开发总结
一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会 ...
- 一个html5页面,html5做一个黑板报页面
html5做一个黑板报页面 我们结合移动设备(手机和平板电脑)的特性,介绍HTML5中新增的语义化标签元素,以及在移动Web浏览器下Web页面布局的知识及例子. 在HTML5标准添加的新元素中,用于常 ...
- html5 多页面共享数据库,可以跨页面使用HTML5 Web SQL数据库吗?(Can HTML5 Web SQL databases be used across pages?)...
可以跨页面使用HTML5 Web SQL数据库吗?(Can HTML5 Web SQL databases be used across pages?) 这可能是一个非常简单的问题,请原谅我的无知,但 ...
最新文章
- java printwrite_Java PrintWriter write(int)用法及代码示例
- Java应用程序中的消息传递主体
- 如何开始ChickTech章节
- ILSpy 5.0 发布,.NET 反编译工具
- Shiro——从零开始进行详解官方入门案例
- python-django-redis拒绝连接问题解决_20191121
- java long 唯一_Java工具类:获取long型唯一ID
- 怎样在计算机桌面上安装驱动器,怎么用韩博士驱动助理安装电脑驱动
- wps文字表格制作拼音田字格模板_手把手教你用wps表格excel制作田字格书法练习字帖...
- 开发公链社群币种钱包系统软件
- 2022年最新软件测试面试题,自动化测试面试题,接口自动化测试面试题详解,对标大厂。
- 计算机在智能交通应用,计算机信息技术在智能交通系统中的应用
- 答题拿奖两不误:华为云知乎金牌答题官,就是你!
- 光分配网(ODN)一级分光和二级分光的区别及应用场景
- PB proUSB门锁接口函数例程
- 英语写计算机作文600字,介绍电脑 computer 英语作文
- Lecture2:损失函数及优化
- 基于反馈结构的窄带宽陷波滤波器
- 关于弹出消息窗口的自动关闭
- 【Java基础】面向对象(三)
热门文章
- 1000以内完数c语言程序_求1000以内完数 c语言 。。
- 计算机专业的swot分析图,计算机专业学生个人SWOT分析案例
- 连接mysql集群_mysql集群
- 使用matlab生成高斯滤波模板_matlab 高斯滤波(原创)
- 各种redhat版本下载
- java酒店管理系统毕业论文
- KARL MAYER卡尔迈耶驱动器维修SP0405-KM SP0404 SP0403
- Android——适配器Adapter与AdapterView
- 一篇文章带你搞定数学建模中的 Malthus人口模型(含代码)
- 《高等代数学》(姚慕生),习题1.2:三阶行列式