超真实jQuery打造录音磁带效果

        超真实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',
总之，要保证歌曲名+地址+后缀名=完整歌曲地址。


部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！