Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Vue
Code

Bangun Pemutar Musik Dengan Vuetify

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Ilham Saputra (you can also view the original English article)

Final product image
What You'll Be Creating

Membangun aplikasi dengan Vue.js mudah, menyenangkan, dan nikmat. Anda dapat membangun aplikasi yang berfungsi dengan usaha minimal. Untuk membuktikan itu, hari ini saya akan menunjukkan kepada Anda betapa mudahnya membangun pemutar musik berfitur lengkap Anda sendiri. Agar lebih mudah, kami akan menggunakan Vuetify.js, pustaka UI bertenaga Vue.js, yang akan mempercepat konstruksi UI. Saya hampir bisa merasakan ketidaksabaran Anda, jadi mari kita mulai.

Anda dapat menemukan source code lengkap di repo GitHub. Dan di sini adalah demo kerja. Untuk mengikuti tutorial ini, Anda harus terbiasa dengan komponen Vue, komponen Vue file tunggal, dan sintaks ES2015.

Merencanakan Aplikasi

Setiap penciptaan dimulai dengan ide dan setidaknya beberapa perencanaan dasar. Jadi pertama-tama kita perlu memutuskan apa yang ingin kita bangun dan fungsionalitas apa yang ingin kita terapkan. Dikatakan bahwa sebuah gambar bernilai seribu kata, jadi mari kita mulai dengan sketsa sederhana dari pemutar musik.

Vue music player wireframe sketch

Saya membuat wireframe ini sehingga Anda bisa mendapatkan gagasan umum tentang UI yang ingin kita bangun. Langkah selanjutnya adalah mendeskripsikan fungsi yang ingin kita terapkan.

Seperti yang dikatakan John Johnson:

Pertama, selesaikan masalah. Kemudian, tulis kodenya.

Kami akan menggunakannya sebagai sumber pengetahuan, dan kami akan merencanakan aplikasi sebelum kami mulai mengkodekannya.

Komponen Aplikasi

Vue.js adalah kerangka kerja berbasis komponen. Jadi pertama-tama kita perlu membagi aplikasi menjadi komponen-komponen individual (lima dalam kasus kami, seperti yang ditunjukkan dalam sketsa di atas), dan untuk menguraikan fitur dan fungsi untuk masing-masing.

Judul Bar

Komponen ini akan berisi bagian-bagian berikut:

  • sebuah menu di sisi kiri
  • nama aplikasi di tengah
  • tiga ikon statis di sisi kanan

Info Panel

Komponen ini akan menampilkan informasi dasar tentang trek yang sedang diputar:

  • artis dan judul trek di sisi kiri
  • posisi dan durasi track saat ini di sisi kanan

Control Bars

Komponen ini akan berisi dua bar, yang akan mencakup semua kontrol yang diperlukan untuk memanipulasi trek audio dalam daftar putar pemutar.

  • penggeser volume dengan ikon di sebelah kiri (tampilannya akan berubah sesuai dengan tingkat volume dan ketika suara diredam), dan persentase volume di sebelah kanan
  • tombol untuk play, pause, stop, dan skip trek.
  • dua tombol di paling kanan: satu untuk mengulangi trek saat ini, dan satu lagi untuk mengacak urutan trek bermain
  • bar pencari yang menunjukkan posisi trek yang sedang diputar, dengan kemampuan untuk mengubahnya dengan klik mouse pada bar

Playlist Panel

Komponen ini akan berisi daftar putar trek dengan fungsi berikut:

  • menampilkan trek dengan jumlah, artis, judul, dan properti durasi yang tepat
  • pilih satu lagu pada sekali klik
  • memainkan lagu di klik ganda

Search Bar

Komponen ini akan menawarkan fungsionalitas pencarian dalam kasus-kasus ketika kita ingin mencari dan memutar trek tertentu.

Tentu saja, garis besar di atas tidak dapat mencakup semua detail dan nuansa, dan ini baik-baik saja. Untuk saat ini, cukup bagi kita untuk mendapatkan gambaran menyeluruh dari produk akhir. Kami akan menangani semua detail dan tantangan akhir selama proses pembangunan.

Jadi mari kita masuk ke bagian yang menyenangkan dan menulis beberapa kode!

Persiapan

Halaman mulai cepat Vuetify menawarkan banyak opsi untuk memulai. Kami akan menggunakan salah satu templat Vue CLI yang sudah ada yang disebut Webpack Simple. Jalankan perintah berikut di direktori yang ingin Anda gunakan untuk proyek ini:

Pertama, instal Vue CLI:

Kemudian, buat aplikasi:

Selanjutnya, buka direktori aplikasi dan instal semua dependensi:

Kami akan menggunakan Howler.js (pustaka audio JavaScript) untuk menangani bagian audio pemutar musik. Jadi kita perlu memasukkannya ke dalam proyek juga. Jalankan perintah berikut:

Dan akhirnya, jalankan aplikasi:

Aplikasi akan terbuka di localhost:8080 di browser default Anda. Anda akan melihat kerangka aplikasi Vuetify sederhana.

Mengutak-atik Template

Untuk menyesuaikannya dengan kebutuhan kita, kita perlu membersihkan templatenya dan mengubahnya sedikit. Ganti nama file App.vue ke Player.vue, buka, hapus semuanya di dalam, dan tambahkan yang berikut ini sebagai gantinya:

Kami membungkus aplikasi pemutar musik kami di komponen v-app, yang diperlukan agar aplikasi berfungsi dengan benar. Kami juga melewati dark prop, untuk menerapkan tema dark Vuetify.

Sekarang, buka file main.js, hapus konten asli, dan tambahkan yang berikut:

Juga, buka file index.html dan ubah konten tag <title> ke Vue Pemutar Musik. ke Vue Music Player.

Sekarang, di browser Anda, Anda akan melihat halaman gelap kosong. Dan voila. Anda siap untuk mulai membuat.

Sebelum Anda memulai coding, ada baiknya untuk mengetahui bahwa Vuetify menawarkan cuplikan kode dan pelengkapan otomatis untuk editor kode utama: VS Code, Atom, dan Sublime. Untuk mendapatkan cuplikan, cari ekstensi di editor favorit Anda (vuetify-vscode, atau vuetify-atom, atau vuetify-sublime).

Buat Komponen Judul Bar

Di direktori src, buat folder components baru. Kemudian, di folder itu, buat file PlayerTitleBar.vue dengan konten berikut:

Di sini, kami menggunakan komponen Vuetify berikut: toolbar, menu, button, icon, list, dialog, dan card.

Kami memisahkan menu, nama, dan ikon dengan komponen <v-spacer>. Untuk menampilkan atau menyembunyikan dialog, kita membuat properti data dialog: false. Nilainya akan beralih ketika kita mengklik About item menu.

Sekarang, di file Player.vue, impor komponen bar judul, daftarkan di objek komponen, dan tambahkan dalam template.

Sekarang, periksa hasilnya di browser Anda. Anda harus melihat yang berikut:

The player title bar

Kami akan mengulangi tiga langkah ini untuk empat komponen lainnya. Jadi ketika di bagian selanjutnya saya memberi tahu Anda untuk mengimpor, mendaftar dan menambahkan komponen dalam template, Anda harus mengikuti prosedur yang sama yang dijelaskan di sini.

Buat Komponen Daftar Putar

Di direktori root, buat folder playlist baru dan tambahkan file audio yang ingin Anda putar. Nama file harus ditulis dengan garis bawah antara kata-kata dan ekstensi .mp3 di bagian akhir — misalnya, Remember_the_Way.mp3. Sekarang, buat trek audio di dalam objek data Player.vue:

Setiap lagu memiliki title dan properti artist, objek howl diatur ke null, dan properti display diatur ke true.

Properti display akan digunakan ketika kita mengimplementasikan fungsi pencarian. Sekarang sudah diatur ke true untuk semua trek, sehingga semuanya terlihat.

Howler membungkus file audio dalam objek howl. Kami menetapkan howl ke null karena kami akan mengisinya secara dinamis pada penciptaan instance Vue. Untuk melakukan itu, kami menggunakan Vue created hook lifecycle.

Ini akan mengatur objek Howl baru untuk setiap trek dalam daftar putar.

Sekarang, buat komponen PlayerPlaylistPanel.vue dan tambahkan ini di dalam:

Pertama, kita meneruskan playlist prop dari file Player.vue. Selanjutnya, di dalam template, kita menelusuri setiap trek dengan v-for directive dan menampilkan index trek, diikuti oleh artis dan judul trek, dan durasi trek di paling kanan. Kami juga menggunakan v-show yang terikat pada properti display. Trek hanya akan terlihat jika display adalah true.

