Handphone with Audio

Memasang kode Handphone with Audio
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

<style class="Mys2010-styles">
body {#);color:red;height:100%;overflow:hidden;}

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: #283144;
  border-bottom: 3px solid #dad;
}
/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 40px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 2px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #333;
background: #283144;
border-top: 2px solid #f0f;
z-index: 9999;
}

/*Iphone*/
body {
  background: #283144;
  margin-top:  -50px;
  font-family: 'vivaldi', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.iPhone {
  background: #ff0000;
  border: solid 2px #c5c5c5;
  height: 500px;
  width: 260px;
  border-radius: 30px;
  position: relative;
  margin: 0 auto;
  box-shadow: 0 3px 5px 0 #323232;
  -webkit-transition: all 0.4s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  transition: all 0.4s cubic-bezier(0.6, 0.04, 0.98, 0.335);
}
.iPhoneInner {
  background: #111;
  border: solid 2px #b4b4b4;
  height: 496px;
  width: 256px;
  border-radius: 30px;
  position: relative;
  margin: 0 auto;
  box-shadow: 0 3px 5px 0 rgba(50, 50, 50, 0.75);
  -webkit-transition: all 0.4s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  transition: all 0.4s cubic-bezier(0.6, 0.04, 0.98, 0.335);
}
.iPhoneInner .circButton {
  background: #111;
  border: solid 2px #8A2BE2;
  width: 36px;
  height: 36px;
  position: relative;
  margin: 0 auto;
  border-radius: 50%;
  top: 48px;
  cursor: pointer;
}
.iPhoneInner .smallTopCirc {
  background-color: #F0E68C;
  background-image: -webkit-linear-gradient(#F0E68C, #FFD700);
  background-image: linear-gradient(#FFD700, #FFD700);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  top: 6px;
  position: relative;
  margin: 0 auto;
}
.iPhoneInner .camera {
  background-color: #191970;
  background-image: -webkit-linear-gradient(#1f1f1f, #141414);
  background-image: linear-gradient(#1f1f1f, #141414);
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: solid 1px  #FFF8DC;
  top: 17px;
  left: 85px;
}
.iPhoneInner .oval {
  background-color:  #FFF8DC;
  background-image: -webkit-linear-gradient( #FFF8DC,  #FFF8DC);
  background-image: linear-gradient(  #FFF8DC,  #00008B);
  width: 50px;
  height: 4px;
  top: 14px;
  border-radius: 2px;
  margin: 0 auto;
  margin-bottom: -12px;
  position: relative;
}
.iScreen {
  position: relative;
  width: 230px;
  height: 400px;
  margin: 0 auto;
  top: 40px;
  overflow: hidden;
  text-align: center;
  background: #FFF8DC;
  border-radius: 5px;
  border: solid 2px #3b3b3b;
  -webkit-transition: all 0.4s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  transition: all 0.4s cubic-bezier(0.6, 0.04, 0.98, 0.335);
}
.iScreen .mys2010 {
  text-align: center;
}
 .turnOn {
  -webkit-transition: all 0.4s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  transition: all 0.4s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  background: #fd3951;
  border: solid 2px #d1d1d1;
}

.rotate {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.rotateBack {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.noShad {
  box-shadow: none;
}
/* Requires font-awesome */
.player {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 210px;
    height: 100px;
    background: #FFF8DC;
    border-radius: 10px;
    padding: 10px;
    font-size: 16px;
    color: #111;
    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;}
.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: #9932CC;
}
.player .volume-slider {
    display: inline-block;
    height: 2px;
    width: 50px;
    background: #9932CC;
    margin: 0 10px;
    position: relative;
    top: -10px;
}
.player .volume-knob {
    background: #111;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    position: relative;
    top: -6px;
}
    </style>

<div class='iPhone'>
<div class='iPhoneInner'>
<div class='camera'>
</div>
<div class='smallTopCirc'>
</div>
<div class='oval'>
</div>
<div class='iScreen'>
<div class='Mys2010'>
<div class='weather-date'>
</div>
Bandung City, 
West Java, Indonesia</a>
</div>
<a href="http://myscript2010s.blogspot.co.id/p/statistik-home-page.html"target="_blank" title="Visit Mys2010">
<img class="expando" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBwW6lK4IBtumV5xTUvEtuxMxWQPpTHFpqVaWyVibzW6G8Fkm8L2mqwAMi0U25V0CyTj1Ut7xrLFWbd67cRezsKFlQpKumPgDq_t_Wp07NK_DbW8TWVE_AZS08-GEMm1Uu_qkpnNimaa2c/s1600-r/Connie-Mys2010.png" width="200" height="400">
</a>
<font size="1" color="#9932CC"face="arial"> CONNIE TALBOT 
LET IT GO COLOURS OF THE WIND</font>
<center>
<audio id="player">
<source src="https://sites.google.com/site/songlagustudy/mp3/Connie-Mys2010.mp3" type="audio/mpeg">
</audio><font size="1" color="brown"face="arial">CIBEBER CIMAHI 2010 - 2016
</div>
<div class='circButton'>
</div>
</div>
</div>

<header> 
<div class="Top Title Header">
<div align="center">
<font size="1" color="#9932CC"face="arial"> <a href="https://gist.github.com/Myscript2010"title="Myscript2010s"><b>LET'S STUDY</b>
</div>
</header>

<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<a href="http://myscript2010s.blogspot.co.id/p/statistik-home-page.html" target="_blank" title="Myscript2010">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9mZwE1hxxBIz-tWksu-19Ci_bDAev9Twjk2s3_RJ3Y3DqPeaPkqWJ3nwDgTJ40UNr7AfkjNcUrMrZyk7sjM5SW9zZawfYM2izL8G7E0tKNBQtsGXomZXySgY_AFT2HEx818p1SNdjUrLt/s1600-r/Loading-Mys2010.gif" name="e902" border="0" width="28" height="29" /></a>

<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>

Penjelasan :
Ganti Link Gambar, Teks, Link Title, Link Mp3 dan code warna

Sources by. Gerta Xhepi
Edited by. Mys2010 on Github

DEMOSHOW

Category: Handphone with Audio

Tweet