Membuat Playlist Musik / Lagu di HTML
Membuat Playlist Musik / Lagu di HTML - Seperti hal nya pada postingan sebelumnya dimana dengan mengangkat tema yang sama yaitu mengenai pemasangan musik di halaman web dengan menggunakan bahasa struktur HTML. Namun ada yang berbeda dari sebelumnya itu bisa terlihat dari jumlah lagu yang bisa di play nya, pada postingan sebelumnya kita hanya bisa memutar 1 lagu dengan pemutar 1 pemutar lagu sedangkan sekarang didalam 1 pemutar lagu bisa memutar beberapa lagu atau yang biasa di sebut dengan playlist music.
baca juga : Menyisipkan audio/lagu di HTML
Bila kita bicara tentang musik itu tidak akan ada habisnya, semua di belahan dunia pasti sudah mengetahui apa itu musik, meski berbeda - beda jenis musik yang disukai dalam setiap orang. Tanpa kita sadari musik bisa salah satu sarana penghibur jiwa dikala kita yang sedang sedih, entah itu sedang senang. Dan juga bisa untuk sebagai obat dikala pikiran kita sedang stress yang disebabkan oleh beberapa faktor. Tidak percaya? Silakan dicoba yaa ^_^
Musik dahulu hanya bisa dinikmati dengan keping CD (Compact Disc) saja kini bisa dinikmati di hp - hp yang mempunyai fitur pemutar musik dan sekarang website yang biasa kita gunakan untuk browsing informasi - informasi ternyata bisa juga lho di pasang pemutar musik, jadi kegunaannya untuk hiburan saja, misal kan kita boring (baca : bosan) baca artikel bisa sambil sambil memutar lagu.
Akan sedikit berbeda bila kita cara memasang nya, sebab tutorial sekarang berbeda dengan tutorial - tutorial sebelumnya yang berfokus pada tag HTML saja. Karena yang akan dibutuhkan sekarang tidak hanya HTML saja katakan saja ada JS(JavaScript), XML, CSS serta file - file pelengkap lainnya. Tetapi mohon maaf mungkin ini tutorialnya agak sedikit melompat ya, sebab pada tutorial sebelumnya belum dijelaskan penjelasan dasar - dasar dari bahasa yang akan kita pakai sekarang. Mungkin di tutorial selanjutnya akan dibahas.
Screenshot
- Web Editor (notepad++, DW,dll)
- Web Browser (Mozilla firefox, Chrome, dll)
- Download dahulu perlengkapannya disini
- Ekstrak didalam folder dengan nama bebeas, misa saya buat namanya playlist
- Buat folder dengan nama mp3 didalam folder playlist dan masukan musik mp3 nya ke dalam fodler mp
- Ketikan sintax/kode dibagian paling bawah artikel ini ke web editor
- Simpan dengan nama index.html dan simpan di dalam folder playlist
- Sekarang buka playlist.xml dan ganti nama yang dilingkari dibawah ini sesuai dengan nama mp3 yang anda masukan ke folder mp3
- Buka file index.html
- Selesai
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>GW Player</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body id="dewbody">
<div id="content">
<div id="players">
<h2>Playlist</h2>
<object type="application/x-shockwave-flash" data="dewplayer-playlist.swf" width="240" height="200" id="dewplayer" name="dewplayer">
<param name="wmode" value="transparent" />
<param name="movie" value="dewplayer-playlist.swf" />
<param name="flashvars" value="showtime=true&autoreplay=true&xml=playlist.xml" />
</object>
</div> <!-- #players -->
</div> <!-- #content -->
</body>
</html>
Credit : Dewplayer
6 comments
walah templet web ane jadi rusak gara gara lu
ReplyDeletetanggung jawab nih
kalo gak cocok dengan template nya, hapus lagi saja mas skrip playlist musiknya.
DeleteMisi mas mau nanya ko musik saya setelnya di localhost gaada suaranya ya ? Tapi di gom player bisa .. Mohon bantuannya...
ReplyDeleteMisi mas mau nanya ko musik saya setelnya di localhost gaada suaranya ya ? Tapi di gom player bisa .. Mohon bantuannya...
ReplyDeleteBaik, mohon ditunggu sedang dicari solusinya mba
DeleteSudah saya update silakan bisa mba ikuti lagi ya tutorialnya.
Delete