Sekarang, dalam file Player.vue, kita impor, mendaftar, dan menambahkan komponen playlist dalam template. Kemudian, kita mengikat playlist prop ke playlist data properti seperti ini: <player-playlist-panel :playlist="playlist"> </player-playlist-panel>.

Mari kita periksa hasilnya di browser:

The player playlist panel

Ada dua masalah disini. Pertama, jumlah trek tidak benar, dan kedua, durasi lagu ditampilkan dalam milidetik, tetapi kami ingin itu dalam hitungan menit. Kami akan memperbaiki setiap masalah ini dengan membuat filter pemformatan.

Dalam file main.js, buat filter numbers dan filter minutes, yang akan dapat diakses secara global. Selanjutnya, dalam PlayerPlaylistPanel.vue, kita menggunakannya seperti ini: {{ index | numbers }} dan {{ track.howl.duration() | minutes }}.

Sekarang, jika Anda memeriksa aplikasi, segala sesuatu harus ditampilkan dengan benar.

The player playlist panel with fixed numbers and minutes

Buat Tracks yang Dipilih

Dalam file Player.vue, tambahkan selectedTrack: null data properti dan mengikatnya ke komponen playlist (:selectedTrack = "selectedTrack"). Kemudian, kami melewati prop dalam file PlayerPlaylistPanel.vue (selectedTrack: Object).

Kami juga menambahkan klik event listener ke <v-list-tile-content @click="selectTrack(track)"> dan kemudian membuat metode selectTrack():

Sekarang, kembali pada Player.vue, menambahkan event selecttrack untuk komponen playlist (@selecttrack = "selectTrack") dan membuat metode selectTrack():

Sekarang, jika Anda pergi ke daftar putar dan klik pada trek, itu akan dipilih. Kami tidak dapat melihatnya, tetapi kami dapat membuktikannya di Vue DevTools. Di screenshot berikut, trek kedua dipilih:

The player playlist with selected track shown in DevTools

Styling Row dan Selection

Langkah berikutnya adalah untuk membuat selection terlihat. Untuk melakukannya, kami akan mengikat kelas yang akan mewarnai trek yang dipilih dalam warna oranye dan kelas lain yang akan membuat baris menjadi lebih gelap untuk membuat trek lebih mudah dibedakan. Letakkan yang berikut setelah direktif v-show:

Kami juga akan menambahkan kelas lain, yang akan menampilkan bilah gulir saat daftar menjadi terlalu besar.

Kami menambahkan kelas yang diperlukan di akhir file.

Dan begitulah. Sekarang, trek yang dipilih disorot dalam warna oranye.

The player playlist with selected track colored

Kami akan menambahkan fungsi putar klik ganda di akhir bagian berikutnya.

Bangun Komponen Kontrol Pemutar

Mari kita buat kontrol pemutar sekarang. Kami akan mulai dengan tombol putar, jeda, dan berhenti.

Tambahkan Tombol Putar, Jeda, dan Hentikan

Buat komponen PlayerControlsBars.vue dan tambahkan ini di dalam:

Di sini, kami menggunakan komponen toolbar Vuetify.

Ada tiga tombol dengan klik event listener terdaftar. Mari buat metode untuk mereka:

Sekarang, dalam Player.vue file, impor, mendaftar, dan menambahkan komponen dalam template. Kemudian, mendaftar event listener (@playtrack = "play", @pausetrack = "pause", @stoptrack = "stop").

Selanjutnya, buat index: 0 properti data, yang akan memegang indeks lintasan saat ini. Kemudian, buat sebuah computed currentTrack():

Dan sekarang kita bisa mulai membuat metode playpause, dan stop. Kita akan mulai dengan metode play(), tetapi sebelum itu kita perlu membuat properti data playing: false, yang akan menunjukkan apakah trek tersebut sedang diputar atau tidak. Tambahkan kode berikut untuk metode play():

Metode ini mengambil indeks sebagai parameter, yang menentukan jalur yang akan dimainkan. Pertama, kita mendapatkan indeks dari jalur yang dipilih. Kemudian, kami melakukan beberapa pemeriksaan untuk menentukan nilai index. Jika indeks disediakan sebagai argumen dan itu adalah angka, maka kami menggunakannya. Jika trek dipilih, kami menggunakan indeks trek yang dipilih. Jika trek yang dipilih berbeda dari yang sekarang, kami menggunakan metode stop() untuk menghentikan yang sekarang. Akhirnya, jika tidak ada argumen indeks yang dilewatkan atau trek dipilih, kami menggunakan nilai properti data index.

