HTML5, Membuat MP3 Player #1


Kembali lagi di pembahasan tentang HTML5, sebelumnya jika yang belum mengetahui apa itu HTML5, bisa melihat postingan HTML5 sebelumnya. Bukan hanya bisa digunakan membuat web ataupun game saja, namun HTML5 dapat digunakan dalam pembuatan sebuah MP3 player. Bagaimana cara membuatnya? monggo disimak

#Tampilan Awal

1.Buatlah folder baru didalam folder “htdoc” XAMPP anda dengan nama “coba”. Nama dapat disesuaikan dengan keingan anda.

2.Selanjutnya buka notepad anda, bisa juga menggunakan adobe dreamweaver, maupun c++. Sesuai enaknya saja anda mengerjakannya dimana.

3.copy dan paste source code dibawah ini

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<meta name=”author” content=”Script Tutorials” />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″ />
<title>HTML5 Audio player with playlist | Script Tutorials</title>

<!– add styles and scripts –>
<link href=”css/styles.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”js/jquery-1.7.2.min.js”></script>
<script type=”text/javascript” src=”js/jquery-ui-1.8.21.custom.min.js”></script>
<script type=”text/javascript” src=”js/main.js”></script>
</head>
<body>
<header>
<h2>Pram Eko Mp3 Player</h2>
</header>
<div>

<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div></div>
<div></div>
</div>
<ul>
<li audiourl=”Minang-Marantau.mp3″ cover=”cover1.jpg” artist=”Unknow”>Marantau</li>//daftar lagu yang akan diputar

</ul>

</div>
</body>
</html>

4.Selanjutnya simpan dengan nama “index.html”.

 

#Membuat CSS

Kali ini akan membuat CSSnya, supaya tampilan tidak berantakan dan kelihatan rapi. Kembali membuat file baru dengan notepad.

1. Sebelumnya buat folder baru dengan nama file “css”, buka notepad dan Copy dan paste source code dibawah ini. Selanjutnya simpan dengan nama “styles.css”

* {
margin: 0;
padding: 0;
}
body {
background-color: #aaa;
}
header {
background-color:rgba(33, 33, 33, 0.9);
color:#fff;
display:block;
font: 14px/1.3 Arial,sans-serif;
margin-bottom: 10px;
position:relative;
}
header h2{
font-size: 22px;
margin: 0px auto;
padding: 10px 0;
width: 80%;
text-align: center;
}
header a, a:visited {
text-decoration:none;
color:#fcfcfc;
}

/* HTML5 Audio player with playlist styles */
.example {
margin: 50px auto 0;
width: 400px;
}
.player {
background: transparent url(“../images/spr.png”) no-repeat scroll center top;
height: 162px;
position: relative;
width: 326px;
z-index: 2;
}
.title, .artist {
font-family: verdana;
left: 167px;
position: absolute;

-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.title {
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
top: 23px;
}
.artist {
color: #EEEEEE;
font-size: 12px;
top: 40px;
}
.pl {
background: transparent url(“../images/spr.png”) no-repeat scroll -274px -175px;
cursor: pointer;
height: 34px;
left: 270px;
position: absolute;
top: 20px;
width: 32px;
}
.pl:hover {
top: 21px;
}
.cover {
background: transparent url(../data/cover1.jpg) no-repeat scroll center top;
border-radius: 5px 5px 5px 5px;
height: 94px;
left: 20px;
position: absolute;
top: 20px;
width: 94px;
}
.controls {
cursor: pointer;
height: 23px;
left: 167px;
position: absolute;
top: 65px;
width: 138px;
}
.controls .play, .controls .pause, .controls .rew, .controls .fwd {
background: transparent url(“../images/spr.png”) no-repeat scroll 0 0;
float: left;
height: 100%;
width: 33%;
}
.controls .play {
background-position: -8px -171px;
}
.controls .pause {
background-position: -8px -198px;
display: none;
}
.controls .rew {
background-position: -54px -171px;
}
.controls .fwd {
background-position: -100px -171px;
}
.controls .play:hover {
background-position: -8px -170px;
}
.controls .pause:hover {
background-position: -8px -197px;
}
.controls .rew:hover {
background-position: -54px -170px;
}
.controls .fwd:hover {
background-position: -100px -170px;
}
.hidden {
display: none;
}
.controls .visible {
display: block;
}
.volume {
height: 11px;
left: 186px;
position: absolute;
top: 96px;
width: 112px;
}
.tracker {
height: 15px;
left: 20px;
position: absolute;
top: 126px;
width: 285px;
}
.ui-slider-range {
background: transparent url(“../images/spr.png”) no-repeat scroll 5px -222px;
height: 100%;
position: absolute;
top: 0;
}
.ui-slider-handle {
cursor: pointer;
height: 10px;
margin-left: -5px;
position: absolute;
top: 2px;
width: 10px;
z-index: 2;
}
.volume .ui-slider-handle {
background: url(“../images/spr.png”) no-repeat scroll -201px -188px rgba(0, 0, 0, 0);
height: 13px;
width: 13px;
}
.playlist {
background-color: #333333;
border-radius: 5px 5px 5px 5px;
list-style-type: none;
margin: -10px 0 0 2px;
padding-bottom: 10px;
padding-top: 15px;
position: relative;
width: 326px;
z-index: 1;
}
.playlist li {
color: #EEEEEE;
cursor: pointer;
margin: 0 0 5px 15px;
}
.playlist li.active {
font-weight: bold;
}

2. Selanjutnya, download skin mp3 playernya disini

3. Setelah didownload, buat folder baru kembali didalam folder coba dengan nama folder “images”. Masukkan file yang telah didownload tadi kedalam folder images.

 

Untuk pembuatan selanjutnya menggunakan tambahan Javascript, bagaimana kelanjutannya ikuti di toturial selanjutnya.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s