Mys2010 on Codepen

<style class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;}
body {
  background: #151515;
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top: -12px;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #809FFE;   
font-size:  6px;
background: -moz-linear-gradient(top, #444 0%, #333 100%);
  border-bottom: 3px solid #809FFE;   
}
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
text-shadow: 0px 0px #809FFE;   
font-size:  11px;
background:  #111;
border-top: 2px solid #f0f;
z-index: 9999;
} 
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, #333 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #444 50%, transparent 90%); 
} 
#M-2010, #teks, #posisi, #dibawah  {
    position: absolute;
    font-size: 11px;
    margin: 2px
}
#M-2010, #teks div {
    text-decoration: underline;
    cursor: pointer
}
#teks, #posisi {
    text-align: right;
    right:  50px;
}
#teks, #dibawah {
    text-align: left;
    left:  50px;
}
 #dibawah, #posisi {
    bottom: 15px;
    bottom:18px;
 -webkit-animation: shadow 60s ease-in-out infinite;
          animation: shadow 60s ease-in-out infinite;
}
@keyframes shadow {
  0% {
    text-shadow:  0 0 2px   #809FFE, 
0 0 8px  #809FFE, 0 0 10px  #809FFE, 
0 0 20px #809FFE, 0 0 30px  #809FFE, 
0 0 40px #809FFE, 0 0 50px  #809FFE, 
0 0 80px #809FFE;
  }
  50% {
      text-shadow: 0 12px 7px #0033CC,
 0 5px 15px #0033CC, 0 0 50px #0033CC,
 0 -10px 2px #0033CC;
  }
 100% {
    text-shadow: 0 0 2px        #809FFE, 
0 0 8px      #809FFE, 0 0 10px  #809FFE, 
0 0 20px     #809FFE, 0 0 30px  #809FFE, 
0 0 40px     #809FFE, 0 0 50px  #809FFE, 
0 0 80px     #809FFE;
}} 
.shadow-top:after { 
    content: " ";
    box-shadow: 0 0 200px 180px #444;    
}
.shadow-top:before {  
    content: " ";
    box-shadow: 0 0 200px 10px #F00;    
}
#M2010-shadow  { 
margin:-150px;
box-shadow: 0 0 150px 80px  #809FFE;
}
.shadow1:before,.shadow1:after {
    z-index:-1;
    position:absolute;
    content: " ";
    bottom:25px;
    left:10px;
    width:50%;     
    max-width:110px;
    box-shadow: 0 0 200px 90px #809FFE;  
    -webkit-transform:rotate(-8deg);
    -moz-transform:rotate(-8deg);
    -o-transform:rotate(-8deg);
    -ms-transform:rotate(-8deg);
    transform:rotate(-8deg);}
.shadow1:after {
    -webkit-transform:rotate(8deg);
    -moz-transform:rotate(8deg);
    -o-transform:rotate(8deg);
    -ms-transform:rotate(8deg);
    transform:rotate(8deg);
    right:10px;
    left:auto;

} 

body{
border:none;
background:#444;
font-size:10px;
font-family:'Source Sans Pro', sans-serif;
font-weight:300;
color:#86d004;
 text-shadow: 0 0 2px #809FFE, 
0 0 118px #809FFE, 0 0 10px #809FFE, 
0 0 180px #809FFE;
  } 
form {
width:355px;
height:355px;
margin:0 auto;}
#contact h3 {
text-align: center;
text-transform:uppercase;
margin-top:11px;
color:#fff;
display:block;
font-size:23px;
font-weight:200;
background-color:#000;
border: 2px solid #f0f;
width: 500px;
 -webkit-animation: shadow 1110s ease-in-out infinite;
          animation: shadow 1110s ease-in-out infinite;