Selanjutnya, kita mendapatkan howl (berdasarkan nilai indeks) untuk lintasan dan memeriksa apakah itu sedang diputar. Jika ya, kami tidak mengembalikan apa-apa; jika tidak, kami memainkannya.

Akhirnya, kami memperbarui properti data selectedTrack, playing dan index.

Mari kita membuat metode pause() dan stop().

Di sini, kami hanya menjeda atau menghentikan trek saat ini dan memperbarui properti data playing.

Mari kita juga membuat lagu mulai dimainkan dengan klik ganda.

Tambahkan @dblclick="playTrack()" untuk <v-list-tile-content> di PlayerPlaylistPanel.vue dan menciptakan metode playTrack():

Daftarkan listener @playtrack ="play" dalam file Player.vue dan voila.

Tambahkan Tombol Sebelumnya dan Berikutnya

Sekarang mari kita tambahkan tombol sebelumnya dan selanjutnya.

Buat metode skipTrack():

Daftarkan event listener (@skiptrack="skip") di Player.vue.

Dan buat metode skip():

Kami pertama memeriksa apakah arahnya next. Jika demikian, kita kenaikan indeks dengan 1. Dan jika indeks menjadi lebih besar dari indeks terakhir dalam array, maka kita mulai lagi dari nol. Ketika arahnya adalah prev, kami menurunkan indeks dengan 1. Dan jika indeksnya kurang dari nol, maka kami menggunakan index terakhir. Pada akhirnya, kami menggunakan indeks sebagai argumen untuk metode skipTo(). Ini menghentikan trek saat ini dan memainkan yang berikutnya atau sebelumnya.

Di sini adalah bagaimana pemain terlihat dengan tombol:

The player play buttons

Tambahkan Penggeser Volume

Tambahkan yang berikut sebelum semua tombol:

Di sini, kami menggunakan slider komponen Vuetify.

Tambahkan properti data volume: 0.5, lalu buat metode updateVolume():

Di sini, kami menggunakan objek Howler global untuk mengatur volume secara global untuk semua howl.

Juga, kita perlu menyinkronkan volume Howler awal, yang secara default diatur ke 1, ke properti volume. Jika Anda tidak melakukannya, volume akan menunjukkan 0,5 tetapi akan menjadi 1 awalnya. Untuk melakukan itu, kami akan menggunakan created hook lagi:

Kami ingin melihat tingkat volume sebagai persentase di sebelah kanan penggeser volume, jadi kita tambahkan ini dalam template: {{this.volume * 100 + ' %'}}

Tambahkan tombol Mute

Sekarang, kami menambahkan ikon volume sebelum slider.

Ikon akan berubah sesuai dengan nilai volume dan properti muted.

Tambahkan properti data muted: false dan buat metode toggleMute():

Kami menggunakan objek Howler global lagi untuk menetapkan mute secara global, dan kemudian kita beralih nilai muted.

Pada gambar di bawah, Anda dapat melihat bagaimana tampilan slider volume:

The player volume slider

Menambahkan tombol Repeat

Tambahkan yang berikut setelah semua tombol:

Tambahkan properti loop: false di Player.vue, mengikat :loop="loop" dan lewatkan prop (loop: Boolean) di PlayerControlsBars.vue.

Sekarang, mari kita membuat metode toggleLoop():

Sekarang, kembali di Player.vue, mendaftar pendengar acara (@toggleloop="toggleLoop") dan membuat metode toggleLoop():

Pada titik ini, kami menghadapi masalah kecil. Ketika sebuah trek mencari akhir, itu berhenti saja. Pemain tidak pindah ke trek berikutnya, juga tidak mengulangi trek saat ini. Untuk memperbaikinya, kita perlu menambahkan yang berikut created ke fungsi setelah properti src:

Sekarang, ketika loop aktif, trek saat ini akan diulang. Jika tidak aktif, pemain akan bergerak di trek berikutnya.

Tambahkan tombol Shuffle

Tambahkan berikut setelah tombol repeat:

Tambahkan properti shuffle: false di Player.vue, mengikat (:shuffle="shuffle"), dan lewatkan prop (shuffle: Boolean) di PlayerControlsBars.vue.

Sekarang, mari kita membuat metode toggleShuffle();

Sekarang, kembali di Player.vue, mendaftar event listener (@toggleshuffle="toggleShuffle") dan membuat metode toggleShuffle():

