Android Music

Memasang kode Android Music
Code ini menggunakan CSS dan HTML. 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

body {#);color:darkblue;}
/*Bg Gradiends*/
body{
 padding: 0px;
 margin: 0px;
 background: linear-gradient(left, rgb(38,38,212) 35%, rgb(133,81,178) 62%, rgb(8,5,28) 81%);
 background: -o-linear-gradient(left, rgb(38,38,212) 35%, rgb(133,81,178) 62%, rgb(8,5,28) 81%);
 background: -moz-linear-gradient(left, rgb(38,38,212) 35%, rgb(133,81,178) 62%, rgb(8,5,28) 81%);
 background: -webkit-linear-gradient(left, rgb(38,38,212) 35%, rgb(133,81,178) 62%, rgb(8,5,28) 81%);
 background: -ms-linear-gradient(left, rgb(38,38,212) 35%, rgb(133,81,178) 62%, rgb(8,5,28) 81%);
 oveflow:hidden;
}
#container {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-a4twY-fxo32HfySCy1N_Sbix5dTCcHAxg1qbM3mBDi2oHHUbDSeUMcDrZYMOOx-fNM-FYJ14auKI7T7QwgLtyeXZD2TjixNmHdrxXlTwSr2CulWoZMMRYBlemKZYjYnwBj6lPUUPYqVs/s1600-r/Cibeber-Cimahi-mys2010.png");
  width: 375px;
  height: 560px;
  background-size: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  padding-top: 94px;
  padding-bottom: 0;
  display: inline-block;
}
#screen {
  margin-left: auto;
  margin-right: auto;
  width: 233px;
  height: 415px;
  position: relative;
  background: #FF3300;
  padding: 0;
}
 

/* Music */
.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: #fff;
    border-radius: 50%;
    float: left;
    position: relative;
    cursor: pointer;
    color: #000;         
    background: #FFCC00; 
}
.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: blue;
    margin: 0 10px;
    position: relative;
    top: -10px;
}
.player .volume-knob {
    background: #fff;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    position: relative;
    top: -6px;
} 

<center>
<!--<div id="presentation" >
-->
<div id="page">
<div id="container">
<div id="screen" onclick="bounce()">
<div id="container-volume">
<p align="right">
<img src="http://4.bp.blogspot.com/-iQYvivDCkQU/Vtl9cayjnaI/AAAAAAAAYp4/cOsH8ySPKAc/s1600-r/1-Y.png" name="e902" border="0" width="58" height="60" /></a>
</div>
<center>
<font size="3" color="green"face="vivaldi"> Myscript2010</a>
<audio id="player">
<source src="https://sites.google.com/site/studiedingsongmp3/laguku/Sisa-mys2010.mp3" type="audio/mpeg">
</audio>
<img src="http://findicons.com/files/icons/1035/human_o2/128/audio_headset.png" name="e902" border="0" width="120" height="180" /></a>

<div id="lockscreen">
<div id="glass-effect">
</div>
<div id="banner">
<div class="wifi">
</div>
  Mari Belajar</font>
<div id="cont">
</div>
  
<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> 

"use strict";

/**
 * Music player
 */

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();

Penjelasan :
Ganti Code Warna, Background HP, dan link Mp3 Sesuai keinginan

Edited by. Myscript2010 on Codepen
Code Music by. Cartoonist ARiF on Codepen

DEMOSHOW

Category: Android Music