Memasang Kode background changes automatically
Login ke akun blog klik tombol blog baru, buat satubuah link baru  kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut Get Blank Template   edit background warna sesuai keinginan klik simpan selesai.
Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
 <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:  10px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #222;
  border-bottom: 3px solid #dad;
}
/* GRADIEND */
.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;
color: #333;
background:  #000020;
border-top: 2px solid #f0f;
z-index: 9999;
} 
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #00BFFF 50%, transparent 90%); 
}
/*background*/
#myscript2010 {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  background: #243763;
  -webkit-animation: bgColorRotate 60s linear infinite alternate 5s;
          animation: bgColorRotate 60s linear infinite alternate 5s;
}
#myscript2010:before {
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  background: -webkit-radial-gradient(50% 30% circle, rgba(0, 0, 0, 0) 20%, #000000);
  background: radial-gradient(circle at 50% 30%, rgba(0, 0, 0, 0) 20%, #000000);
  pointer-events: none;
  opacity: .8;
}

@-webkit-keyframes bgColorRotate {
  0% {
    background: #243763;
  }
  20% {
    background: #222000;
  }
  40% {
    background: #46344C;
  }
  60% {
    background: #4E513E;
  }
  80% {
    background: #EF8B00;
  }
  100% {
    background: #007F76;
  }
}

@keyframes bgColorRotate {
  0% {
    background: #243763;
  }
  20% {
    background: #283F3D;
  }
  40% {
    background: #46344C;
  }
  60% {
    background: #4E513E;
  }
  80% {
    background: #EF8B00;
  }
  100% {
    background: #007F76;
  }
}
</style>
<div id="myscript2010">
</div>
<div class="ap" id="ap">
<div align="center">
<a href="http://myscript2010s.blogspot.co.id" target="_blank" title="Myscript2010"> 
<h2>
CIBEBER CIMAHI</2></a>  
</div>
<header> 
<div class="Top Title Header">
<div align="center">
<a href="http://sample-mys2010.blogspot.co.id" target="_blank" title="Myscript2010"><b>LET'S STUDY</b>
</div>
</header>
Cat Animated code by. Judith Neumann
Design code is edited by. Mys2010 In Codepen
If you want to directly copy & paste you canDownload Here Background Full Code 

Memasang Kode Audio Mp3 with 7 Dragons
Login ke akun blog klik tombol blog baru 
buat satubuah link baru  kemudian beri nama sesuai fungsi, 
klik Edit HTML pada link baru tersebut, hapus semua kode template   
ganti dengan kode blank template, yang tersedia pada sumber  berikut Get Blank Template   edit background warna sesuai keinginan dan klik simpan selesai.
Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<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:  17px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #000;
  border-bottom: 3px solid #dad;
}
/* GRADIEND */
.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;
color: #333;
background:  #000020;
border-top: 2px solid #f0f;
z-index: 9999;
}  
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #444 50%, transparent 90%); 
}
body{
  font-family:verdana, arial;
}    
.mys2010-list li:hover {
        background: #ffa;
        cursor: pointer;
    }
    .mys2010-list li.current {
        background: #cddfff;
    }
.mys2010-container{
  margin-left:auto;
  margin-right:auto;
}
#wrapper{
  width:490px;
  margin-left:auto;
  margin-right:auto;
  margin-top: -20px;
  padding:-15px;
  -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);
}
body {background-image: url();color:red;height:100%;overflow:hidden;}
.animation-mys2010 {position:absolute;bottom:0;width:100   ; }
.window {position:absolute;left:30px;top:10px;}
.bugaloos { position:absolute;left:430px;top:290px;
  animation-name: float;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;}
  .backwall {position:absolute;width:6%;height:60%;}
@keyframes float {
  0% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(-10px);
  }
  100% {
    transform:translateY(0);
  }
}
.Flying-mys2010 {
	z-index: 600;
	cursor: pointer;
	-webkit-animation: Flying-mys2010 38s infinite linear;
	-moz-animation: Flying-mys2010 38s infinite linear;
	-ms-animation: Flying-mys2010 38s infinite linear;
	-o-animation: Flying-mys2010 38s infinite linear;
	animation: Flying-mys2010 38s infinite linear;
	bottom: 10%;
	left: 0%;
	position: absolute;}
