<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>哈哈哈哈哈</title>
<link rel="stylesheet" type="text/css" href="http://demo.sc.chinaz.com//Files/DownLoad/webjs1/201511/jiaoben3836/css/icons.css" />
<link rel="stylesheet" type="text/css" href="http://demo.sc.chinaz.com//Files/DownLoad/webjs1/201511/jiaoben3836/css/demo.css" />
<link rel="stylesheet" type="text/css" href="http://demo.sc.chinaz.com//Files/DownLoad/webjs1/201511/jiaoben3836/css/component.css" />
<script src="http://demo.sc.chinaz.com//Files/DownLoad/webjs1/201511/jiaoben3836/js/modernizr-custom.js"></script>
</head>
<body>
<div class="container">
<div class="content">
<p class="mobile-message">部落音乐</p>
<div class="component" data-path-start="M280,466c0,0.13-0.001,0.26-0.003,0.39c-0.002,0.134-0.004,0.266-0.007,0.396
C279.572,482.992,266.307,496,250,496h-2.125H51.625H50c-16.316,0-29.592-13.029-29.99-29.249c-0.003-0.13-0.006-0.261-0.007-0.393
C20.001,466.239,20,466.119,20,466l0,0c0-0.141,0.001-0.281,0.003-0.422C20.228,449.206,33.573,436,50,436h1.625h196.25H250
c16.438,0,29.787,13.222,29.997,29.608C279.999,465.738,280,465.869,280,466L280,466z" data-path-listen="M181,466c0,0.13-0.001,0.26-0.003,0.39c-0.002,0.134-0.004,0.266-0.007,0.396
C180.572,482.992,167.307,496,151,496h-2.125h2.75H150c-16.316,0-29.592-13.029-29.99-29.249c-0.003-0.13-0.006-0.261-0.007-0.393
C120.001,466.239,120,466.119,120,466l0,0c0-0.141,0.001-0.281,0.003-0.422C120.228,449.206,133.573,436,150,436h1.625h-2.75H151
c16.438,0,29.787,13.222,29.997,29.608C180.999,465.738,181,465.869,181,466L181,466z" data-path-player="M290,40c0,0.13-0.001,380.26-0.003,380.39c-0.002,0.134,0.006,24.479,0.003,24.609 c0,3.095-2.562,5.001-5,5.001h-27.125H41.625H15c-1.875,0-5-1.25-5-5.001c-0.003-0.13,0.004-24.509,0.003-24.641 C10.001,420.239,10,40.119,10,40l0,0c0-0.141-0.002-24.859,0-25c0,0,0-5,5-5h26.625h216.25H285c2.438,0,5,1.906,5,5 C290.002,15.13,290,39.869,290,40L290,40z">
<!-- SVG with morphing paths and initial start button shape -->
<svg class="morpher" width="300" height="500">
<path class="morph__button" d="M280,466c0,0.13-0.001,0.26-0.003,0.39c-0.002,0.134-0.004,0.266-0.007,0.396
C279.572,482.992,266.307,496,250,496h-2.125H51.625H50c-16.316,0-29.592-13.029-29.99-29.249c-0.003-0.13-0.006-0.261-0.007-0.393
C20.001,466.239,20,466.119,20,466l0,0c0-0.141,0.001-0.281,0.003-0.422C20.228,449.206,33.573,436,50,436h1.625h196.25H250
c16.438,0,29.787,13.222,29.997,29.608C279.999,465.738,280,465.869,280,466L280,466z"/>
</svg>
<!-- Initial start button that switches into the recording button -->
<button class="button button--start">
<span class="button__content button__content--start">点击载入歌曲</span>
<span class="button__content button__content--listen"><span class="icon icon--microphone"></span></span>
</button>
<!-- Music player -->
<div class="player player--hidden">
<img class="player__cover" src="http://demo.sc.chinaz.com//Files/DownLoad/webjs1/201511/jiaoben3836/img/Gramatik.jpg" alt="Water 4 The Soul by Gramatik" />
<div class="player__meta">
<h3 class="player__track">曲名</h3>
<h3 class="player__album">
<span class="player__album-name">专辑</span> by <span class="player__artist">歌手</span>
</h3>
<div class="player__controls">
<button class="player__control icon icon--skip-back" aria-label="Previous song"></button>
<button class="player__control player__control--play icon icon--play" aria-label="Play"></button>
<button class="player__control icon icon--skip-next" aria-label="Next song"></button>
</div>
</div>
<button class="button button--close"><span class="icon icon--cross"></span></button>
</div><!-- /player -->
</div><!-- /component -->
</div><!-- /content -->
</div><!-- /container -->
<script src="http://demo.sc.chinaz.com//Files/DownLoad/webjs1/201511/jiaoben3836/js/classie.js"></script>
<script src="http://demo.sc.chinaz.com//Files/DownLoad/webjs1/201511/jiaoben3836/js/snap.svg-min.js"></script>
<script src="http://demo.sc.chinaz.com//Files/DownLoad/webjs1/201511/jiaoben3836/js/main.js"></script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>