制作这个音乐均衡器需要一个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之音乐均衡器的更多相关文章

  1. 基于jQuery虾米音乐播放器样式代码

    分享一款基于jQuery虾米音乐播放器样式代码.这是一款基于jquery+html5实现的虾米音乐播放器源码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div c ...

  2. jQuery基础--音乐视频操作

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. HTML5播放暂停音乐

    查看效果:http://hovertree.com/code/jquery/ueyf7gn4.htm 代码如下: <!DOCTYPE html> <html> <head ...

  4. 推荐5个应用 jQuery 特效的精美特效

    1.jQuery歌词同步的音乐播放器插件 精巧实用 之前我们分享过很多音乐播放器和视频播放器,很多播放器的UI界面都非常酷,特别是利用HTML5和CSS3实现的一些动画特效.今天要分享的一款基于jQu ...

  5. 常用在网站上的30个jQuery插件

    jQuery插件是网页设计师最喜欢的.从图像滑块,图像画廊和导航插件,它们是如此众多,如此多样,如此惊人的和互动可以制作美化网站.在本文的在30个插件中,我认为必须在网站建设时用到.当然你现在可能不善 ...

  6. 7款超具个性的HTML5播放器

    这篇文章我们要分享一些很有个性的HTML5音乐播放器和视频播放器,它们都具有播放器的大部分功能,并以HTML5和JavaScript实现.这些HTML5播放器有着非常漂亮的外观,很多你都无需自己重新定 ...

  7. PCM EQ DRC 音频处理

    PCM Pulse-code modulation的缩写,中文译名是脉冲编码调制.(I2S仅仅是PCM的一个分支,接口定义都是一样的, I2S的采样频率一般为44.1KHZ和48KHZ做,PCM采样频 ...

  8. Guideline 2.5.1 - Performance - Software Requirements

    Guideline - Performance - Software Requirements Your app uses the "prefs:root=" non-public ...

  9. App跳转系统设置界面

    NSString * urlString = @"App-Prefs:root=WIFI"; if ([[UIApplication sharedApplication] canO ...

随机推荐

  1. 在VB中利用Nuget包使用SQLite数据库和Linq to SQLite

    上午解决了在C#中利用Nuget包使用SQLite数据库和Linq to SQLite,但是最后生成的是C#的cs类文件,对于我这熟悉VB而对C#白痴的来说怎么能行呢? 于是下午接着研究,既然生成的是 ...

  2. mysql case when 条件过滤

    [1].[代码] 使用CASE WHEN进行字符串替换处理 跳至 [1] [2] [3] [4] ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 2 ...

  3. QRadioButton类中Toggled()信号的使用方法

    QRadioButton类中Toggled()信号的使用方法 1.说明 QRadioButton中,Toggled()信号是在Radio Button状态(开.关)切换时发出的,而clicked()信 ...

  4. 【转】安装Intel HAXM为Android 模拟器加速，30秒内启动完成

    http://www.cnblogs.com/Li-Cheng/p/4351966.html http://www.cnblogs.com/csulennon/p/4178404.html https ...

  5. UVa10050 Hartals

    // 题意:输入n和p个整数H[i],其中H[i]表示每H[i]天会有一次活动(但周五周六除外).输出前n天中有多少天有活动.模拟从周日开始.   #include<cstdio> #in ...

  6. Ping批量函数

    function pingm ($file){ $ips = gc $file foreach ($ip in $ips) { $cmdline +="ping " + $ip + ...

  7. C语言用static限制函数以及全局变量的作用域

    今天才发现这个东西! C语言中没有public private之类的东西. 如果一个函数或者一个全局变量只想在一个.c文件中使用,可以在前面加上static! 以前我还傻傻的每个.c文件中的函数都加一 ...

  8. BZOJ 2152: 聪聪可可 点分治

    2152: 聪聪可可 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/problem.php ...

  9. URAL 2056 Scholarship 水题

    ScholarshipTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/view.a ...

  10. Android手机拨打电话的开发实例

    一部手机最常用的功能就是打电话和发短信了,在Android开发中我们如何通过程序拨打电话呢?本文就给出一个用Android手机拨打电话的简单的实例. 下面是开发此实例的具体步骤: 一.新建一个Andr ...