@keyframes Flying-mys2010 {
25% {
bottom: 80%;
left: 85%;
transform: rotateY(0deg);
}
26% {
transform: rotateY(180deg);
}
50% {
 bottom:60%;
 left: 0%;
 transform: rotateY(180deg);
}
51% {
 transform: rotateY(0deg);
}
75% {
 bottom:40%;
 left: 85%;
 transform: rotateY(0deg);
}
76% {
 bottom:40%;
 left: 85%;
 transform: rotateY(180deg);
}
99% {
 transform: rotateY(180deg);}}

@keyframes float {
  0% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(-10px);
  }
  100% {
    transform:translateY(0);
  }
}
@import url(http://fonts.googleapis.com/css?family=Oswald);
@keyframes clouds-loop-1 {
  to {
    background-position: -1000px 0;
  }
}
.clouds-1 {
  background-image: url("http://s.cdpn.io/15514/clouds_2.png");
  animation: clouds-loop-1 20s infinite linear;
}
@keyframes clouds-loop-2 {
  to {
    background-position: -1000px 0;
  }
}
.clouds-2 {
  background-image: url("http://s.cdpn.io/15514/clouds_1.png");
  animation: clouds-loop-2 15s infinite linear;
}
@keyframes clouds-loop-3 {
  to {
    background-position: -1579px 0;
  }
}
.clouds-3 {
  background-image: url("http://s.cdpn.io/15514/clouds_3.png");
  animation: clouds-loop-3 17s infinite linear;
}
section.info {
  position: absolute;
  bottom: 0;
  right: 2ch;
  font-size: 60%;
}
section.info dl {
  display: -webkit-flex;
  display: flex;
}
section.info dl dt, section.info dl dd {
  margin: 0;
  padding: 0;
}
section.info dl dt {
  padding-right: 1ch;
}
section.info dl dd {
  padding-right: 4ch;
}
.clouds {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  opacity: 0.4;
  pointer-events: none;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
}
.clouds-1,
.clouds-2,
.clouds-3 {
  background-repeat: repeat-x;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 500px;
}
body {  
  text-align: center;
  font-size: 20px;
}
div {
  margin: -9px;
}
.btn {
  overflow: hidden;
  position: relative;
  display: inline-block;
  height: 2em;
  line-height: 2em;
  padding: 0 1em;
  text-decoration: none;
  box-shadow: 0 5px 15px #000;
  -moz-transition: color 400ms;
  -o-transition: color 400ms;
  -webkit-transition: color 400ms;
  transition: color 400ms;
}
.btn:before {
  content: '';
  position: absolute;
  z-index: -1;
  height: 0%;
  width: 100%;
  bottom: 0;
  left: 0;
  -moz-transition: height 100ms;
  -o-transition: height 100ms;
  -webkit-transition: height 100ms;
  transition: height 100ms;
}
.btn:hover {
  color: white;
  border-color: white;
}
.btn:hover:before {
  height: 100%;
}
.build {
  color: salmon;
  border: 2px solid salmon;
}
.build:before {
  background-color: salmon;
}
.build:hover {
  color: white;
  border-color: white;
}
.me-up {
  color: skyblue;
  border: 2px solid skyblue;
}
.me-up:before {
  background-color: skyblue;
}
.me-up:hover {
  color: white;
  border-color: white;
}
.rounded {
  border-radius: 2em;
}
.butter {
  color: GoldenRod;
  border: 2px solid GoldenRod;
  border-radius: 2em;
}
.butter:before {
  background-color: GoldenRod;
}
.butter:hover {
  color: white;
  border-color: white;
}
 body { margin: -1; padding: -1 }
h4.quote {
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  text-align: right;
  text-decoration: none;
  font-family: 'Oswald', sans-serif;
  font-weight: normal;
  position: absolute;
  top: 15%;
  left: 50%;
  font-size: 1.2em;
  line-height: 1.5em;
  margin: 0;
  text-shadow: 0 -1px 0  #ffffff, 0 2px 3px #000000;
}
h4.quote span {
  display: block;
}</style>
<h4 class='quote'>
<div class='first'>
<font size="3" color="green"face="arial">
<a class='btn build' href='https://sites.google.com/site/code6916/file/audio-mp3-Before-7Dragons-mys2010.css'>BEFORE 7 DRAGONS </a> <a class='btn me-up' href='https://sites.google.com/site/code6916/file/audio-mp3-After-7Dragons-mys2010.css'>AFTER 7 DRAGONS</font></a>
</h4></div>
<canvas id="c"></canvas>
<div id="animation-mys2010">
<div class="insidewalls" id="animation-mys2010">
<img border="0" class="bugaloos" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaZuiWPiDWCKbHXkZ8CiCP9qesYzqYK2sv7vy1mgJJRBGfE25pXn1yGegDL0R5Q2IoUvOCIswWxaX_hgDVK2Ctj216laKCMEJcbDoT6QgvtDrHPJGpfyxpKO3EgwII9wfc53XFpPwjBp5/s1600-r/kalong-mys2010.gif" height="49" name="e902" width="48" />
<div id="Flying-mys2010" class="slow">
<div id="Flying-mys2010" class="slow">
<img class="Flying-mys2010" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaZuiWPiDWCKbHXkZ8CiCP9qesYzqYK2sv7vy1mgJJRBGfE25pXn1yGegDL0R5Q2IoUvOCIswWxaX_hgDVK2Ctj216laKCMEJcbDoT6QgvtDrHPJGpfyxpKO3EgwII9wfc53XFpPwjBp5/s1600-r/kalong-mys2010.gif"name="e902" border="0" width="60" height="90" /></a>
<div class='clouds'>
<div class='clouds-1'>
</div>
<div class='clouds-2'>
</div>
<div class='clouds-3'>
</div>
</div>
<div class="ap" id="ap">
<div align="center">
<a href="http://sample-mys2010.blogspot.co.id" target="_blank" title="Myscript2010">
<h2>
<font size="2" color="orange"face="arial">CIBEBER CIMAHI</font></2></a>  
</div>
<header> 
<div class="Top Title Header">
<div align="center">
<div id="wrapper">
<audio id="mys2010" src="https://sites.google.com/site/pelajaranku1/mp3ku/Cranberries-Dream-Mys2010.mp3" controls="controls"></audio>
</div>
</header>
<script>
      // full source for entry into js1k dragons: http://js1k.com/2014-dragons/demo/1837
// thanks to simon for grunt help and sean for inspiration help
// js1k shim
var a = document.getElementsByTagName('canvas')[0];
var b = document.body;
var d = function(e){ return function(){ e.parentNode.removeChild(e); }; }(a);
// unprefix some popular vendor prefixed things (but stick to their original name)
var AudioContext =
    window.AudioContext ||
    window.webkitAudioContext;
var requestAnimationFrame =
    window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(f){ setTimeout(f, 1000/30); };
// stretch canvas to screen size (once, wont onresize!)
a.style.width = (a.width = innerWidth - 0) + 'px';
a.style.height = (a.height = innerHeight - 0) + 'px';
var c = a.getContext('2d');
// end shim
var sw = a.width, 
sh = a.height, 
M = Math,
Mc = M.cos,
Ms = M.sin,
ran = M.random,
pfloat = 0, 
pi = M.PI, 
dragons = [], 
shape = [],
loop = function() {
  a.width = sw; // clear screen
  for ( j = 0; j < 7; j++) {
    if ( !dragons[j] ) dragons[j] = dragon(j); // create dragons initially
    dragons[j]();
  }
  pfloat++;
  requestAnimationFrame(loop);
},
dragon = function(index) {
  var scale = 0.1 + index * index / 49, 
    gx = ran() * sw / scale, 
    gy = sh / scale, 
    lim = 300, // this gets inlined, no good!
    speed = 3 + ran() * 5, 
    direction = pi, //0, //ran() * pi * 2, //ran(0,TAU), 
    direction1 = direction, 
    spine = [];
  return function() {
    // check if dragon flies off screen 
    if (gx < -lim || gx > sw / scale + lim || gy < -lim || gy > sh / scale + lim) {
      // flip them around
      var dx = sw / scale / 2 - gx,
        dy = sh / scale / 2 - gy;
      direction = direction1 = M.atan(dx/dy) + (dy < 0 ? pi : 0);
    } else {
       direction1 += ran() * .1 - .05;
       direction -= (direction - direction1) * .1;
    }
    // move the dragon forwards
    gx += Ms(direction) * speed;
    gy += Mc(direction) * speed;
    // calculate a spine - a chain of points
    // the first point in the array follows a floating position: gx,gy
    // the rest of the chain of points following each other in turn
    for (i=0; i < 70; i++) {
      if (i) {
        if (!pfloat) spine[i] = {x: gx, y: gy}
        var p = spine[i - 1],
          dx = spine[i].x - p.x,
          dy = spine[i].y - p.y,
          d = M.sqrt(dx * dx + dy * dy),
          perpendicular = M.atan(dy/dx) + pi / 2 + (dx < 0 ? pi : 0);
        // make each point chase the previous, but never get too close
        if (d > 4) {
          var mod = .5;
        } else if (d > 2){
          mod = (d - 2) / 4;
        } else {
          mod = 0;
        }
        spine[i].x -= dx * mod;
        spine[i].y -= dy * mod;
        // perpendicular is used to map the coordinates on to the spine
        spine[i].px = Mc(perpendicular);
        spine[i].py = Ms(perpendicular);
        if (i == 20) { // average point in the middle of the wings so the wings remain symmetrical
          var wingPerpendicular = perpendicular;
        }
      } else {
        // i is 0 - first point in spine
        spine[i] = {x: gx, y: gy, px: 0, py: 0}; 
      }
    }
    // map the dragon to the spine
    // the x co-ordinates of each point of the dragon shape are honoured
    // the y co-ordinates of each point of the dragon are mapped to the spine
    c.moveTo(spine[0].x,spine[0].y)
    for (i=0; i < 154; i+=2) { // shape.length * 2 - it's symmetrical, so draw up one side and back down the other
      if (i < 77 ) { // shape.length
        // draw the one half from nose to tail
        var index = i; // even index is x, odd (index + 1) is y of each coordinate
        var L = 1;
      } else {
        // draw the other half from tail back to nose
        index = 152 - i;  
        L = -1;
      }
      var x = shape[index];
      var spineNode = spine[shape[index+1]]; // get the equivalent spine position from the dragon shape
      if (index >= 56) {  // draw tail
        var wobbleIndex = 56 - index; // table wobbles more towards the end
        var wobble = Ms(wobbleIndex / 3 + pfloat * 0.1) * wobbleIndex * L;
        x = 20 - index / 4 + wobble;
        // override the node for the correct tail position
        spineNode = spine[ index * 2 - 83 ];
      } else if (index > 13) {  // draw "flappy wings"
        // 4 is hinge point
        x = 4 + (x-4) * (Ms(( -x / 2 + pfloat) / 25 * speed / 4) + 2) * 2; // feed x into sin to make wings "bend"
        // override the perpindicular lines for the wings
        spineNode.px = Mc(wingPerpendicular);
        spineNode.py = Ms(wingPerpendicular);
      }
      c.lineTo(
        (spineNode.x + x * L * spineNode.px) * scale, 
        (spineNode.y + x * L * spineNode.py) * scale
      );}
    c.fill();
  }
}
// the shape of the dragon, converted from a SVG image
'! ((&(&*$($,&.)/-.0,4%3"7$;(@/EAA<?:<9;;88573729/7,6(8&;'.split("").map(function(a,i) {
  shape[i] = a.charCodeAt(0) - 32;
});
loop();     
    </script>
<ul class="mys2010-list">
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'> 
<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><script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'></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){ // get the .current song
            var current_item = $('.mys2010-list li.current:first'); // :first is added if we have few .current classes
            var audio_src = $(current_item).next().text();
            $(current_item).next().addClass('current').siblings().removeClass('current');
            console.log('if '+audio_src);
        }else{ // if there is no .current class
            var current_item = $('.mys2010-list li:first'); // get :first if we don't have .current class
            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') ) { // if it is last - stop playing
            $(current_item).removeClass('current');
        }else{
            currentPlayer.setSrc(audio_src);
            currentPlayer.play();
        }
    }
