Senin, 24 Desember 2018
Bahastutorial.com - Kesempatan kali ini kita akan membahas tutorial cara memasukan mp3 atau memasukan lagu mp3 supaya bisa di putar di dalam blogger.yang kita bahas kali ini adalah cara yang terbaru dan sudah di bekali css untuk memperbagus tampilan pemutar mp3 di blogger.
Cara Pemasangan :
1) Masuk Ke Blogger
2) Pilih Template/Tema
3) Kemudian Masuk Ke Edit Html
4) Simpan Css Di Atas Kode ]]>
5) Simpan Html Di Postingan ( Pada Mode HTML Bukan Compose )
CSS
/*music by Bahastutorial.com*/
#music {
width: 360px;
background: #ffffff;
border-radius: 5px;
overflow: hidden;
margin: 0 auto;
margin-top: 50px;
}
#music img {
width: 100%;
}
.title {
text-align: center;
line-height: 26px;
font-size: 14px;
}
#pause {
display: none;
}
progress[value] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 6px;
}
progress[value]::-webkit-progress-bar {
background-color: #f1faff;
}
progress[value]::-webkit-progress-value {
background-color: #9ad9fd;
}
.actions {
padding: 15px 18px;
overflow: hidden;
}
.actions i {
font-size: 18px;
color: #6a7883;
float: left;
cursor: pointer;
}
.prev {
margin-left: 97px;
float: left;
}
.play {
margin: 0 20px 0 20px;
float: left;
}
.next {
margin-right: 97px;
float: left;
}
#mute {
display: none;
}
footer {
width:100%;
background:#fff;
color:rgba(0,0,0,.6);
padding:1.5rem 0;
text-align:center;
font-size:16px;
}
footer a {
color: #574c4f;
text-decoration: none;
}
footer a:hover {
color:#3e3739
}
footer .by {
font-weight:700;
}
HTML
<script src='//code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
/*music player by Bahastutorial.com*/
songs = [{
src: "https://oea.eooc.cc/4455d8978e9ee233cf2d61fb4ee0c3b6/k2fOd-MSnaM",
title: "Fiersa Basari - Kau",
coverart: "https://cdn.idntimes.com/content-images/post/20181020/26068551-173087386773982-2744149816249417728-n-03af32d7904cda43e014252c2a15c50b_600x400.jpg"
}, {
src: "http://s4.sv-faz.xyz/mr-reese/top/august2017/Hot%20100%20Billboard%20Singles%20Chart%20-%2013%20August%202017%20-%20MP3%20320/07.%20Ed%20Sheeran%20-%20Shape%20Of%20You.mp3",
title: "Ed Sheeran - Shape Of You",
coverart: "https://assets.capitalfm.com/2014/41/ed-sheeran-a-visual-journey-by-ed-sheeran--phillip-butah-7-1413379822-view-1.jpg"
}, {
src: "http://dopefile.pk:182/d/d4wlawu3rrichaw67plmbrtjfhtpoajdo42jutidck5ayfdoflvn4bcqmucwleazpuamqojs/audio.mp3",
title: "Eminem - River",
coverart: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4eJFbTO9FSwBDLFy-noIrqYdegzQm-vsUGgIj9WFHZna2-F6QA-BPC7Xa_ccqIxXxzLoCdRXW7q9v3OBFr2JzxhZBLPiG3uONtFpXX0zsVtdluqry-xJIlr6FCJpStU3ICKyFwIg1tSg/s1600/739045a551a0026a32298d5bee7e3b6d.jpg"
},
/*
*/
];
var num = 0;
var hiddenPlayer = $('#hidden-player');
var player = $('#player');
var title = $('.title');
var cover = $('.coverr');
function secondsTimeSpanToHMS(s) {
var h = Math.floor(s / 3600);
s -= h * 3600;
var m = Math.floor(s / 60);
s -= m * 60;
return h + ":" + (m < 10 ? '0' + m : m) + ":" + (s < 10 ? '0' + s : s);
};
var initSongSrc = songs[0].src;
var initSongTitle = songs[0].title;
var initSongCover = songs[0].coverart;
var items = songs.length - 1;
hiddenPlayer.attr("src", initSongSrc);
title.html(initSongTitle);
cover.attr('src', initSongCover);
$('.next').on('click', function() {
var songOrder = hiddenPlayer.attr('order');
if (items == songOrder) {
num = 0;
var songSrc = songs[0].src;
var songTitle = songs[0].title;
var songCover = songs[0].coverart;
hiddenPlayer.attr('order', '0');
hiddenPlayer.attr('src', songSrc).trigger('play');
title.html(songTitle);
cover.attr('src', songCover);
} else {
console.log(songOrder);
num += 1;
var songSrc = songs[num].src;
var songTitle = songs[num].title;
var songCover = songs[num].coverart;
hiddenPlayer.attr('src', songSrc).trigger('play');
title.html(songTitle);
cover.attr('src', songCover);
hiddenPlayer.attr('order', num);
}
});
$('.prev').on('click', function() {
var songOrder = hiddenPlayer.attr('order');
if (songOrder == 0) {
num = items;
var songSrc = songs[items].src;
var songTitle = songs[items].title;
var songCover = songs[items].coverart;
hiddenPlayer.attr('order', items);
hiddenPlayer.attr('src', songSrc).trigger('play');
title.html(songTitle);
cover.attr('src', songCover);
} else {
num -= 1;
var songSrc = songs[num].src;
var songTitle = songs[num].title;
var songCover = songs[num].coverart;
hiddenPlayer.attr('src', songSrc).trigger('play');
title.html(songTitle);
cover.attr('src', songCover);
hiddenPlayer.attr('order', num);
}
});
$("#playmusic").click(function() {
hiddenPlayer[0].play();
$("#playmusic").hide();
$("#pause").show().addClass('active');
});
$("#pause").click(function() {
hiddenPlayer[0].pause();
$("#playmusic").show();
$("#pause").hide();
});
hiddenPlayer.on('timeupdate', function() {
var songLength = secondsTimeSpanToHMS(this.duration)
var songLengthParse = songLength.split(".")[0];
var songCurrent = secondsTimeSpanToHMS(this.currentTime)
var songCurrentParse = songCurrent.split(".")[0];
$('progress').attr("value", this.currentTime / this.duration);
if (!hiddenPlayer[0].paused) {
$("#playmusic").hide();
$("#pause").show();
$('progress').css('cursor', 'pointer');
$('progress').on('click', function(e) {
var parentOffset = $(this).parent().offset();
var relX = e.pageX - parentOffset.left;
var percPos = relX * 100 / 355;
var second = hiddenPlayer[0].duration * parseInt(percPos) / 100;
console.log(second);
hiddenPlayer[0].currentTime = second;
})
}
if (this.currentTime == this.duration) {
$('.next').trigger('click');
}
});
$("#mute").click(function() {
hiddenPlayer[0].volume = 1;
$("#mute").hide();
$("#sound").show();
});
$("#sound").click(function() {
hiddenPlayer[0].volume = 0;
$("#mute").show();
$("#sound").hide();
});
//]]>
</script>
KODE HTML (Double Click Untuk Copy Semua Kode Secara Langsung)
<div id="container">
<div id="music">
<audio src="" id="hidden-player"></audio>
<img src="" class="coverr" alt="" />
<div class="title"></div>
<div class="player-song">
<progress value="0" max="1"></progress>
<div class="actions">
<i class="fa fa-list-ul"></i>
<div class="prev">
<i class="fa fa-backward"></i>
</div>
<div class="play">
<i class="fa fa-play" id="playmusic"></i>
<i class="fa fa-pause" id="pause"></i>
</div>
<div class="next">
<i class="fa fa-forward"></i>
</div>
<i class="fa fa-volume-up" id="sound"></i>
<i class="fa fa-volume-off" id="mute"></i>
</div>
</div>
</div>
</div>
Nah Untuk Edit Lagunya Anda Tinggal Mengubah Beberapa Bagian Yaitu
src: "https://oea.eooc.cc/4455d8978e9ee233cf2d61fb4ee0c3b6/k2fOd-MSnaM", (link music)
title: "Fiersa Basari - Kau",(Nama Penyanyi)
coverart: "https://cdn.idntimes.com/content-images/post/20181020/26068551-173087386773982-2744149816249417728-n-03af32d7904cda43e014252c2a15c50b_600x400.jpg"(Gambar Penyanyi)
Bagaimana tutorial kali ini yang di bahas di situs Bahastutorial.com apakah bermanfaat atau sangat berguna buat kalian yang telah mengunjungi situs Bahastutorial.com?Semoga tutorial kali ini sangat bermanfaat buat kalian pengunjung setia situs Bahastutorial.com .. Apabila masi ada yang kurang ngerti dari tutorial di atas silahkan sampaikan dalam kolom komentar ..
kami siap untuk membantu kalian agar kalian nyaman saat mengunjungi situs web Bahastutorial.com. Apabila kalian ingin mengcopy paste Tutorial ini .. Silahkan kalian meminta ijin terlebih dahulu dengan cara meminta izin dalam kolom komentar ..
Apabila tidak meminta izin terlebih dahulu maka dari pihak Bahastutorial.com siap menindak atau melaporkan atas kejahatan me copy paste .. Terima kasih ditunggu ya tutorial selanjutnya salam dari Bahastutorial.com