Bikin Aplikasi Cari Lirik Lagu Sendiri

Share:
Aplikasi Cari Lirik Lagu

Halo dunia! Kalian pasti sering kan, ngoding sambil dengerin lagu favorit? Emang paling enak banget, kalo pas lagi ngoding itu dengerin lagu. Rasanya tangan itu gerak sendiri tanpa disuruh. Tambah enak lagi kalau dengerinnya sambil ikutan nyanyi. Beeuh.... Dijamin deh bugs ga berani muncul.

Tapi, yang jadi masalah biasanya kita ngga hafal semua lirik dari lagu yang kita denger. Ada, bagian tertentu yang kita tau, biasanya sih reff-nya. Dan pasti kalo ngga tau liriknya, pasti kalian bakalan nge-search liriknya di Google. Banyak banget situs-situs yang nyediain lirik lagu, ada Kapanlagi, ada AzLyric, dan ada beberapa blog-blog kecil yang pos-nya lirik-lirik lagu.

Kan kita programmer nih. Gimana kalo kita bikin aplikasi kayak mereka?

"Ah, ga mungkin! Ga ada waktu buat ngurusin blog lirik lagu!".

Ngapain bikin blog? Kita bikin aplikasi-nya aja. Yang bisa memuat ratusan bahkan ribuan lagu dalam satu aplikasi.

"Emang bisa ya kaya gitu?"

Bisa banget dong! Kemarin saya pas lagi gabut, nyoba bikin aplikasi lyric finder yang bisa ngindex banyak lirik lagu. Setelah berhasil dibikin, saya nyediain API biar programmer lain bisa nyicipin ini.

Baik. Langsung to the point aja.

Secara summary, kita akan melakukan CURL GET ke URI ini

http://carilirik.ml/aksi/api.php?keyword=ARTIS+JUDUL+LAGU

Setelah di-curl, nanti kita akan mendapatkan respon seperti ini

{
     "status": "200",
     "description": "success",
     "song": {
          "title": "Judul Lagu",
          "artist": "Penyanyi",
          "lyric": "Liriknya",
     }
}

Tapi kan ga mungkin kita bikin aplikasi yang dimunculin itu json? Ga enak banget gitu kalo dilihat. Makanya kudu diolah dulu json-nya. Tapi sekarang saya ga akan bahas ngolah json, tapi lebih ke pembuatan aplikasinya (web) aja.

Pertama seperti biasa, bikin HTML-nya aja dulu karena kita main native-an. Script-nya kayak gini


<!DOCTYPE html>
<html>
<head>
     <title>Lyric Finder</title>
     <script src="http://cdn.riyansatria.tk/embo.js"></script>
</head>
<body>

<div id="form">
     <h2>Cari lirik</h2>
     <input type="text" id="key">.
     <button id="cari">CARI</button>
</div>

<div id="liriknya"></div>

<script src="script.js"></script>
</body>
</html>

Dari script di atas, kita pakai library EmboJS sebagai pembantu kita nyekrip JS-nya. Dan berikut ini adalah script.js-nya

klik("#cari", function() {
     var key = pilih("#key").value
     pos("setCookie.php", "key="+key, function() {
          ambil("action.php", function(res) {
               tulis("#liriknya", res)
          })
     })
})

Menurut script JS ini, kita akan bikin 2 file lagi, yaitu setCookie.php yang fungsinya ngubah keyword yang diinput jadi cookie sama action.php buat prosesnya. Sebenarnya file setCookie ini ga perlu dibikin kalau tau caranya ngatur cookie pake JS. Berhubung saya ga tau caranya, jadi ya pake 2kali jalan gini.

Untuk file setCookie simpel aja sih, kaya gini :

<?php

$key = $_POST['key'];
setcookie("keyword", $key, time() + 50, "/");

?>

Oh iya, kalau misalnya mau ngeset cookie pake JS, pastikan nama cookie-nya itu "keyword" ya, soalnya di action.php nanti pake nama ini.

Script action.php :

<?php

$keyword = $_COOKIE['keyword'];

$get = file_get_contents("http://carilirik.ml/aksi/api.php?keyword=".$keyword);
$lirik = json_decode($get, true);

echo "<h2>" . $lirik['song']['title']." - " . $lirik['song']['artist'] . "</h2>".
         "<p>" . $lirik['song']['lyric'] . "</p>";

?>

Sip! Sekarang aplikasinya udah jadi. Tinggal di-tes aja. Script di atas saya jamin berhasil, tapi belum pasti, kali aja saya salah ketik. Script di atas tidak saya coba, saya ngetiknya ngarang langsung di Halaman bikin pos. Gimana? Sip kan? Okesip!

Demo : http://carilirik.ml

2 komentar: