Memasang Audio Mp3 Before After

Memasang Kode Audio Mp3 Sebelum & sesudah di Modif
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 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

DEMOSHOW

If you want to directly copy & paste you canDownload Here Audio Mp3 Modification 

Category: Memasang Audio Mp3 Before After