Audio Player With Playlist

Memasang kode Audio Player With Playlist
Untuk menerapkan kode tersebut Langkah awal 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

<link rel='stylesheet prefetch' href='http://www.mp3mixtape.us/iframes/css/mediaelementplayer.min.css'>
<style type="text/css">

/* Backgroud*/
body {
  
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxDPyCFpHp6JXaDxqWb-kUz48bkbwNDR10Qea-93QCQbhf2Tj63CWLA46UVNupp0sfNqqVD4l_ae9R7zi8z0fTLffISK1ZYuKJOqEpfLpt20TCXU_uNoKqT0lKhrz0Td7PxInteVMQ-M8G/s1600-r/Home-Theater-speaker-guide-mys2010.jpg);background-size:cover;background-repeat:no-repeat;margin:auto;}

      /* Start: Show/Hide Playlist*/
.mejs-controls .mejs-show-playlist button {
  background: transparent url(http://www.mp3mixtape.us/iframes/image/mep/controls-playlist.png) no-repeat;
  background-position: -16px -16px;
}
.mejs-controls .mejs-hide-playlist button {
  background: transparent url(http://www.mp3mixtape.us/iframes/image/mep/controls-playlist.png) no-repeat;
  background-position: -16px 0;
}
/* End: Show/Hide Playlist */

/* Start: Previous */
.mejs-controls .mejs-prevtrack button {
  background: transparent url(http://www.mp3mixtape.us/iframes/image/mep/controls-playlist.png) no-repeat;
  background-position: 0 -16px;
}
/* End: Previous */

/* Start: Next */
.mejs-controls .mejs-nexttrack button {
  background: transparent url(http://www.mp3mixtape.us/iframes/image/mep/controls-playlist.png) no-repeat;
}
/* End: Next */

/* Start: Shuffle */
.mejs-controls .mejs-shuffle-on button {
  background: transparent url(http://www.mp3mixtape.us/iframes/image/mep/controls-playlist.png) no-repeat;
  background-position: -32px 0;
}
.mejs-controls .mejs-shuffle-off button {
  background: transparent url(http://www.mp3mixtape.us/iframes/image/mep/controls-playlist.png) no-repeat;
  background-position: -32px -16px;
}
/* End: Shuffle */

/*Start: Playlist*/
.mejs-playlist {
  position: absolute;
  height: auto !important;
  overflow-y: auto;
  
  }
.mejs-playlist ul {
  padding-left: 15px;
    
}
.mejs-playlist li {
 float: left;
 color: #fcce0a;
 font-weight: bold;
   font-size: 14px;
   height: 15px;
   overflow: hidden;
   
 cursor: pointer;
 
 display: block;
 padding: 2px 2px 2px 2px;
  
}
.mejs-playlist li:hover {
  color: #b70000;
  font-weight: bold;
}
.mejs-playlist li.current {
  color: #0afc55;
  font-weight: bold;
}
 </style>

<p align="center">
<audio id="mejs" type="audio/mp3" controls>
<source src="https://sites.google.com/site/fileblogfor/code/Exel-glory-night-mys2010s.mp3" title="01 - Exel - Glory Night - Temple of the King "></Source>
<source src="https://sites.google.com/site/fileblogfor/code/Metallica-Fuel-Memory-Nothing-mys2010s.mp3" title="02 - Metallica-Fuel-Memory-Nothing"></Source>
<source src="https://sites.google.com/site/fileblogfor/code/Scorpion-When-the-smoke-always-stiil-love-mys2010s.mp3" title="03 - Scorpion-When-the-smoke-always-stiil-love">
</Source>
</audio>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>


<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js">
</script>

<script src='http://www.mp3mixtape.us/iframes/js/jquery.reverseorder.js'>
</script>

<script src='http://www.mp3mixtape.us/iframes/js/mediaelement-and-player-fs.js'>
</script>

<script src='http://www.mp3mixtape.us/iframes/js/mep-feature-playlist.js'>
</script>

<script>
 $(function(){
        $('video,audio').mediaelementplayer({
                loop: true,
          shuffle: true,
          playlist: true,
   playlistposition: 'bottom',
   audioHeight: 30,
          features: ['playlistfeature', 'prevtrack', 'playpause', 'nexttrack', 'loop', 'shuffle', 'playlist', 'current', 'progress', 'duration', 'volume'],
            keyActions: []
        });
    });
</script>

Penjelasan :
Tambahkan code Top Title Header jika diperlukan, copy code berikut :

/*Top Title Header*/
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: 0;
  width: 100%;
  background: #000;
  border-bottom: 3px solid #dad;
}

Pastekan dibawah code :

<style type="text/css">

Kemudian copy code berikut :

<header>
<a href="https://sites.google.com/site/fileblogfor/code/Audio-Player-Mp3-with-Playlist-mys2010s.css" title="Myscript2010"><font size="2" color="aqua"face="arial"> GET IN THE CODE AUDIO PLAYER</a>
</header>

Pastekan dibawah code :

</audio>

Selanjutnya
ganti link gambar seta link mp3 sesuai keinginan,
klik pratinjau untuk melihat hasil dan klik perbarui selesai

Edited by. Mys2010 on GitHubGist
Sources by. Cartoonist ARiF on Codepen

DEMOSHOW

Category: Audio Player With Playlist