Halo semua selamat datang diartikel ini, mungkin anda pernah terpikirkan dengan pengembangan aplikasi musik sederhana sendiri. Dalam artikel ini saya akan membahas cara buat aplikasi pemutar musik yang mencakup membuat daftar putar, memutar musik, menjeda musik, menghentikan musik, beralih ke lagu sebelumnya, dan lagu berikutnya seperti aplikasi pemutar musik pada umumnya, langsung saja kita mulai cara pembuatannya.
Sebelum memulai tutorialnya silahkan anda download terlebih dahulu bahan-bahan extensi dan gambar yang dibutuhkan untuk membuat aplikasi pemutar musik dibawah ini, kamu bisa menggunakan gambar untuk musiknya bebas nggak mesti yang dibawah:
Download Extensi dan Gambar disini
Jika membutuhkan file demo AIA download disini
Jika kamu sudah mendownloadnya ekstrak file tersebut menggunakan WinRAR jika kamu menggunakan komputer/laptop, tapi jika kamu menggunakan smartphone anda bisa menggunakan file manager bawaan untuk mengekstraknya atau Zarchiver untuk lebih mudah.
atau anda bisa juga mendownload gambar dan extension pada link yang tertera dibawah berikut ini:
1. Desain tampilan Aplikasi Pemutar Musik
Hal pertama yang harus dilakukan ialah pergi dahulu ke situs web MIT App Inventor dan berilah projek baru dengan cara klik NEW PROJECT dan beri nama Media Pemutar
Kemudian jika anda sudah membuat project baru langkah berikutnya kita akan memasukan bahan-bahan terlebih dahulu dengan cara extrak file diatas yang sudah didownload, lalu klik upload file pada bagian "Media"
Lalu jika sudah anda tinggal pilih saja bahan gambar yang telah diekstrak sebelumnya, pilih saja semua gambar untuk di import ke media, jika sudah mengimport gambar semua selanjutnya kita akan mengimport extension dengan cara klik Extension pada pallete lalu klik Import extension.
Setelah sudah kalian klik dan seret HorizontalArrangement dan VerticalArrangement keduanya disetel ditengah dengan cara klik AlignHorizontal dan AlignVerticalnya menjadi 3 dan 2 (pada bagian screen1), ubah ukuran HorizontalArrangement tingginya menjadi Automatic dan lebarnya fill parent, jika yang VerticalArrangement ubah menjadi Fill parent semua.
Kemudian anda bisa mengubah tema backgroundnya contoh saya beri warna hitam, dengan cara klik pada VerticalArrangement lalu pada bagian BackgroundColor di Appearance klik yang warna hitam, begitupun sama dengan background Screen1, HorizontalArrangement dan lain sebagainya semua caranya sama.
Kemudian anda tambahkan komponen "FilePicker" pada bagian Media klik dan seret saja ke bagian HorizontalArrangement1 lalu anda bisa ubah ukuran tinggi 45 dan lebar 140 pixel, ukuran tersebut saya sesuaikan dengan gambar untuk menambahkan musik, jadi anda bisa menyesuaikan dengan ukuran gambar yang kalian punya.
Selanjutnya kita akan tambahkan HorizontalArrangement lagi, dengan klik dan seret HorizontalArrangement (dibawah VerticalArrangement1) lalu ubah ukurannya menjadi tingginya Automatic dan lebarnya Fill Parent.
Lalu klik dan seret button kedalam HorizontalArrangement2, ubah ukuran tinggi dan lebar menjadi 66 pixel, kemudian kosongkan teks pada button lalu anda ubah gambarnya menjadi gambar musik dengan cara klik dulu buttonnya lalu pada bagian image klik dikolomnya lalu pilih gambar yang sudah diimport sebelumnya, kemudian CTRL + C button dan CTRL + V pada keyboard, untuk menyalin button tersebut.
 |
| Gambar 1.1 |
Langkah selanjutnya anda ubah nama button yang tengah pada HorizontalArrangement2 menjadi PlayPauseBtn. Karena kita akan membuat tombol play dan pause dengan button yang sama tapi gambar yang berbeda, begitupun dengan button yang kiri dan kanan ubah menjadi PrevBtn dan NextBtn serta StopBtn, lalu sesuaikan saja gambarnya.
Kemudian kita akan menambahkan Notifier dengna cara pada bagian UserInterface cari Notifier klik dan seret ke screen, lalu cari juga komponen "Player" pada bagian Media, lalu klik dan seret ke screen (dimana saja), desain sudah selesai, pastikan desain sesuai dengan gambar diatas, oh ya jangan lupa tambahkan ListView drag & drop ke VerticalArrangement dan seting ukuran tinggi dan lebar ListView menjadi fill parent semua.
2. Koding Blok untuk Pemutar Musik
Untuk mengkoding blok kita akan memulainya dengan klik tombol "Block" pada kanan atas, lalu kita akan bisa langsung mengcodingnya, pertama kita akan mengvariabelkan global jadi kita akan klik Variables pada block lalu klik dan seret Initialize global ke Viewer, maka akan menjadi seperti ini.
 |
