jquery之音乐均衡器
制作这个音乐均衡器需要一个equalizer插件(插件我已经上传),下面介绍一下网页的BGM的相关属性:
hidden="true"表示隐藏播放,即不显示播放器的外观,若要想显示,把"true" 替换为"false"即可,这样为默认是最小化播放,若还想具体显示播放器的大小,另加上height="高度值" width="宽度值" 就可以了。
autostart="true"表示当前页一载入则自动播放,若不希望播放改为autostart="false" 即可。
loop="true"表示无限次循环播放音乐直到当前页关闭为止,不想循环播放替换为 loop="false"就OK了 。
loop="-1" 表示无限次循环播放,可设置播放次数,用具体数字代替即可,比如我希望它播放两次,则loop="2"。
<section id="main_section">
<div class="relative_left" style="width: 600px;margin: 30px 0px;height: 300px;left : 50%;margin-left: -300px;">
<h2 id="title">jQuery音乐均衡器</h2>
<div id="equalizer">
<audio autoplay controls loop>
<source src="http://fs.pc.kugou.com/201605121727/202838a1cd28416ce5929d38db776835/G006/M00/1B/1D/Rg0DAFS93HWAC5dJADquNn80K1Y691.mp3" type='audio/mpeg'>
</audio>
</div>
</div>
</section>
方法:
$(document).ready(function(){ $("#ad_container span").click(function(){
$("#ad_container").fadeOut();
}); });
<head>
<meta charset='gb2312' />
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
<title>jQuery音乐均衡器</title>
<link rel="stylesheet" href="http://files.cnblogs.com/files/caidupingblogs/musicmain.css" />
<link rel="stylesheet" href="http://files.cnblogs.com/files/caidupingblogs/jquery.equalizer.css" />
</head>
<body>
<br>
<section id="main_section">
<div class="relative_left" style="width: 600px;margin: 30px 0px;height: 300px;left : 50%;margin-left: -300px;">
<h2 id="title">jQuery音乐均衡器</h2>
<div id="equalizer">
<audio autoplay controls loop>
<source src="http://fs.pc.kugou.com/201605201934/18a9ef6201a90980c597594f0ce07029/G005/M09/02/09/pYYBAFS_0LuAGo-2AEKy0NC72rw491.mp3" type='audio/mpeg'>
</audio>
</div>
</div>
</section>
<script src="http://files.cnblogs.com/files/caidupingblogs/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://files.cnblogs.com/files/caidupingblogs/jquery.reverseorder.js"></script>
<script type="text/javascript" src="http://files.cnblogs.com/files/caidupingblogs/jquery.equalizer.js"></script>
<script>
$(document).ready(function(){
$("#ad_container span").click(function(){
$("#ad_container").fadeOut(400);
});
});
</script>
</body>
run:
jquery之音乐均衡器的更多相关文章
- 基于jQuery虾米音乐播放器样式代码
分享一款基于jQuery虾米音乐播放器样式代码.这是一款基于jquery+html5实现的虾米音乐播放器源码下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div c ...
- jQuery基础--音乐视频操作
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- HTML5播放暂停音乐
查看效果:http://hovertree.com/code/jquery/ueyf7gn4.htm 代码如下: <!DOCTYPE html> <html> <head ...
- 推荐5个应用 jQuery 特效的精美特效
1.jQuery歌词同步的音乐播放器插件 精巧实用 之前我们分享过很多音乐播放器和视频播放器,很多播放器的UI界面都非常酷,特别是利用HTML5和CSS3实现的一些动画特效.今天要分享的一款基于jQu ...
- 常用在网站上的30个jQuery插件
jQuery插件是网页设计师最喜欢的.从图像滑块,图像画廊和导航插件,它们是如此众多,如此多样,如此惊人的和互动可以制作美化网站.在本文的在30个插件中,我认为必须在网站建设时用到.当然你现在可能不善 ...
- 7款超具个性的HTML5播放器
这篇文章我们要分享一些很有个性的HTML5音乐播放器和视频播放器,它们都具有播放器的大部分功能,并以HTML5和JavaScript实现.这些HTML5播放器有着非常漂亮的外观,很多你都无需自己重新定 ...
- PCM EQ DRC 音频处理
PCM Pulse-code modulation的缩写,中文译名是脉冲编码调制.(I2S仅仅是PCM的一个分支,接口定义都是一样的, I2S的采样频率一般为44.1KHZ和48KHZ做,PCM采样频 ...
- Guideline 2.5.1 - Performance - Software Requirements
Guideline - Performance - Software Requirements Your app uses the "prefs:root=" non-public ...
- App跳转系统设置界面
NSString * urlString = @"App-Prefs:root=WIFI"; if ([[UIApplication sharedApplication] canO ...
随机推荐
- Elasticsearch和mysql数据同步(logstash)
1.版本介绍 Elasticsearch: https://www.elastic.co/products/elasticsearch 版本:2.4.0 Logstash: https://www ...
- C#中的强制类型转换与as转换的区别
C#中的强制类型转换 例如有ClassA与ClassB两个类创建两个类的对象进行转换 1 2 ClassA a = new ClassA(); ClassB b = new ClassB(); 如果 ...
- 小谈chrome调试命令:console.log的使用
相信从事前端开发的您,一定不会陌生Mozilla五星级推荐的一款插件:firebug,它是如此强大,乃至于我们可以很方便地调试DHTML的近乎所有元素.而在它深邃的机体里,还存有一个命令:consol ...
- VMware的“桥接”、“NAT”、“Host-only”上网方式的区别
http://liblog.littleyuan.com/archives/9 在说到VMware的网络模型之前,先说一下VMware的几个虚拟设备: VMnet0:这是VMware用于虚拟桥接网络下 ...
- Android Camera
Android调用系统api使用照相机功能,实现拍照获取图片以及从照相机库中获取指定图片的功能. 下面是演示样例代码: <?xml version="1.0" encodin ...
- [AngularJS] Consistency between ui-router states and Angular directives
ui-router's states and AngularJS directives have much in common. Let's explores the similarities bet ...
- leetcode -- Search for a Range (TODO)
Given a sorted array of integers, find the starting and ending position of a given target value. You ...
- php引入公用部分html出现了一行空白(原创)
在导入公用部分html(客服信息)时,莫名其妙出现了一行空白,样式,html均无问题 后来才发现是html多了一行空白 <div class="ad-module-item3 fn-m ...
- 小白日记5:kali渗透测试之被动信息收集(四)--theHarvester,metagoofil,meltag,个人专属密码字典--CUPP
1.theHarvester theHarvester是一个社会工程学工具,它通过搜索引擎.PGP服务器以及SHODAN数据库收集用户的email,子域名,主机,雇员名,开放端口和banner信息. ...
- A very hard Aoshu problem
A very hard Aoshu proble Problem Description Aoshu is very popular among primary school students. It ...