HTML5古典卡带音乐播放器

HTML5古典卡带音乐播放器
 <!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content=""/> 
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <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" />
        <link href='http://fonts.googleapis.com/css?family=Aldrich' rel='stylesheet' type='text/css' />
  <script type="text/javascript" src="js/modernizr.custom.69142.js"></script> 
    </head>
    <body>
    <div id="adsense2" style="width:730px;margin:10px auto">
 
 
</div>
        <div class="container">
  
   
   <header>
    <div class="support-note">
     <span class="no-cssanimations"></span>
     <span class="no-csstransforms"></span>
     <span class="no-csstransforms3d"></span>
     <span class="no-csstransitions"></span>
     <span class="note-ie"></span>
    </div>
    
   </header>
   <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>
  </div><!-- //container -->
  <div id="adsense" style="width:730px;margin:10px auto">
<script type="text/javascript">    /*demo页面横幅*/var cpro_id = 'u956777';</script><script src="http://cpro.baidu.com/cpro/ui/c.js" type="text/javascript"></script>
</div>
<div style="width:700px;margin:10px auto 20px auto;padding:0 0 0 180px;overflow:hidden">
  <iframe src="http://demo.itivy.com/include/follow.html" frameborder="0" scrolling="auto"  marginwidth="0" marginheight="0" allowtransparency="true" width="645px" height="35px"></iframe>
 
    <div id="bdshare" class="bdshare_t bds_tools_32 get-codes-bdshare" style="margin:10px 0 0 -4px">
        <a class="bds_tsina"></a>
        <a class="bds_tqq"></a>
        <a class="bds_renren"></a>
        <a class="bds_qzone"></a>
        <a class="bds_douban"></a>
        <a class="bds_xg"></a>
        <span class="bds_more">更多</span>
  <a class="shareCount"></a>
    </div>
<script type="text/javascript" id="bdshare_js" data="type=tools" ></script>
<script type="text/javascript" id="bdshell_js"></script>
<script type="text/javascript">
    document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + new Date().getHours
();
</script>
 
</div>
    
 
 
<div style="display: none">
    <script language="javascript" type="text/javascript" src="http://js.users.51.la/4473358.js"></script>
    <script type="text/javascript">
        var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
        document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fadd0db9dee36c7a9b64141788e26de72' type='text/javascript'%3E%3C/script%3E"));
 
</script>
 
    <script type="text/javascript">
 
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-21395429-1']);
        _gaq.push(['_trackPageview']);
 
        (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
 
</script>
    </div>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.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>
    </body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
音乐播放器 HTML5 audio video 移动播放器 通过 HTML5,音乐在网络上东山再起。添加音频文件就像插入图像那样简单,并且用户能在浏览器外播放音乐,从而实现惊人的音乐体验。 标签的推出使您不再需要外部音乐播放器,在网站上实现真正的声音融合。 随着 HTML5 的出现,发生了一些重大变化,特别是在音乐和音频方面。开发人员不再要求 web 冲浪者使用 Adobe Flash、Apple QuickTime 或 Microsoft Windows 媒体播放器等特殊的播放器。这意味着用户不必担心是否有最新的兼容插件(或任何播放器插件)。他们只需打开自己喜欢的浏览器并聆听能发出声音的任何内容,如音乐、有声读物、FX 声音效果或朋友和家人录制的消息。 最近在论坛中看到了很多实用html5开发视频播放,音乐播放的功能,大部分都在寻找答案。因此我就在这里做一个demo,供大家相互学习。html5开发越来越流行了,而对于视频这一块也是必不可少的一部分。如何让你的网站占据优势,就要看你的功能和用户体验了。html5对video还是做了很多优惠的东西,我们使用起来很得心应手。 在过去 flash 是网页上最好的解决视频的方法,截至到目前还算是主流,像那些优酷之类的视频网站、虾米那样的在线音乐网站,仍然使用 flash 来提供播放服务。但是这种状况将会随着 HTML5 的发展而改变。就视频而言,HTML5 新增了 video 来实现在线播放视频的功能。 使用 HTML5 的 video 可以很方便的使用 JavaScript 对视频内容进行控制等等,功能十分强大,同时代码比较少加快加载速度。此外跨平台性比较好,特别是一些平板、手机等。例如苹果公司的产品不支持 flash 仅支持 HTML5 中的 video 功能。 HTML5 的兼容性问题虽然目前是个硬伤,但这只是时间的问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值