Memasang kode FnF.fm Audio Player Mp3
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
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
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<link rel='stylesheet prefetch' href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>
<style class="cp-pen-styles">
/* Requires font-awesome */
.player {
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 210px;
height: 100px;
background: #000;
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: rgb(255,255,255); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(225,225,225,1) 51%, rgba(246,246,246,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(241,241,241,1)), color-stop(51%,rgba(225,225,225,1)), color-stop(100%,rgba(246,246,246,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.player .source-ctrl-container:hover {
background: rgb(246,246,246); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(246,246,246,1) 0%, rgba(225,225,225,1) 49%, rgba(241,241,241,1) 50%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(246,246,246,1)), color-stop(49%,rgba(225,225,225,1)), color-stop(50%,rgba(241,241,241,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(246,246,246,1) 0%,rgba(225,225,225,1) 49%,rgba(241,241,241,1) 50%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(246,246,246,1) 0%,rgba(225,225,225,1) 49%,rgba(241,241,241,1) 50%,rgba(255,255,255,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(246,246,246,1) 0%,rgba(225,225,225,1) 49%,rgba(241,241,241,1) 50%,rgba(255,255,255,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(246,246,246,1) 0%,rgba(225,225,225,1) 49%,rgba(241,241,241,1) 50%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.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>
<audio id="player"> <source src="http://radio.freeshoutcast.com:18714/;stream.ogg" type="audio/ogg"> <source src="https://sites.google.com/site/pelajaranku1/mp3ku/Cranberries-Dream-Mys2010.mp3?attredirects=0&d=1" type="audio/mpeg"> </audio> <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();
//# sourceURL=pen.js
</script>
Penjelasan : Ganti link Mp3 yang diwarnai sesuai kinginan
Edited by. Myscript2010
Sources by. Cartoonist ARiF on Codepen
Sources by. Cartoonist ARiF on Codepen
