Pada kesempatan kali ini saya akan membahas tentang bagaimana Membuat SlidingUpPanel Dengan HTML, CSS dan javascript. Biasanya SlidingUpPanel ini banyak digunakan di aplikasi-aplikasi pemutar musik di Android. Namun disini kita akan mencoba membuatnya menggunakan HTML, CSS dan javascript. Kita akan membuat pemutar musik sederhana dengan SlidingUpPanel yang hampir mirip dengan Google Play Music.
Sebelum memulai ada baiknya Anda menginstall Nodejs terlebih dahulu jika di Komputer/Laptop Anda belum terinstall Nodejs. Nodejs merupakan teknologi javascript sisi server. Anda dapat mendownload Nodejs di https://nodejs.org.
Setelah mengistall nodejs Anda perlu menginisialisasikan folder proyek Anda terlebih dahulu, dan mengisi rincian tentang proyek Anda. Pada folder proyek Anda buka terminal/cmd kemudian ketikkan perintah berikut.
npm initSetelah itu isi semua rincian yang ditanyakan.
Selanjutnya Anda peru menginstall beberapa modul yang akan kita gunakan diantaranya adalah:
- express
- jsmediatags
- fs
- path
- supervisor
Mac/Linux :
sudo npm install -g [nama-module]Windows :
npm install -g [nama-module]Ubah [nama-modul] menjadi nama modul yang ingin diinstall, contoh saya ingin menginstall modul express pada laptop yang memiliki sistem operasi Windows maka saya mengetikan perintah berikut :
npm install -g express.Sebelum membuat file-file untuk sisi klien kita perlu membuat minimal 1 file javascript untuk digunakan di sisi server. Buatlah file baru dan beri nama index.js, kemudian tuliskan script berikut.
'use strict';
var fs = require('fs'),
express = require('express'),
app = express(),
path = require('path');
var data = [];
readFiles('songs/', function(filename, content) {
data.push('http://localhost:3000/songs/' +filename);
}, function(err) {
throw err;
});
function readFiles(dirname, onFileContent, onError) {
fs.readdir(dirname, function(err, filenames) {
if (err) {
onError(err);
return;
}
filenames.forEach(function(filename) {
fs.readFile(dirname + filename, 'utf-8', function(err, content) {
if (err) {
onError(err);
return;
}
onFileContent(filename, content);
});
});
});
}
app.use(function (req, res, next) {
var filename = req.url || "index.html";
var ext = path.extname(filename);
var localPath = __dirname;
var validExtensions = {
".html" : "text/html",
".js": "application/javascript",
".json": "application/json",
".css": "text/css",
".txt": "text/plain",
".jpg": "image/jpeg",
".gif": "image/gif",
".png": "image/png",
".ico": "image/png",
".svg": "image/svg+xml",
".webm": "audio/webm",
".aac": "audio/aac",
".ogg": "audio/ogg",
".wav": "audio/wav",
".mp3": "audio/mpeg",
".mp4": "audio/mp4",
".m4a": "audio/mp4"
};
var isValidExt = validExtensions[ext];
if (isValidExt) {
localPath += filename;
fs.exists(localPath, function(exists) {
if(exists) {
console.log("Serving file: " + localPath);
getFile(localPath, res, validExtensions[ext]);
} else {
console.log("File not found: " + localPath);
if(ext === 'text/html'){
getFile(__dirname + '/404.html', res, validExtensions[ext]);
}
}
});
} else if(req.url == "/songlist"){
res.setHeader("Content-Type", 'application/json');
res.statusCode = 200;
res.end(JSON.stringify(data));
}else {
console.log("Invalid file extension detected: " + ext);
getFile(__dirname + '/index.html', res, 'text/html');
}
});
app.listen(3000);
function getFile(localPath, res, mimeType) {
fs.readFile(localPath, function(err, contents) {
if(!err) {
res.setHeader("Content-Length", contents.length);
res.setHeader("Content-Type", mimeType);
res.statusCode = 200;
res.end(contents);
} else {
res.writeHead(500);
res.end();
}
});
}
Pada script diatas saya menggunakan express untuk membuat http server pada port 3000, kemudian terdapat fungsi app.use() yang digunakan untuk mengirim resource ke sisi klien berdasarkan url yang diminta, disana saya hanya melakukan pengecekan apakah file resource yg diminta valid atau tidak dan apakah file tersebut tersedia di sisi server.
Sekarang kita akan mulai membuat desainnya, pertama-tama buatlah file html baru beri nama index.html kemudian buatlah template HTML seperti berikut.
<html>Anda dapat menggunakan lagu yang Anda miliki dan menempatkannya di folder songs, pastikan nama file tidak ada spasi untuk menghindari error saat memainkan lagu, karena spasi akan di konversi secara otomatis menjadi karakter unicode sehingga nantinya akan muncul error bahwa file tidak ditemukan karena spasi pada nama file diubah ke karakter unicode.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="author" content="Muhammad Sayuti" />
<meta name="viewport" content="width=device-width,minimum-scale=1">
<meta name="theme-color" content="#EA2663">
<title>Sliding Up Panel</title>
</head>
<body>
<div class="playlist">
<ul>
</ul>
</div>
<div id="sliding-up-panel">
<div id="sliding-up-panel-header">
<img src="assets/img/albumart_mp_unknown.png" class="coverart header" />
<div class="meta header">
<span class="artist"></span>
<span class="title"></span>
</div>
<div class="player-control header">
<a href="#" id="prev-btn">Prev</a>
<a href="#" id="play-btn" state="pause"><img src="icons/play-button.svg" style="width:25px;height:25px;"/></a>
<a href="#" id="next-btn">Next</a>
</div>
</div>
<div id="sliding-up-panel-body">
<img src="assets/img/albumart_mp_unknown.png" class="coverart content" />
<div class="meta content">
<span class="artist"></span>
<span class="title"></span>
</div>
<div class="player-control content">
<a href="#" id="prev-btn">Prev</a>
<a href="#" id="play-btn" state="pause"><img src="icons/play-button.svg" style="width:25px;height:25px;"/></a>
<a href="#" id="next-btn">Next</a>
</div>
</div>
</div>
<audio id="player" src="" style="display:hidden;"></audio>
</body>
</html>
Pada template HTML diatas tag audio saya beri property
style dimana value dari display adalah hidden karena nantinya kita tidak menggunakan kontrol default dari element audio,namun menggunakan beberapa link yang dapat Anda lihat pada element div dengan nama class player-control. Disini css saya bagi menjadi 2 file, 1 yang dibuat untuk mengatur tampilan SlidingUpPanel dan yang kedua untuk mengatur tampilan yang lain.Buat file baru dan beri nama sliding-up-panel.css kemudian isikan seperti berikut.
#sliding-up-panel{
display:block;
position:fixed;
top:0;
left:0;
right:0;
bottom: 0;
}
#sliding-up-panel-header{
background-color: #424242;
box-sizing: border-box;
position:relative;
width: 100%;
height: 64px;
overflow: hidden;
}
#sliding-up-panel-body{
background-color: #757575;
overflow: auto;
height: 100%;
width: 100%;
}
Sekarang buat 1 file css lagi beri nama player.css, kemudian isikan seperti berikut.*{
padding:0px;
margin:0px;
font-family:san-serif;
font-size:24px;
}
html,body{
background-color: #757575;
}
a{
text-decoration: none;
}
.playlist{
display: block;
width:100%;
}
/* Playlist style */
.playlist ul li{
display: block;
border-bottom: 1px solid black;
}
.playlist ul li a{
height: 57px;
display: block;
color: white;
}
.playlist ul li a.active{
background-color: rgba(0,0,0, 0.5);
color: #42A5F5;
}
.playlist .metatag .title{
font-size: 16px;
white-space: nowrap;
}
.playlist .metatag.playlist{
float:left;
padding:10px;
width: 87.3%;
overflow: hidden;
}
.playlist .metatag .artist{
font-size: 14px;
white-space: nowrap;
}
.playlist .cover{
height:100%;
max-width:8%;
}
/* Player Control style */
.player-control{
display: flex;
flex-basis: 33.3333333%;
align-items: center;
align-self: baseline;
width:134px;
}
/* to prevent SidingUpPanel not moving when we drag the header
* we need to set pointer-events to none.*/
.player-control.header{
pointer-events: none;
height: 100%;
padding: 0 0.5em;
float: right;
}
.player-control.content{
height: 64px;
margin: 0 auto !important;
pointer-events: none;
}
/* because it's a link with fake href set user-select to none and
* retrieve all pointer-events */
.player-control a{
pointer-events: all;
user-select: none;
}
.player-control img{
margin: auto 0;
width:100%;
pointer-events: none;
}
.play-btn img{
width: 50px;
height: 50px;
}
.next-btn img{
width: 40px;
height: 40px;
}
.prev-btn img{
width: 40px;
height: 40px;
}
/* Meta style General*/
.meta{
pointer-events: none;
color: #FFF;
}
.meta .title{
font-size: 16px;
white-space: nowrap;
display: inline-block;
position: relative;
left:0px;
}
.meta .artist{
font-size: 14px;
white-space: nowrap;
}
.marquee-title{
display: inline-block;
transition: transform 20s linear infinite;
animation: marquee2 20s linear infinite;
}
.marquee-artist{
display: inline-block;
transition: transform 20s linear infinite;
animation: marquee 20s linear infinite;
}
/* Meta style for sliding-up-panel-header*/
.meta.header{
display: flex;
flex-flow: row wrap;
float:left;
margin:15px;
max-width: 200px;
overflow: hidden;
}
/* Meta style for sliding-up-panel-body*/
.meta.content{
display: flex;
flex-flow: row wrap;
align-items: center;
margin: 1.5em auto;
max-width: 200px;
overflow: hidden;
text-align: center;
}
/* Coverart style*/
img.coverart{
display: hidden;
}
img.coverart.header[src]{
float: left;
pointer-events: none;
height:100%;
max-width: 70px;
border: none;
}
img.coverart.content[src]{
display: block;
margin: 0.5em auto;
height:50%;
border: none;
}
/* Keyframes animation */
@keyframes marquee {
0% {
transform:translateX(-25%);
}
25% {
transform:translateX(-50%);
}
50% {
transform:translateX(-25%);
}
75% {
transform:translateX(0%);
}
100%{
transform:translateX(-25%);
}
}
@keyframes marquee2 {
0% {
transform:translateX(0%);
}
25% {
transform:translateX(-25%);
}
50% {
transform:translateX(-50%);
}
75% {
transform:translateX(-25%);
}
100%{
transform:translateX(0%);
}
}
Sekarang desain awal sudah selesai, Anda dapat dapat menjalankan nodejs server dengan membuka cmd/terminal pada folder proyek Anda dan mengetikkan perintah
supervisor index.js. Tampilan yang Anda lihat kurang lebih akan seperti berikut.
Pada postingan selanjutnya kita akan mulai membuat file-file javascript sisi klien.