Sekarang, tambahkan baris berikut ke metode skip() setelah index = 0:

Inilah tampilan aplikasi Anda sekarang:

The player repeat and shuffle buttons

Tambahkan Bar Pencarian

Pertama, di Player.vue, buat properti seek: 0. Kemudian kita harus menonton properti playing untuk memperbarui pencarian.

Ini akan memperbarui nilai pencarian empat kali per detik.

Sekarang, membuat progress() dihitung:

Mengikat (:progress="progress") dalam template.

Sekarang, di PlayerControlsBars.vue, lewatkan prop progress (progress: Number) dan menambahkan toolbar lain di bawah, satu telah kita buat:

Di sini, kami menggunakan komponen progress Vuetify.

Membuat trackProgress() dihitung, yang akan mendapatkan progres dalam lagu sebagai persentase.

Dan sekarang, membuat metode updateSeek():

Di sini, kita mendapatkan elemen progress bar, yang menggunakan kelas .progress-linear__bar. Saya menemukan ini dengan DevTools Browser. Selanjutnya, kita mendapatkan posisi mouse dan lebar bar. Kemudian, kita mendapatkan posisi klik mouse sebagai persentase.

Kembali di Player.vue, menambah dan mendaftar event listener (@updateseek="setSeek") dan membuat metode setSeek():

Dan boom! Anda dapat menggunakan mouse untuk mengubah posisi trek yang dimainkan.

Membangun komponen Panel Info

Buat file PlayerInfoPanel.vue dengan konten berikut:

Di sini, kami melewati prop trackInfo, yang kami gunakan untuk mengisi informasi trek dalam komponen kami.

Sekarang, kembali ke Player.vue, impor, daftar dan tambahkan komponen di template.

Kemudian, membuat getTrackInfo() dihitung:

Selanjutnya, kita mengikat dalam template (:trackInfo="getTrackInfo") dan voila. Kita mendapatkan beberapa info dasar dalam lagu yang sedang dimainkan, seperti yang Anda lihat dalam gambar di bawah.

The player info panel

Membangun Komponen Search Bar

Buat PlayerSearchBar.vue file dengan konten berikut:

Kami membuat bidang teks dan menambahkan prop clearable untuk menampilkan clearing ikon ketika kami mengetik sesuatu.

Dengan menggunakan v-model, kita mengikat untuk searchString, yang merupakan string kosong pada awalnya. Dan kita menambahkan masukan event listener.

Kami juga melewati prop playlist, yang kami gunakan dalam metode searchPlaylist(). Dalam metode ini, kami menggunakan properti display dan menekan off untuk setiap lagu di mana judul atau artis tidak cocok dengan string pencarian, dan kami tetap atau menekan on untuk semua pertandingan. Akhirnya, jika string pencarian kosong atau sama dengan null, yang terjadi ketika kita jelas bidang dengan tombol clear, kita on kan display untuk semua trek.

Sekarang, kembali di Player.vue, impor, mendaftar dan menambahkan komponen dalam template.

Mengikat properti playlist (:playlist="playlist") dan periksa fungsionalitas. Berikut adalah cara seharusnya terlihat dalam tindakan:

The player search bar test

Beberapa Ide Peningkatan

Seperti yang Anda lihat, dengan tujuan yang jelas dan perencanaan yang tepat, membangun aplikasi Vue / Vuetify dapat sangat mudah dan menyenangkan. Anda sekarang memiliki pemutar musik yang dapat Anda gunakan selama relaksasi atau waktu pengkodean. Tentu saja, selalu ada ruang untuk perbaikan dan penambahan lebih lanjut, jadi di sini adalah beberapa ide yang dapat Anda coba untuk membuat pemain lebih kaya fitur:

  • dukungan banyak daftar putar
  • kemampuan untuk menambahkan atau menghapus trek dari daftar putar
  • dukungan drag-and-drop
  • kemampuan untuk menyortir trek
  • visualisasi audio

Kesimpulan

Dalam tutorial ini, kami melihat betapa mudah dan menyenangkannya membangun aplikasi dengan Vue.js, dan khususnya dengan Vuetify.js. Saya harap Anda menikmati membangun pemain ini sebanyak yang saya lakukan. Saya akan senang melihat versi pemain Anda yang telah ditingkatkan. Jadi, jika Anda membuatnya, cukup letakkan tautan demo di komentar!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.