js给html设置背景音乐,最简单最快的方法给H5页面添加背景音乐播放(css样式美化)...
看了很多场景应用,右上角总是会有一个音频按钮,会播放音乐,现在通过简单几步就可以实现这个功能。
1.先上基础的html,定位用了fixed(source 标签里面对应的音频链接换为自己的音频连接)
2.添加css进行美化
*{margin:0px;padding:0px;}
body{background:#000;}
/* music */
@-webkit-keyframes reverseRotataZ{
0%{-webkit-transform: rotateZ(0deg);}
100%{-webkit-transform: rotateZ(-360deg);}
}
@-webkit-keyframes rotataZ{
0%{-webkit-transform: rotateZ(0deg);}
100%{-webkit-transform: rotateZ(360deg);}
}
#musicControl { position:fixed;right:10px;top:20px;margin-top:0;display:inline-block;z-index:99999999}
#musicControl a { display:inline-block;width: 25px; height: 25px;overflow:hidden;background:url('./images/mcbg.png') no-repeat;background-size:100%;}
#musicControl a audio{width:100%;height:56px;}
#musicControl a.stop { background-position:left bottom;}
#musicControl a.on { background-position:0px 1px;-webkit-animation: reverseRotataZ 1.2s linear infinite;}
#music_play_filter{width:100%;height:100%;overflow:hidden;position:fixed;top:0;left:0;z-index:99999998;}
这里的css里面有个背景图,是个旋转的按钮,点击这里下载mcbg.png
3.添加JS(之前不要忘 )
function play_music(){
if(music.paused){
music.play();
$('#mc_play').attr('class','on');
}else{
music.pause();
$('#mc_play').attr('class','stop');
}
}
这个时候基本就已经OK了,最后来一张效果图吧
喜欢 (10)or分享 (0)
js给html设置背景音乐,最简单最快的方法给H5页面添加背景音乐播放(css样式美化)...相关推荐
- css文件插入背景音乐,h5页面添加背景音乐
个人工作笔记 1.创建Audio元素的方法: (1)document.createElement() 方法 (2)new Audio() 2.音乐播放 相关资料: https://developer. ...
- 微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法
微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法 参考文章: (1)微信小程序首页index.js获取不到app.js中动态设置的globalDat ...
- HTML页面添加背景音乐
HTML页面添加背景音乐 方法 1.js中添加即可(亲测好用) // 背景音乐var bgAudio = new Audio();bgAudio.setAttribute("src" ...
- php怎样随机设置颜色,php简单生成随机颜色的方法
本文实例讲述了php简单生成随机颜色的方法.分享给大家供大家参考,具体如下: "; //第二种方法: printf( "#%06X\n", mt_rand( 0, 0xF ...
- wap开发使用jquery mobile之后页面不加载外部css样式文件/js文件
场景: wap开发,使用jquery mobile之后不会加载外部自定义的css文件了,需要手动刷新才会加载,查看外部自定义的js文件也是一样. 解决办法: 1.在page下面添加css样式,就不要写 ...
- php语言 添加背景音乐,在保留原声的基础上给视频添加背景音乐
给视频添加背景音乐的方法有很多种,在网络上也有很多的软件可以给视频加背景音乐,那么有什么办法可以在保留原声的基础上给视频添加背景音乐,音乐声音可以小一点呢?其实这也不是难事,小编给大家推荐一种方法,很 ...
- 怎么把视频做成高清的GIF动态图?简单又快的方法
平时看到各种影视剧或者视频的时候,总会想把把视频最精华的片段或者自己喜欢的部分做成GIF动图- 我一般会用超级转换秀来把视频转成GIF,可以导出高清的GIF动图 而且我刚开始用的时候,也会觉得操作起来 ...
- 闲鱼底部tab android,最简单最快的实现底部标签导航(仿闲鱼样式)
编程是一种美德,是促使一个人不断向上发展的一种原动力 -----–以下是正文------- 最近好多app的底部标签导航使用以下形式了,所以我们就来学习一下它是如何实现的. 先看效果: 中间的&quo ...
- HTML5给页面添加背景音乐
方式一:<video controls="" autoplay="" name="media"><source src=& ...
最新文章
- Redis 敢在线上做Keys正则匹配操作!你可以离职了!
- 希尔排序(C++版)
- redux进一步优化
- C++实现简单的信息管理系统
- 【CodeForces - 689B】Mike and Shortcuts(Dijkstra最短路,或者bfs跑状态类似spfa)
- poj 3258 River Hopscotch 二分答案
- 在SQL SERVER里面用命令查包含某字段的表
- bo耳机h5使用说明_五分钟了解Bamp;O耳机音箱能不能买
- esp8266作为wifi中继器
- 苹果删文件后无服务器,iOS13描述文件可以删除吗?iPhone删除描述文件图文教程...
- 4x root 红米_红米Note 4X root教程_红米Note4X获取root权限的方法
- ms17-010(永恒之蓝)漏洞利用
- ie6,ie7常见兼容性问题总结
- andriod手机信号显示G、E、H、T是什么意思?
- Tableau:如何添加参考线、趋势线、参考区间、分布区间、盒须图?
- mac配置python+appium--安卓版(一)
- 华为语音解锁设置_华为手机该怎么实现语音翻译?其实超级简单,这里教你
- ArcGIS JS之 4.23之IIS本地部署与问题解决
- 一、Tensor基础
- 数字逻辑学习总结-MOOC数字逻辑设计