Membuat Pemutar Musik Audio Sederhana dengan HTML5, CSS3 dan jQuery dengan tampilan Material Design.
![[feature]](https://4.bp.blogspot.com/-zgno8uoPG3k/WVtVKqdUi4I/AAAAAAAAA9I/XFP92JS8YkY9_BU2-kGLesKr01qfPyHaACLcBGAs/s1600/Screenshot_220.png "[feature]")
Saya memanfaatkan Audio dari HTML5 sebagai pemutar musik di sini dengan kustomisasi menggunakan CSS3 dan jQuery agar tampak lebih bagus dan menarik.
Demo
Berikut tampilan akhir pemutar musik:
Persiapan
Ada beberapa file yang saya gunakan secara direct atau dengan kata lain tidak dapat digunakan secara luring (offline). Berikut adalah alat tempur yang harus dipersiapkan:
- Editor. Saya menggunakan Sublime 3. Alternatif lainnya seperti Notepad++, PHPStorm, dan lain-lain
- Local server. Saya menggunakan Wampserver. Alternatif lainnya seperti Wamp, Xamp, Mamp, dan lain-lain
- Library jQuery
- Icon Material Design dari Zavoloklom
- Font Roboto
Struktur Folder
 |
| Struktur folder tutorial Membuat Pemutar Musik dengan HTML5, CSS dan jQuery |
Buat File Index
Jika alat tempur siap digunakan, langkah selanjutnya adalah membuat file index.html terlebih dahulu. Karena tutorial ini tidak berhubungan dengan back-end, maka tidak perlu menggunakan ekstensi php.
Berikut skripnya: [lock]
[<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music Player - Anan Bahrul Khoir</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<div class="container">
<div class="music-cover-background"></div>
<div class="music-cover">
<div class="cover-box">
<img src="assets/img/kasih putih.jpg">
</div>
<div class="music-cover-dot"></div>
</div>
<div class="music-information-background"></div>
<div class="music-information">
<div class="music-title">
<h1>Kasih Putih</h1>
</div>
<div class="music-singer">
<h2>Glenn Fredly</h2>
</div>
<div class="music-playlist">
<span class="current-songs">1</span> / <span class="total-songs">1</span>
</div>
<div class="music-time">
<span class="current-time">00:00</span> / <span class="duration-time">00:00</span>
</div>
</div>
<div class="music-progres"></div>
<div class="music-progres-current"> </div>
<div class="music-controls">
<span class="btn-prev"><i class="zmdi zmdi-skip-previous"></i></span>
<span class="btn-play btn-large"><i class="zmdi zmdi-play"></i></span>
<span class="btn-next"><i class="zmdi zmdi-skip-next"></i></span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
var Audio = new Audio();
var musicPath, playButton, prevButton, nextButton;
var songDuration, songCurrentTime, songDurLong, songCurTimeLong;
var A;
musicPath = 'musics/Glenn Fredly - Kasih Putih.mp3';
Audio.src = musicPath;
playButton = $('.btn-play');
prevButton = $('.btn-prev');
nextButton = $('.btn-next');
$('.btn-play').on('click', function(){
if(playButton.html() == '<i class="zmdi zmdi-play"></i>'){
playButton.html('<i class="zmdi zmdi-pause"></i>');
if($('.cover-box').hasClass('rotate')){
$('.cover-box').css('animation-play-state', 'running');
} else {
$('.cover-box').addClass('rotate');
}
songDuration = readableDuration(Audio.duration);
$('.duration-time').html(songDuration);
Audio.play();
} else {
playButton.html('<i class="zmdi zmdi-play"></i>');
$('.cover-box').css('animation-play-state', 'paused');
Audio.pause();
}
});
Audio.ontimeupdate = function(){
songCurrentTime = readableDuration(Audio.currentTime);
songCurTimeLong = Math.floor(Audio.currentTime);
songDurLong = Math.floor(Audio.duration);
$('.current-time').html(songCurrentTime);
var musicProgres = (songCurTimeLong / songDurLong) * 100;
$('.music-progres-current').css('width', musicProgres + '%');
};
function readableDuration(seconds) {
sec = Math.floor( seconds );
min = Math.floor( sec / 60 );
min = min >= 10 ? min : '0' + min;
sec = Math.floor( sec % 60 );
sec = sec >= 10 ? sec : '0' + sec;
return min + ':' + sec;
}
</script>
</body>
</html>]
Buat File Style CSS
Setelah membuat file index, langkah selanjutnya adalah membuat file style css untuk kustomisasi tampilan menjadi lebih bagus dan menarik. Berikut skripnya:
[body {
padding: 20px;
margin: 0;
width: 100%;
}
.container {
position: relative;
font-family: 'Roboto', sans-serif;
font-size: 100%;
width: 350px;
height: 600px;
overflow: hidden;
margin: 0 auto
}
.music-cover-background {
width: 100%;
height: 600px;
background-image: url('../../assets/img/kasih putih.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
filter: blur(4px);
-moz-box-shadow: inset 0 0 20px #000000;
-webkit-box-shadow: inset 0 0 20px #000000;
box-shadow: inset 0 0 20px #000000;
}
.music-cover {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
text-align: center;
width: 100%;
padding-top: 25%;
}
.cover-box {
height: 200px;
width: 200px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
border: 3px solid white;
outline: none;
}
.music-cover img {
width: 200px !important;
height: 200px !important;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
outline: none;
}
.rotate {
outline: none;
-webkit-animation: rotate 20s linear infinite;
-moz-animation: rotate 20s linear infinite;
animation: rotate 20s linear infinite;
}
.music-cover-dot {
height: 20px;
width: 20px;
background-color: white;
border-radius: 50%;
position: absolute;
top: 63%;
left: 46.4%;
border: 5px solid grey;
}
.music-information-background {
position: absolute;
top: 410px;
opacity: .5;
left: 0;
width: 100%;
height: 120px;
background-color: #333;
}
.music-information {
position: absolute;
top: 410px;
left: 0;
width: 100%;
height: 120px;
color: white;
text-align: center;
padding: 20px 0;
}
.music-title h1,
.music-singer h2 {
padding: 0;
margin: 0;
margin-bottom: 5px;
}
.music-title {
}
.music-title h1 {
font-size: 21px;
}
.music-singer {
margin-bottom: 15px;
}
.music-singer h2 {
font-weight: normal;
font-size: 15px;
}
.music-playlist {
float: left;
padding-left: 15px;
display: inline-block;
font-size: 14px;
}
.music-time {
float: right;
padding-right: 15px;
display: inline-block;
font-size: 14px;
}
.music-progres {
background-color: #C2185B;
height: 10px;
width: 412px;
position: absolute;
z-index: 1;
top: 520px;
}
.music-progres-current {
background-color: white;
height: 9.5px;
outline: none;
border: none;
width: 0%;
position: absolute;
top: 520px;
border-radius: 0 10px 10px 0;
display: block;
z-index: 2;
}
.music-controls {
position: absolute;
width: 100%;
height: 70px;
background-color: #E91E63;
color: white;
text-align: center;
top: 530px;
}
.music-controls span {
display: inline-block;
width: 50px;
height: 50px;
font-size: 30px;
padding-top: 20px;
cursor: pointer;
vertical-align: middle;
margin: 0 5px;
outline: none;
}
span.btn-large {
font-size: 45px;
border: 1px solid white;
border-radius: 50%;
padding: 0px;
margin: 0;
}
@keyframes rotate {
from {
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@media only screen and (min-width: 1024px) {
.music-controls {
bottom: 65px;
}
.music-progres {
bottom: 135px;
}
.music-progres-current {
bottom: 63px;
}
}]
[/lock]Berikut tampilan dari skrip-skrip di atas: |
| Tampilan pemutar musik yang berhasil dibuat |
Penutup
Pemutar musik sederhana ini sangat benar-benar sederhana. Fitur yang tersedia juga terbatas hanya play dan pause saja. Namun ditambah dengan animasi gambar sampul yang berputar yang menggunakan CSS3. Sementara pemutar musiknya sendiri menggunakan Audio HTML5.
Fitur yang belum tersedia yaitu playlist, menaikan dan menurunkan volume, berpindah progres posisi lagu dan lain-lain. Insya Allah, jika banyak permintaan akan dilanjutkan di kemudian hari. :)
COMMENTS