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.

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:

$ npm install -g vue-cli

Kemudian, buat aplikasi:

$ vue init vuetifyjs/webpack-simple vue-music-player

Selanjutnya, buka direktori aplikasi dan instal semua dependensi:

$ cd vue-music player
$ npm install

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:

$ npm install --save howler

Dan akhirnya, jalankan aplikasi:

$ npm run dev

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:

<template>
  <v-app dark>
    <v-content>
      <v-container>
        <!-- The player components go here -->
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
  export default {
    data () {
      return {

      }
    }
  }
</script>

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:

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.css'
import Player from './Player.vue'

import {Howl, Howler} from 'howler'

Vue.use(Vuetify)

new Vue({
  el: '#app',
  render: h => h(Player)
})

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:

<template>
  <v-system-bar window>
    <v-menu offset-y transition="slide-y-transition">
      <v-btn flat small right slot="activator">
        <v-icon>headset</v-icon> MENU
      </v-btn>
      <v-list>
        <v-list-tile @click="dialog = true">
          <v-list-tile-title>About</v-list-tile-title>
        </v-list-tile>
        <v-dialog v-model="dialog" max-width="300">
          <v-card>
            <v-card-title><h2>Vue Music Player</h2></v-card-title>
            <v-card-text>Version 1.0.0</v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn flat @click="dialog = false">OK</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-list>
    </v-menu>
    <v-spacer></v-spacer>
    VUE MUSIC PLAYER
    <v-spacer></v-spacer>
    <v-icon>remove</v-icon>
    <v-icon>check_box_outline_blank</v-icon>
    <v-icon>close</v-icon>
  </v-system-bar>
</template>

<script>
  export default {
    data () {
      return {
        dialog: false
      }
    },
  }
</script>

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.

<template>
  <v-app dark>
    <v-content>
      <v-container>
        <player-title-bar></player-title-bar> // ADD the component in the template
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
  import PlayerTitleBar from './components/PlayerTitleBar.vue' // IMPORT the component

  export default {
    components: {
      PlayerTitleBar // REGISTER the component
    },
    data () {
      return {

      }
    }
  }
</script>

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

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:

playlist: [
  {title: "Streets of Sant'Ivo", artist: "Ask Again", howl: null, display: true},
  {title: "Remember the Way", artist: "Ask Again", howl: null, display: true},
  ...
]

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.

created: function () {
  this.playlist.forEach( (track) => {
    let file = track.title.replace(/\s/g, "_")
    track.howl = new Howl({
      src: [`./playlist/${file}.mp3`]
    })
  })
}

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

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

<template>
  <v-card height="330">
    <v-list>
      <v-list-tile 
        v-for="(track, index) in playlist" 
        :key="track.title"
        v-show="track.display">
        <v-list-tile-content>
          <v-list-tile-title>{{ index }} {{ track.artist }} - {{ track.title }}</v-list-tile-title>
        </v-list-tile-content>
        <v-spacer></v-spacer>
        {{ track.howl.duration() }}
      </v-list-tile>
    </v-list>
  </v-card>
</template>

<script>
  export default {
    props: {
      playlist: Array
    }
  }
</script>

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:

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.

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():

methods: {
  selectTrack (track) {
    this.$emit('selecttrack', track)
  }
} 

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

selectTrack (track) {
  this.selectedTrack = track
}

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:

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:

:class="[{selected: track === selectedTrack}, {even: index % 2 == 0}]"

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

<v-card height="330" :class="{playlist}">

Kami menambahkan kelas yang diperlukan di akhir file.

<style scoped>
  .selected {
    background-color:  orange !important;
  }
  .even {
    background-color: #505050
  }
  .playlist {
    overflow: auto
  }
</style>

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

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:

<template>
  <div>
    <v-toolbar flat height=90>
      <v-spacer></v-spacer>
      <v-btn outline fab small color="light-blue" @click="stopTrack">
        <v-icon>stop</v-icon>
      </v-btn>
      <v-btn outline fab color="light-blue" @click="playTrack()">
        <v-icon large>play_arrow</v-icon>
      </v-btn>
      <v-btn outline fab small color="light-blue" @click="pauseTrack">
        <v-icon>pause</v-icon>
      </v-btn>
      <v-spacer></v-spacer>
    </v-toolbar>
  </div>