| Gambar 2.0 |
Kodingan diatas berarti, initialize global songName . create empty list dan songUrls = berarti untuk mengelola musik yang ada didalam daftar kita, initialize global musicPaused . false = berarti untuk mengetahui bahwa saat tombol play ditekan, dan initialize global musicPos . 1 = berarti pengguna dapat menambahkan lagu hanya 1 file (kurang lebih seperti itu koreksi jika saya salah).
Selanjutnya kita akan menambahkan when screen initialize, dan kita akan tetapkan ke "set FilePicker . MimeType to File Audio, Call Screen1 .AskForPermision, PermisionName = Permision . Read Media Audio, maka akan menjadi seperti ini.
 |
| Gambar 2.1 |
Kodingan tersebut secara keseluruhan berarti mengatur agar aplikasi bisa memilih file audio dan meminta izin yang diperlukan untuk mengakses file tersebut ketika aplikasi dimulai (kurang lebih seperti itu, koreksi jika saya salah).
Lalu kita akan menambahkan when FilePicker1 AfterPicking, klik Lists pada block lalu klik dan seret add items to list, lalu ambil variable yang songUrls dan ambil item FilePicker . selector.
 |
| Gambar 2.2 |
Kodingan diatas secara keseluruhan, berarti setelah pengguna memilih file audio menggunakan "FilePicker1" file yang dipilih akan ditambahkan ke dalam daftar global "songUrls" apa itu songUrls?, itu adalah nama variable yang telah kita tambahkan sebelumnya, (koreksi jika salah).
Kemudian kita akan membuat jalur musik, agar pengguna dapat mengimport dan membaca nama musik yang telah diimport lewat perantara extensi, berikut ini adalah kodingannya.
 |
| Gambar 2.3 |
Kodingan selanjutnya kita akan menambahkan suatu kode yang dipasangkan pada initialize local filePath to, kode dibawah ini berarti akan mengambil URI file yang dipilih oleh pengguna, mengkonversinya menjadi path file, lalu memisahkan path tersebut pada setiap karakter "/" untuk mendapatkan daftar elemen dari path file tersebut (koreksi jika salah).
 |
| Gambar 2.4 |
Jika anda semua sudah mengikuti kodignan diatas semuanya maka kodenya akan menjadi seperti pada Gambar 2.5 dibawah ini.
 |
| Gambar 2.5 |
Sekarang kita mempunyai kodingan variabel lokal dengan file jalur yang berisikan item:
- Penyimpanan
- Musik
- Beberapa nama lagu .mp3
dan lain sebagainya, koreksi jika saya salah dalam mengartikan kode yang ada pada Gambar 2.5.
Lalu jika anda kodenya sudah persis sama seperti diatas anda bisa menambahkan kode lainnya seperti gambar dibawah ini.
 |
| Gambar 2.6 |
Kode yang ada pada gambar 2.6 secara keseluruhan berarti akan melakukan hal berikut ini setelah pengguna memilih file:
- Menambahkan URI file yang dipilih kedalam daftar global "song Urls"
- Mengkonversi URI file yang dipilih menjadi path dan memisahkan path tersebut menjadi elemen-elemen
- Menambahkan nama file (elemen terakhir dari path) ke dalam daftar global "songName"
- Memperbarui "ListView1" dengan elemen-elemen dari daftar "songName", sehingga nama file yang dipilih akan ditampilkan pada "ListView".
Dengan kata lain kode ini mengelola daftar file audio yang dipilih oleh pengguna dan menampilkan nama-nama file tersebut dalam sebuah tampilan daftar ListView.
Sekarang kita akan mengerjakan untuk tombol pemutar musiknya, kita mulai dengan kodingan when PlayPauseBtn.click kita gunakan if, then dan else, if diisi dengan gambar playPauseBtn menggunakan teks yang sesuai dengan gambar anda (disini karena saya namanya play.png maka ditulis sama dengan itu).
 |