</script>
Source Dragons Code by. Rauri
Source Audio Mp3 Code by. Jereme Causing
Design code is edited by. Mys2010 on Codepen
If you want to directly copy & paste you canDownload Here Audio Mp3 Modification 

Memasang Kode Audio Mp3 Sebelum & sesudah di Modif
Login ke akun blog klik tombol blog barubuat satubuah link baru  kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template  ganti dengan kode blank template, yang tersedia pada sumber  berikut ini : Get Blank Template   
edit background warna sesuai keinginan dan klik simpan selesai.
Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<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:  8px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #222;
  border-bottom: 3px solid #dad;
}

/* GRADIEND */
.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;
color: #333;
background:  #000020;
border-top: 2px solid #f0f;
z-index: 9999;
}  
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #444 50%, transparent 90%); 
}
body {  
  text-align: center;
  font-size: 20px;
}
div {
  margin: 1px;
}
.btn {
  overflow: hidden;
  position: relative;
  display: inline-block;
  height: 2em;
  line-height: 2em;
  padding: 0 1em;
  text-decoration: none;
  box-shadow: 0 5px 15px #000;
  -moz-transition: color 400ms;
  -o-transition: color 400ms;
  -webkit-transition: color 400ms;
  transition: color 400ms;
}
.btn:before {
  content: '';
  position: absolute;
  z-index: -1;
  height: 0%;
  width: 100%;
  bottom: 0;
  left: 0;
  -moz-transition: height 100ms;
  -o-transition: height 100ms;
  -webkit-transition: height 100ms;
  transition: height 100ms;
}
.btn:hover {
  color: white;
  border-color: white;
}
.btn:hover:before {
  height: 100%;
}
.build {
  color: salmon;
  border: 2px solid salmon;
}
.build:before {
  background-color: salmon;
}
.build:hover {
  color: white;
  border-color: white;
}
.me-up {
  color: skyblue;
  border: 2px solid skyblue;
}
.me-up:before {
  background-color: skyblue;
}
.me-up:hover {
  color: white;
  border-color: white;
}
.rounded {
  border-radius: 2em;
}
.butter {
  color: GoldenRod;
  border: 2px solid GoldenRod;
  border-radius: 2em;
}
.butter:before {
  background-color: GoldenRod;
}
.butter:hover {
  color: white;
  border-color: white;
}
body{
  font-family:verdana, arial;
}    
.mys2010-list li:hover {
        background: #ffa;
        cursor: pointer;
    }
    .mys2010-list li.current {
        background: #cddfff;
    }
