Chop Slider With Audio

Chop Slider With Audio adalah slider yang menapilkan
beberapa slide  menarik dan juga dapat memainkan music mp3. berikut cara penerapannya : 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:  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: 70px;
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: 5px; 
 background: -webkit-linear-gradient(transparent 10%, green 50%, transparent 90%); 
background: linear-gradient(transparent 10%, pink 50%, transparent 60%);  
}

.wrapper {
    position: relative;
    margin: 0 auto 15px;
    width: 500px;
    height: 350px;
    display: block;
    padding: 5px;
    background: #;
    z-index: 2
    }
#slide-prev, #slide-next {
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    padding: 15px;
    bottom: 50%;
    position: absolute;
    z-index: 4
    }
#slide-prev {
    left: 20px;
    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyTMJG2Utmk3HoXvQ5Uvi91Kg6jQayshU0Xx3U1CudxMXMgyROIOTnXX__Ylf2z4bbVRhaOr0Qnx4WoamdrFsJsjfBn_tfzDyjV3Gkfa9UTOyXWqZUVvC46TBYunvVIuIKxNQvcwxYY5s/s1600/arrow_left.png) no-repeat center
    }
#slide-next {
    right: 20px;
    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBMiKMQX541HWaELAz8nkBOeUIU3ZWviOHmVPjFIKrfXMiSOJwLGAyi91C-hF0Qzh-mFGgnkTEDX0VJtMVruMc33juQLSjktj5ZOUYWwzgsZvW2bjD1QZbgWf1NqU4X3edptqYxgsA5Ms/s1600/arrow_right.png) no-repeat center
    }
#slider {
    width: 500px;
    height: 350px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 2;
    display: block
    }
#slider img {
    width: 100%;
    height: 100%
    }
.slide {
    display: none
    }
.cs-activeSlide {
    display: block
    }
.slide-descriptions {
    display: none
   }
.caption {
    background: rgba(238, 238, 238, 0.83);
    color: #333;
    display: none;
    padding: 5px 10px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5px;
    z-index: 3;
    font: normal 13px/20px Arial, sans-serif
    }

