音频/视频

HTML5网页音乐播放器(磁带音乐播放器)

创客主机


相信80后之前的人都知道磁带,它是一个时代的符号,但是现在已经被MP3和电脑给完全替代了。而今天我要给大家推荐的就是一款模拟磁带的HTML5播放器,能用到这款插件真的是挺让人兴奋的。相信这一定会勾起你很多美好的回忆。

使用步骤

1、引入以下的js和css文件

  1. <link rel="stylesheet" type="text/css" href="css/demo.css" />
  2. <link rel="stylesheet" type="text/css" href="css/style.css" />
  3. <link rel="stylesheet" type="text/css" href="css/knobKnob.css" />
  4. <link href=' http://fonts.googleapis.com/css?family=Aldrich' rel='stylesheet' type='text/css' />
  5. <script type="text/javascript" src="js/modernizr.custom.69142.js"></script>
  6. <script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  7. <script src="js/transform.js"></script>
  8. <script src="js/knobKnob.jquery.js"></script>
  9. <script type="text/javascript" src="js/jquery.cassette.js"></script>

2、在head标签中加入以下js代码

  1. <script type="text/javascript">  
  2.     $(function() {
  3.           $('#vc-container').cassette();
  4.     });
  5. </script>

3、在body标签中加入以下格式的html代码

  1. <div id="vc-container" class="vc-container">
  2.     <div class="vc-tape-wrapper">
  3.         <div class="vc-tape">
  4.             <div class="vc-tape-back">
  5.                 <div class="vc-tape-wheel vc-tape-wheel-left"><div></div></div>
  6.                 <div class="vc-tape-wheel vc-tape-wheel-right"><div></div></div>
  7.             </div>
  8.             <div class="vc-tape-front vc-tape-side-a">
  9.                 <span>A</span>
  10.             </div>
  11.             <div class="vc-tape-front vc-tape-side-b">
  12.                 <span>B</span>
  13.             </div>
  14.             </div>
  15.         </div>
  16.     <div class="vc-loader"></div>
  17. </div>
(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!