-webkit-box-shadow: 0px 1px 71px 15px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 1px 71px 15px rgba(0,0,0,0.75);
}
.skill {
background: -webkit-linear-gradient(transparent 10%, #333 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #444 50%, transparent 90%); 
border: 2px solid transparent;
border-image: linear-gradient(to right, #EABFFE 60%,#FFFF00 90%);
border-image-slice: 1;
width: 200px;
margin: 20px 0px;
padding: 5px 0px;
 -webkit-box-shadow: 0px 1px 71px 15px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 1px 71px 15px rgba(0,0,0,0.75);
}
.skill p { 
margin: 0px 10px; 
color:#fff; 
} 
#wrapper{
  width:490px;
  margin-left:auto;
  margin-right:auto;
  margin-top:225px;
  padding:15px;  
  width: 500px;
    height: 450px;
    padding: 20px;
    border: 3px solid darkorange;
    border-image: linear-gradient(to left, #EABFFE 60%,#FFFF00 90%);
border-image-slice: 1;
  -webkit-box-shadow: 0px 1px 71px 15px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 1px 71px 15px #000;
}
</style>

<div align="center" style="margin-top:110px">
<div class="shadow1">
</div>
<div id="M2010-shadow">
</div>
<div align="center">
<div class="shadow-top">
</div>
<div class="M-logo"> 
</div>
</div></div>
</div></div>

<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> EDITED BY. <a href="https://Link Download"title="Download Full Code"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> COPYRIGHT <a href="http://codepen.io/hello/" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; CODEPEN </a> 
</div>
<h2>
<audio id="mys2010" src="https://sites.google.com/site/kodesite/svn/Fade-mys2010.mp3"controls="controls"></audio></h2>
</a></div>
</div>
<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/12/grafh-views.html" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>

<div id="wrapper">
<section id="contact">
<h3>The skills I learned</h3>

<form>  
<font size="2" color="#5F9EAD"face="arial"> 
<div class="skill 1"><p>Statistik Pemirsa</p>
<p>Penayangan menurut Negara - Penayangan : Entri</p></div>
<div class="skill 5"><p>110</p><p>Indonesia</p></div>
<div class="skill 3"><p>2</p><p>Slovenia</p></div>
<div class="skill 2"><p>349</p><p>Rusia</p></div>
<div class="skill 4"><p>15</p><p>Amerika Serikat</p></div>
<div class="skill 6"><p>4</p><p>Prancis</p></div>

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>  
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>  
<link rel='stylesheet prefetch'href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>   
<script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script> 

<script>
$('.1').animate({ width: '95%' }, 1000);
$('.2').animate({ width: '85%' }, 1000);
$('.3').animate({ width: '30%' }, 1000);
$('.4').animate({ width: '60%' }, 1000);
$('.5').animate({ width: '75%' }, 1000);
$('.6').animate({ width: '40%' }, 1000);
</script>

<script>
      $(function () {
$('video,audio').mediaelementplayer({
success: function (mediaElement, domObject) {
var audio_src = $('li.current').attr('data-url');
mediaElement.setSrc(audio_src);
mediaElement.addEventListener('ended', function (e) {
mys2010PlayNext(e.target);
}, false);
},
keyActions: []
});
$('.mys2010-list li').click(function () {
$(this).addClass('current').siblings().removeClass('current');
var audio_src = $(this).attr('data-url');
$('audio#mys2010:first').each(function () {
this.player.pause();
this.player.setSrc(audio_src);
this.player.play();
});
});
});
function mys2010PlayNext(currentPlayer) {
if ($('.mys2010-list li.current').length > 0) {
var current_item = $('.mys2010-list li.current:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('if ' + audio_src);
} else {
var current_item = $('.mys2010-list li:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('elseif ' + audio_src);
}
if ($(current_item).is(':last-child')) {
$(current_item).removeClass('current');
} else {
currentPlayer.setSrc(audio_src);
currentPlayer.play();
}}    
</script>

* If you want to directly copy and paste you canDownload Here Grafh Views Audio