</template>

Di sini, kami menggunakan komponen toolbar Vuetify.

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

methods: {
  playTrack(index) {
    this.$emit('playtrack', index)
  },
  pauseTrack() {
    this.$emit('pausetrack')
  },
  stopTrack() {
    this.$emit('stoptrack')
  }
}

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():

computed: {
  currentTrack () {
    return this.playlist[this.index]
  }
}

Dan sekarang kita bisa mulai membuat metode play, pause, 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():

play (index) {
  let selectedTrackIndex = this.playlist.findIndex(track => track === this.selectedTrack)

  if (typeof index === 'number') {
    index = index
  } else if (this.selectedTrack) {
    if (this.selectedTrack != this.currentTrack) {
      this.stop()
    }
    index = selectedTrackIndex
  } else {
    index = this.index
  }

  let track = this.playlist[index].howl

  if (track.playing()) {
    return
  } else {
    track.play()
  }
  
  this.selectedTrack = this.playlist[index]
  this.playing = true
  this.index = index
}

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().

pause () {
  this.currentTrack.howl.pause()
  this.playing = false
},
stop () {
  this.currentTrack.howl.stop()
  this.playing = false
}

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():

playTrack(index) {
  this.$emit('playtrack', index)
}

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

Tambahkan Tombol Sebelumnya dan Berikutnya

Sekarang mari kita tambahkan tombol sebelumnya dan selanjutnya.

<v-btn outline fab small color="light-blue" @click="skipTrack('prev')">
  <v-icon>skip_previous</v-icon>
</v-btn>

<!-- stop, play, and pause buttons are here -->

<v-btn outline fab small color="light-blue" @click="skipTrack('next')">
  <v-icon>skip_next</v-icon>
</v-btn>

Buat metode skipTrack():

skipTrack (direction) {
    this.$emit('skiptrack', direction)
}

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

Dan buat metode skip():

skip (direction) {
  let index = 0

  if (direction === "next") {
    index = this.index + 1
    if (index >= this.playlist.length) {
      index = 0
    }
  } else {
    index = this.index - 1
    if (index < 0) {
      index = this.playlist.length - 1
    }
  }

  this.skipTo(index)
},
skipTo (index) {
  if (this.currentTrack) {
    this.currentTrack.howl.stop()
  }

  this.play(index)
}

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:

Tambahkan Penggeser Volume

Tambahkan yang berikut sebelum semua tombol:

<v-slider v-model="volume" @input="updateVolume(volume)" max="1" step="0.1"></v-slider>

Di sini, kami menggunakan slider komponen Vuetify.

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

updateVolume (volume) {
  Howler.volume(volume)
}

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:

created: function () {
  Howler.volume(this.volume)
}

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.

<v-btn flat icon @click="toggleMute">
  <template v-if="!this.muted">
    <v-icon v-if="this.volume >= 0.5">volume_up</v-icon>
    <v-icon v-else-if="this.volume > 0">volume_down</v-icon>
    <v-icon v-else>volume_mute</v-icon>
  </template>
  <v-icon v-show="this.muted">volume_off</v-icon>
</v-btn>

Ikon akan berubah sesuai dengan nilai volume dan properti muted.

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

toggleMute () {
  Howler.mute(!this.muted)
  this.muted = !this.muted
}

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:

Menambahkan tombol Repeat

Tambahkan yang berikut setelah semua tombol:

<v-btn flat icon @click="toggleLoop">
  <v-icon color="light-blue" v-if="this.loop">repeat_one</v-icon>
  <v-icon color="blue-grey" v-else>repeat_one</v-icon>
</v-btn>

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

Sekarang, mari kita membuat metode toggleLoop():

toggleLoop () {
  this.$emit('toggleloop', !this.loop)
}

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

toggleLoop (value) {
  this.loop = value
}

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:

