超真实jQuery打造录音磁带效果
- 作者：网页模板
- 大小：0.51MB
- 点击次数：
- 发布时间：2014-06-13 17:16
特效介绍
超真实jQuery打造录音磁带效果，可以快进快退磁带，能够看到磁带快进快退效果，可以播放音乐，正面播放完了，点击“SWICH”按钮，可以切换到背面。“VOLUME”按钮可以调节音量。按钮采用金属质感效果，磁带是塑料效果。支持本地音乐和网络音乐，支持mp3格式和ogg格式音乐。请注意：本插件时jQuery+html5写的，不兼容IE8。
使用方法
1、在head区域引入下面的js和css文件：<link rel="stylesheet" type="text/css" href="css/demo.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <link rel="stylesheet" type="text/css" href="css/knobKnob.css" /> <script type="text/javascript" src="js/modernizr.custom.69142.js"></script>2、把以下代码拷贝到您的html页面:
<div id="vc-container" class="vc-container">
<div class="vc-tape-wrapper">
<div class="vc-tape">
<div class="vc-tape-back">
<div class="vc-tape-wheel vc-tape-wheel-left"><div></div></div>
<div class="vc-tape-wheel vc-tape-wheel-right"><div></div></div>
</div>
<div class="vc-tape-front vc-tape-side-a">
<span>A</span>
</div>
<div class="vc-tape-front vc-tape-side-b">
<span>B</span>
</div>
</div>
</div>
<div class="vc-loader"></div>
</div><!-- //vc-container -->
<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<script src="js/transform.js"></script>
<script src="js/knobKnob.jquery.js"></script>
<script type="text/javascript" src="js/jquery.cassette.js"></script>
<script type="text/javascript">
$(function() {
$( '#vc-container' ).cassette();
});
</script>
3、歌曲地址的修改：1)打开jquery.cassette.js文件，直接ctrl+F查找“歌曲名称：:::::::::”，下一行就是歌曲名称，不带后缀名。
2)还是上面的js文件，ctrl+F查找“歌曲地址：::::::::::::::::”，下一行就是歌曲地址和歌曲后缀名。
3)技巧：当网络歌曲，路径不在一起，就把路径不同的部分和歌曲名都填写在歌曲名称里面，而后缀名和前缀相同的部分填写在相应地址，如：
http://mp3.jiuku.com/mp3/640/639171.mp3 和 http://mp3.jiuku.com/mp3/2010/639295.mp3 ，分析下，“http://mp3.jiuku.com/mp3/” 是二者的相同之处，剩下的都是不同之处，所以名称可以这么填写：
songs : [ '640/639171', '2010/639295', ],
而歌曲地址和后缀名可以这么填写：
mp3 : 'http://mp3.jiuku.com/mp3/' + this.name + '.mp3',
总之，要保证歌曲名+地址+后缀名=完整歌曲地址。
- 本文标签：
- jQuery录音磁带,jQuery音乐插件