| Gambar 2.7 |
Jika tombol playpause ditekan saat ikon play ditampilkan diatasnya, maka ini berarti kita harus memulai memutar musik tetapi kita juga perlu tahu apakah musik dijeda sehingga kita dapat melanjutkannya, jadi periksa variabel musicPaused. Jika false, kita perlu memulai musik dari awal, kita juga perlu memeriksa apakah pengguna telah menambahkan beberapa lagu atau tidak dan jika ttidak, kita harus menampilkan peringatan menggunakan notifier.
 |
| Gambar 2.8 (kode ini ada kesalahan lihat fullnya dipaling bawah). |
Arti dari kode pada gambar 2.8 diatas adalah, jika tombol playpause ketika mau memulai atau melanjutkan pemutaran musik jika ditekan pada saat gambar tombol play.png gambarnya akan menjadi play.png dan musik belum diputar. Jika ditekan saat pada gambar tombol pause.png, musik akan dijeda (kurang lebih seperti itu artinya, tolong koreksi jika salah), Harap diperhatikan gambar 2.8 ada kesalahan mohon untuk lihat kode fullnya yang ada dibagian paling bawah, maaf semua.
 |
| Gambar 2.9 |
Gambar diatas untuk tombol stop, arti dari gambar 2.9 adalah menghentikan pemutaran musik, mengatur status musik menjadi tidak dijeda, dan mengubah gambar tombol/pause menjadi play (koreksi jika salah).
Oh ya apa yang terjadi ketika pengguna menyelesaikan satu lagu dan harus memulai memainkan lagu berikutnya dalam daftar putar, yaitu songUrls, tentu akan bergantian lagunya tapi bagaimana jika pengguna hanya punya 1 lagu? mari kita koding agar menjadi yang diharapkan pengguna.
 |
| Gambar 3.0 |
Gambar 3.0 berarti kode prosedur ini akan memutar lagu berikutnya dalam daftar "songUrls", mengatur sumber player musik ke lagu tersebut, dan memperbarui status serta tampilan tombol play/pause sesuai kondisi pemutaran musik, (kurang lebih seperti itu artinya koreksi jika salah).
Selanjutnya kita akan menambahkan kode untuk tombol next dan player, dengan cara tambahkan when NextBtn . Click do call playNextSong (untuk call ada di block procedures) lakukan hal yang sama untuk Player1 . Completed do call playNextSong.
 |
| Gambar 3.1 |
Kode gambar 3.1 diatas berarti kita mengatur button next supaya ketika diklik maka akan memanggil kodingan dari playNextSong yang mana sebelumnya kita sudah membuat kodingan prosedur dengan nama playNextSong, lihat pada gambar 3.0 (kurang lebih seperti itu koreksi jika salah).
Lalu kita akan menambahkan kode lagi untuk tombol preview, kode ini mirip-mirip dengan kode Nexbtn cuma kita akan mengubahnya menjadi dikurangi 1 dari musicPos tetapi kita melakukannya ketika ada lagu yang sebelumnya sudah diputar.
 |
| Gambar 3.2 |
Kode terakhir kita akan menambahkan kode untuk menghapus item dari daftar putar, yaitu listview dengan mengetuknya. Di sini, kita perlu menghapus dari dua daftar dan juga memperbarui musicPos kita. Misalnya, kita sedang memainkan lagu no. 4 dan pengguna menghapus lagu no. 2, maka musicPos kita sekarang seharusnya menjadi 3, bukan 4.
Kita hanya perlu melakukan ini jika pengguna menghapus lagu yang berada diposisi kurang dari music Pos. Jika pengguna menghapus lagu no.6 dan kita sedang memainkan lagu no. 4, maka musicPos kita tidak terpengaruh oleh perubahan ini dan akan tetap 4 berikut ini adalah kodenya.
 |
| Gambar 3.3 (kode ini ada kesalahan lihat fullnya dipaling bawah). |
Kita sudah selesai dengan kodingannya, anda dapat mengexpornya kedalam komputer anda.
Berikut ini adalah link gambar kodingan full untuk aplikasi pemutar musik sederhana, pastikan anda tidak ada yang salah dalam pengkodingannya, gambar:
Gambar Kodingan Block Full: https://www.gamesoft.eu.org/p/kodingan-full-untuk-apk-pemutar-musik.html
Terima kasih sudah berkunjung keweb ini saya harap tutorial ini dapat berguna untuk anda, jangan lupa untuk memberikan kritik dan saran, jika ada salah dan ada hal yang perlu dikoreksi jangan segan untuk bertanya dikolom komentar karena kita disini sama-sama belajar jadi sampai jumpa lagi diartikelku selanjutnya.
Posting Komentar