.player {
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 210px;
height: 100px;
background: # ;
border-radius: 10px;
padding: 10px;
font-size: 16px;
color: #fff;
font-family: arial, sans-serif;
}
.player .source-ctrl-container {
height: 50px;
width: 50px;
background: #  ;
border-radius: 50%;
float: left;
position: relative;
cursor: pointer;
color: #000;}
.player .volume-ctrl-container {
box-sizing: border-box;
-moz-box-sizing: border-box;
padding-top: 10px;
height: 50px;
width: 118px;
float: right;
}
.player .fa-pause {
position: absolute;
top: 18px;
left: 18px;
}
.player .fa-play {
position: absolute;
top: 18px;
left: 20px;
}
.player .time-info {
clear: both;
position: relative;
top: 8px;
text-align: center;
font-size: 13px;
}
.player .time-current {
color: #ffff00;
}
.player .volume-slider {
display: inline-block;
height: 2px;
width: 50px;
background: #666;
margin: 0 10px;
position: relative;
top: -10px;
}
.player .volume-knob {
background: #fff;
width: 13px;
height: 13px;
border-radius: 50%;
position: relative;
top: -6px;
}
</style>

<div class="wrapper">
<a href="https://www.blogger.com/blogger.g?blogID=2797383530765388234#" id="slide-next"></a>
<a href="https://www.blogger.com/blogger.g?blogID=2797383530765388234#" id="slide-prev"></a>
<div id="slider">
<div class="slide cs-activeSlide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilnYvhLxpOkH3nnA387x_1e7UunLQ8LCogONOvIpfSV_oiBkZSXfB0gmW9sQ-KmQFVCWiuBODH9UicR2s4JzzrFP3-TqWcwBtNqvCeIcMJIy8KP13NS-JORqGu_Yr_ERmIEt-Kyspe5Dic/s1600-r/katie-mys2010s.jpg" /></div>
<div class="slide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfbN2289UMlTNC8rnhEp9O1hcfqJ29Drci8rH0lad_F2ysa7u2F9bNzefiRLhscchQ5vKGjzbFzu1EwA_Ht3z94tdWVN_maF6h2MSk-TMAACra6I-ljNub3hz900SL70JMabTv_yaJk4hs/s1600-r/blonde-mys2010s.jpg" /></div>
<div class="slide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYam9BcOJ3qVG10hNbMktu7hiD8UfLakTJqhpYaiA7WpbTX833bdzIOjIhuvohDc9kr8_actEmWnUlsIObN6Z9sLHOa1N4CZ55tnsEyPWVnyRp80acweGzGRkW2ZhQD14x5WPojMfocqE-/s1600-r/blonde-mys2010.jpg" /></div>
<div class="slide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZBC_DIE3AmkIie_61c-MoDInKKA4idwbS0zarqMOVkp7pHYQoQUdQ3F3AaAZ0S1Y-qtiPiQ21I2Pmt_VglYSFoSMUucFvRK_UYSGRIs9yKsdX6ay6Dq_UltXXhVEsvAsxjm4zfc9wk_5r/s1600-r/ashley-mys2010.jpg" /></div>
</div>

<div class="slide-descriptions">
<div class="sl-descr">
<a href="http://www.mrwallpaper.com/woman-with-martini-cocktail-wallpaper/" target="_blank" title="Myscript2010">Source  </a> Wallpaper</div>
<div class="sl-descr">
<a href="http://www.mrwallpaper.com/woman-with-martini-cocktail-wallpaper/" target="_blank" title="Myscript2010">Source  </a> Wallpaper</div>
<div class="sl-descr">
<a href="http://www.mrwallpaper.com/woman-with-martini-cocktail-wallpaper/" target="_blank" title="Myscript2010">Source  </a> Wallpaper</div>
<div class="sl-descr">
<a href="http://www.mrwallpaper.com/woman-with-martini-cocktail-wallpaper/" target="_blank" title="Myscript2010">Source  </a> Wallpaper</div>
</div>
<div class="caption">
</div>
</div>
</div>

<!-- GRADIEND -->
<div class="ap" id="ap">
<center>
<h2>
<audio id="player"><source src="https://sites.google.com/site/code6916/lagu/Christine-Mys2010s.mp3" type="audio/mpeg"></audio></h2>
</a></div>

<header>
<div align="center">
<a href="https://Link Download"title="Myscript2010s"><b>DOWNLOAD CODE</b></a>
</div>
</header>

<link rel='stylesheet prefetch' href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script><script src='//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js'></script><script src='http://cdnjs.cloudflare.com/ajax/libs/mootools-more/1.4.0.1/mootools-more-yui-compressed.js'></script>

<script>
"use strict";
/**
 * Requires mootools core and mootools more Slider
 */
var Player = function(audio_element, options) {

    this.audio_obj = document.id(audio_element);
    this.options = options;
    this.init = function() {
        this.status = 'pause';
        //this.duration = this.audio_obj.duration;
        this.time = '00';
        this.render();
        this.addEvents();
    };
    this.render = function() {
        // source controller
        this.source_ctrl_el = new Element('div.source-ctrl.fa.fa-play');
        this.source_ctrl_button = new Element('div.source-ctrl-container')
            .adopt(this.source_ctrl_el);
        // time info
        this.time_current_el = new Element('span.time-current');
        this.time_duration_el = new Element('span.time-duration');
        var time_info = new Element('div.time-info')
            .adopt(
                this.time_current_el,
                new Element('span.time-current-duration-separator').set('text', ' / '),
                this.time_duration_el
            );
        // volume ctrl
        this.volume_slider = new Element('div.volume-slider');
        this.volume_ctrl = new Element('div.volume-ctrl')
            .adopt(
                new Element('span.fa.fa-2x.fa-volume-off'),
                this.volume_slider.adopt( new Element('div.volume-knob')),
                new Element('span.fa.fa-2x.fa-volume-up')
            );
        var container = new Element('div.player')
            .adopt(
                this.source_ctrl_button,
                new Element('div.volume-ctrl-container').adopt(this.volume_ctrl),
                time_info
            )
            .inject(this.audio_obj, 'after');
    };
    this.addEvents = function() {
        this.audio_obj.load();
        this.audio_obj.addEventListener('loadeddata', function() { 
            this.time_duration_el.set('text', this.toHHMMSS(this.audio_obj.duration));
            this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
        }.bind(this));
        this.source_ctrl_button.addEvent('click', this.sourceCtrlAction.bind(this));

        new Slider(this.volume_slider, this.volume_slider.getElement('.volume-knob'), {
            range: [0, 100],
            initialStep: this.audio_obj.volume * 100,
            onChange: function(value){
                this.audio_obj.volume = value/100;
            }.bind(this)
        });
    };
    this.sourceCtrlAction = function() {
        if(this.status == 'pause') {
            this.play();
        }
        else {
            this.pause();
        }
    };
    this.toHHMMSS = function(s) {
        var sec_num = parseInt(s, 10);
        var hours   = Math.floor(sec_num / 3600);
        var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
        var seconds = sec_num - (hours * 3600) - (minutes * 60);
        if(hours   < 10) { hours   = "0" + hours; }
        if(minutes < 10) { minutes = "0" + minutes; }
        if(seconds < 10) { seconds = "0" + seconds; }
        var time = (hours == '00' ? '' : hours + ':') + minutes + ':' + seconds;
        return time;
    }
    this.play = function() {
        this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
        this.time_ti = setInterval(function() {
            this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
        }.bind(this), 1000);
        this.source_ctrl_el.removeClass('fa-play').addClass('fa-pause');
        this.audio_obj.play();
        this.status = 'play';
    };

    this.pause = function() {
        clearInterval(this.time_ti);
        this.source_ctrl_el.removeClass('fa-pause').addClass('fa-play');
        this.audio_obj.pause();
        this.status = 'pause';
    };
}
var player = new Player('player');
player.init();
</script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://sites.google.com/site/vanzdy/script/jquery-chopslider-2.2.0.js"></script>
<script src="https://sites.google.com/site/vanzdy/script/jquery-cstransitions-1.2.js"></script>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script>

<script>jQuery(function () {
    $('#slider').chopSlider({
        slide: '.slide',
        nextTrigger: 'a#slide-next',
        prevTrigger: 'a#slide-prev',
        hideTriggers: true,
        sliderPagination: '.slider-pagination',
        useCaptions: true,
        everyCaptionIn: '.sl-descr',
        showCaptionIn: '.caption',
        captionTransform: 'scale(0) translate(-600px,0px) rotate(45deg)',
        autoplay: true,
        autoplayDelay: 3000,
        t3D: csTransitions['3DFlips']['random'],
        t2D: [
            csTransitions['multi']['random'],
            csTransitions['vertical']['random']
        ],
        noCSS3: csTransitions['noCSS3']['random'],
        mobile: csTransitions['mobile']['random'],
        onStart: function () {
        },
        onEnd: function () {
        }
    });
}); 
</script>

Source Code by. Irvan Efendy
Design code is edited by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy and paste you canDownload Here Chop Slider With Audio

Lihat juga chop untuk background yang berbeda Klik di sini  Chop Slider With Audio

Category: Chop Slider With Audio