.mys2010-container{
  margin-left:auto;
  margin-right:auto;
}
#wrapper{
  width:490px;
  margin-left:auto;
  margin-right:auto;
  margin-top: -15px;
  padding:-15px;
  -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);
}</style>
<!-- GRADIEND -->
<div class="ap" id="ap">
<a href="http://myscript2010s.blogspot.co.id"target="_blank" title="Myscript2010">
<h2>
CIBEBER CIMAHI</2></a>  
</div>
<header> 
<div class="Top Title Header">
<div class='first'>
<div align="center">
<a class='btn build' href='https://sites.google.com/site/code6916/file/audio-mp3-mys2010.css'>BEFORE</a> <a class='btn me-up' href='https://sites.google.com/site/code6916/file/audio-mp3-After-mys2010.css'>AFTER.</a>
</div>
</div>
</header>
<div align="center">
<div id="wrapper">
<audio id="mys2010" src="https://sites.google.com/site/pelajaranku1/mp3ku/Cranberries-Dream-Mys2010.mp3" controls="controls"></audio>
<ul class="mys2010-list">
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'> 
<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>
<script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'></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){ // get the .current song
            var current_item = $('.mys2010-list li.current:first'); // :first is added if we have few .current classes
            var audio_src = $(current_item).next().text();
            $(current_item).next().addClass('current').siblings().removeClass('current');
            console.log('if '+audio_src);
        }else{ // if there is no .current class
            var current_item = $('.mys2010-list li:first'); // get :first if we don't have .current class
            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') ) { // if it is last - stop playing
            $(current_item).removeClass('current');
        }else{
            currentPlayer.setSrc(audio_src);
            currentPlayer.play();
        }
    }
</script>
Audio Code by. Jereme Causing
Design code is edited by. Mys2010 on Codepen
If you want to directly copy & paste you canDownload Here Audio Mp3 Modification