onend: () => {
  if (this.loop) {
    this.play(this.index)
  } else {
    this.skip('next')
  }
}

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:

<v-btn flat icon @click="toggleShuffle">
  <v-icon color="light-blue" v-if="this.shuffle">shuffle</v-icon>
  <v-icon color="blue-grey" v-else>shuffle</v-icon>
</v-btn>

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

Sekarang, mari kita membuat metode toggleShuffle();

toggleShuffle () {
  this.$emit('toggleshuffle', !this.shuffle)
}

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

toggleShuffle (value) {
  this.shuffle = value
}

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

lastIndex = this.playlist.length - 1

if (this.shuffle) {
  index = Math.round(Math.random() * lastIndex)
  while (index === this.index) {
    index = Math.round(Math.random() * lastIndex)
  }
} else if (direction === "next") { ...

Inilah tampilan aplikasi Anda sekarang:

Tambahkan Bar Pencarian

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

watch: {
  playing(playing) {
    this.seek = this.currentTrack.howl.seek()
    let updateSeek
    if (playing) {
      updateSeek = setInterval(() => {
        this.seek = this.currentTrack.howl.seek()
      }, 250)
    } else {
      clearInterval(updateSeek)
    }
  },
}

Ini akan memperbarui nilai pencarian empat kali per detik.

Sekarang, membuat progress() dihitung:

progress () {
  if (this.currentTrack.howl.duration() === 0) return 0
  return this.seek / this.currentTrack.howl.duration()
}

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

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

<v-toolbar flat height="40">
  <v-progress-linear height="40" v-model="trackProgress"  @click="updateSeek($event)"></v-progress-linear> 
</v-toolbar>

Di sini, kami menggunakan komponen progress Vuetify.

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

computed: {
  trackProgress () {
    return this.progress * 100
  },
}

Dan sekarang, membuat metode updateSeek():

updateSeek (event) {
  let el = document.querySelector(".progress-linear__bar"),
      mousePos = event.offsetX,
      elWidth = el.clientWidth,
      percents = (mousePos / elWidth) * 100
  this.$emit('updateseek', percents)
}

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():

setSeek (percents) {
  let track = this.currentTrack.howl

  if (track.playing()) {
    track.seek((track.duration() / 100) * percents)
  }
}

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

Membangun komponen Panel Info

Buat file PlayerInfoPanel.vue dengan konten berikut:

<template>
  <v-card height="60">
    <v-card-title>
      <h2>{{ trackInfo.artist }} - {{ trackInfo.title }}</h2>
      <v-spacer></v-spacer>
      <h3>{{trackInfo.seek | minutes}}/{{trackInfo.duration | minutes}}</h3>
    </v-card-title>    
  </v-card>
</template>

<script>
  export default {
    props: {
      trackInfo: Object
    },
  }
</script>

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:

getTrackInfo () {
  let artist = this.currentTrack.artist,
      title = this.currentTrack.title,
      seek = this.seek,
      duration = this.currentTrack.howl.duration()
  return {
    artist,
    title,
    seek,
    duration,
  }
}

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.

Membangun Komponen Search Bar

Buat PlayerSearchBar.vue file dengan konten berikut:

<template>
  <v-toolbar flat>
    <v-text-field 
    clearable 
    prepend-icon="search" 
    placeholder="Quick search"
    v-model="searchString" 
    @input="searchPlaylist">
    </v-text-field>
    <v-spacer></v-spacer>
  </v-toolbar>
</template>

<script>
  export default {
    props: {
      playlist: Array
    },
    data () {
      return {
        searchString: "",
      }
    },
    methods: {
      searchPlaylist () {
        this.playlist.forEach((track) => {
          if (this.searchString) {
            if (!track.title.toLowerCase().includes(this.searchString.toLowerCase()) && !track.artist.toLowerCase().includes(this.searchString.toLowerCase())) {
              track.display = false
            } else {
              track.display = true
            }
          } else if (this.searchString === "" || this.searchString === null) {
            track.display = true
          }
        })
      }
    },
  }
</script>

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:

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!