首页 > 特效插件 > 视频音乐 >  超真实jQuery打造录音磁带效果正文

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

特效介绍
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',
总之,要保证歌曲名+地址+后缀名=完整歌曲地址。