Pemutar Musik Mp3 Playlist

Memasang kode Pemutar Musik Mp3 Playlist 
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   :   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 {
  background: #555;
}
body{
  font-family:verdana, arial;
}    
.mejs-list li:hover {
        background: #ffa;
        cursor: pointer;
    }
    .mejs-list li.current {
        background: #cddfff;
    }
.mejs-container{
  margin-left:auto;
  margin-right:auto;
}
#wrapper{
  width:490px;
  margin-left:auto;
  margin-right:auto;
  margin-top:50px;
  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> 

<font size="3" color="#5F9EAD"face="arial"> 
<div id="wrapper">
<audio id="mejs" src="../media/audio-01.mp3" type="audio/mp3" controls="controls"></audio>
<ul class="mejs-list">
<li  class="current"data-url="https://sites.google.com/site/studiedingsongmp3/laguku/Night-of-the-wolf-black-coach-ave-Sinitra-mys2010.mp3">01 - Music by - Night of the wolf</li>
<li data-url="https://sites.google.com/site/studiedingsongmp3/laguku/2-Pendulum-Resurrected-mys2010.mp3">02 - Music by - Pendulum - Resurrected</li>
<li data-url="https://sites.google.com/site/laguhiburan/mp3-1/ebonshire-mys2010.mp3">03 - Music by - Ebonshire Instrumental</li>

<link rel='stylesheet prefetch'href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'> 
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-58d22c749295bca52f487966e382a94a495ac103faca9206cbd160bdf8aedf2a.js'>
</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) {
                mejsPlayNext(e.target);
            }, false);
        },
        keyActions: []
    });
    $('.mejs-list li').click(function () {
        $(this).addClass('current').siblings().removeClass('current');
        var audio_src = $(this).attr('data-url');
        $('audio#mejs:first').each(function () {
            this.player.pause();
            this.player.setSrc(audio_src);
            this.player.play();
        });
    });
});
function mejsPlayNext(currentPlayer) {
    if ($('.mejs-list li.current').length > 0) {
        var current_item = $('.mejs-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 = $('.mejs-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>

Code by. All Source
Design Code is Edited by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy and paste you canDownload  Pemutar Musik Mp3 Playlist

Category: Pemutar Musik Mp3 Playlist

Tweet