Construire des applications avec Vue.js est facile, amusant et agréable. Vous pouvez créer une application de travail avec un minimum d'effort. Pour prouver cela, je vais vous montrer aujourd'hui combien il est facile de créer votre propre lecteur de musique complet. Pour rendre les choses encore plus faciles, nous utiliserons Vuetify.js, une bibliothèque d'IU alimentée par Vue.js, qui accélérera la construction de l'interface utilisateur. Je peux presque sentir votre impatience, alors commençons.

Vous pouvez trouver le code source complet dans le référentiel GitHub. Et voici la démo de travail. Pour suivre ce didacticiel, vous devez vous familiariser avec les composants de Vue, les composants de fichiers individuels Vue et la syntaxe ES2015.

Planification de l'application

Chaque création commence par une idée et au moins une planification de base. Nous devons donc d'abord décider de ce que nous voulons construire et des fonctionnalités que nous voulons implémenter. On dit qu'une image vaut mille mots, alors commençons par une simple esquisse du lecteur de musique.

J'ai fait ce wireframe pour que vous puissiez avoir une idée générale de l'interface que nous voulons construire. L'étape suivante consiste à décrire les fonctionnalités que nous avons l'intention de mettre en œuvre.

Comme le dit John Johnson:

Tout d'abord, résolvez le problème. Ensuite, écrivez le code.

Nous utiliserons cela comme une source de sagesse et nous planifierons l'application avant de commencer à la coder.

Composants de l'application

Vue.js est un framework basé sur des composants. Nous devons donc d'abord diviser l'application en composants individuels (cinq dans notre cas, comme le montre l'esquisse ci-dessus) et décrire les fonctionnalités et fonctionnalités de chacun.

Barre de titre

Ce composant contiendra les parties suivantes:

• un menu à gauche
• le nom de l'application au centre
• trois icônes statiques sur le côté droit

Panneau d'information

Ce composant affichera des informations de base sur la piste en cours de lecture:

• l'artiste de la piste et le titre sur le côté gauche
• la position et la durée de la piste en cours sur le côté droit

Barres de contrôle

Ce composant contiendra deux barres, qui comprendront toutes les commandes nécessaires pour manipuler les pistes audio dans la liste de lecture du lecteur.

• un curseur de volume avec une icône sur la gauche (son apparence changera en fonction du niveau de volume et lorsque le son est coupé), et le pourcentage de volume sur la droite
• boutons pour jouer, mettre en pause, arrêter et sauter les pistes.
• deux boutons à l'extrême droite: un pour répéter la piste en cours et un pour réorganiser l'ordre de lecture des morceaux
• une barre de recherche indiquant la position de la piste en cours de lecture, avec la possibilité de la modifier avec un clic de souris sur la barre

Panneau de Playlist

Ce composant contiendra la liste de lecture des pistes avec les fonctionnalités suivantes:

• afficher une piste avec le numéro, l'artiste, le titre et la durée appropriés
• sélectionnez une piste en un clic
• jouer une piste en double clic

Barre de recherche

Ce composant offrira une fonctionnalité de recherche dans les cas où nous souhaitons rechercher et lire des pistes particulières.

Bien sûr, le contour ci-dessus ne peut pas couvrir tous les détails et toutes les nuances, et cela convient parfaitement. Pour l'instant, il nous suffit d'avoir une image globale du produit final. Nous nous occuperons de tous les détails et des défis éventuels lors du processus de construction.

Alors passons à la partie amusante et écrivons du code!

Commencer

La page de démarrage rapide de Vuetify offre de nombreuses options pour vous aider à démarrer. Nous utiliserons l'un des modèles de CLI de Vue pré-nommés appelé Webpack Simple. Exécutez les commandes suivantes dans le répertoire que vous souhaitez utiliser pour ce projet:

Tout d'abord, installez Vue CLI:

$ npm install -g vue-cli

Ensuite, créez l'application:

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

Ensuite, allez dans le répertoire de l'application et installez toutes les dépendances:

$ cd vue-music player
$ npm install

Nous utiliserons Howler.js (une bibliothèque audio JavaScript) pour gérer les parties audio du lecteur de musique. Nous devons donc également l'inclure dans le projet. Exécutez la commande suivante:

$ npm install --save howler

Et enfin, lancez l'application:

$ npm run dev

L'application s'ouvrira sur localhost:8080 dans votre navigateur par défaut. Vous devriez voir un squelette de l'application Vuetify simple.

Modifier le modèle

Pour l'adapter à nos besoins, nous devons nettoyer le modèle et le modifier un peu. Renommez le fichier App.vue en Player.vue, ouvrez-le, supprimez tout ce qu'il contient et ajoutez les éléments suivants à la place:

<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>

Nous enveloppons notre application de lecteur de musique dans le composant v-app, nécessaire pour que l'application fonctionne correctement. Nous passons également le support sombre, pour appliquer le thème Vuetify dark .

Maintenant, ouvrez le fichier main.js, supprimez le contenu d'origine et ajoutez les éléments suivants:

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)
})

Ouvrez également le fichier index.html et remplacez le contenu de la balise <title> par Vue Music Player. par Vue Music Player par Vue Music Player. par Vue Music Player. par Vue Music Player. par Vue Music Player. par Vue Music Player.

Maintenant, dans votre navigateur, vous devriez voir une page noire vide. Et le tour est joué Vous êtes prêt à créer.

Avant de commencer à coder, sachez que Vuetify offre des extraits de code et une auto-complétion pour les principaux éditeurs de code: VS Code, Atom et Sublime. Pour obtenir les extraits, recherchez l'extension dans votre éditeur préféré (vuetify-vscode, ou vuetify-atom ou vuetify-sublime).

Construire le composant barre de titre

Dans le répertoire src, créez un nouveau dossier components. Ensuite, dans ce dossier, créez le fichier PlayerTitleBar.vue avec le contenu suivant:

<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>

Ici, nous utilisons les composants Vuetify suivantss:  toolbar, menu, button, icon, list, dialog, et card.

Nous séparons le menu, le nom et les icônes avec le composant <v-spacer> . Pour afficher ou masquer la boîte de dialogue, nous créons la propriété dialog:false data. Sa valeur bascule lorsque l'on clique sur l'élément de menu About.

Maintenant, dans le fichier Player.vue, importez le composant de la barre de titre, enregistrez-le dans l'objet composants et ajoutez-le dans le modèle.

<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>

Maintenant, vérifiez le résultat dans votre navigateur. Vous devriez voir ce qui suit:

Nous répéterons ces trois étapes pour les quatre autres composants. Donc, lorsque dans les sections suivantes je vous demande d'importer, d'enregistrer et d'ajouter un composant dans le modèle, vous devez suivre la même procédure que celle décrite ici.

Construire le composant Playlist

Dans le répertoire racine, créez un nouveau dossier playlist  et ajoutez les fichiers audio que vous souhaitez lire. Les noms de fichiers doivent être écrits avec des traits de soulignement entre les mots et une extension .mp3 à la fin - par exemple, Remember_the_Way.mp3. Maintenant, créez un tableau de pistes audio dans l'objet de données de 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},
  ...
]

Chaque piste possède des propriétés titleetartist, un objet howldéfini surnulLet une propriété displaydéfinie surtrue.

La propriété displaysera utilisée lorsque nous implémenterons la fonctionnalité de recherche. Maintenant, il est défini surtruepour toutes les pistes, elles sont donc toutes visibles.

Howler encapsule un fichier audio dans un objet howl. Nous définissonshowlsurnullcar nous allons le remplir dynamiquement lors de la création de l'instance de Vue. Pour ce faire, nous utilisons leCreatedlifecycle hook de Vue.

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

Cela définira un nouvel objetHowlpour chaque piste de la playlist.

Maintenant, créez le composant PlayerPlaylistPanel.vue et ajoutez-le à l'intérieur:

<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>

Tout d'abord, nous transmettons le propplaylistà partir du fichier Player.vue. Ensuite, dans le modèle, nous parcourons chaque piste avec la directive v-for et affichons l'index de la piste, suivi de l'artiste et du titre de la piste, ainsi que de la durée de la piste à l'extrême droite. Nous utilisons également v-showlié à la propriété displa. Une piste ne sera visible que sidisplayest true.

Maintenant, dans le fichier Player.vue, nous importons, s’inscrire et ajoutez le composant de playlist dans le modèle. Ensuite, nous lier la playlist prop à la propriété data de playlist comme ceci : <player-playlist-panel :playlist="playlist"></player-playlist-panel>.

Vérifions le résultat dans le navigateur:

Ici, nous avons deux problèmes. Premièrement, les numéros des pistes ne sont pas corrects, et deuxièmement, la durée de la piste est affichée en millisecondes, mais nous voulons que ce soit en minutes. Nous allons résoudre chacun de ces problèmes en créant un filtre de mise en forme.

Dans le fichier main.js, créez un filter numberset un filter minutes, qui seront accessibles globalement. Ensuite, dans PlayerPlaylistPanel.vue, nous les utilisons comme ceci:{{ index | nombres }} et {{ track.howl.duration() | minutes }}.

Maintenant, si vous vérifiez l'application, tout devrait s'afficher correctement.

Rendre les pistes sélectionnables

Dans le fichier Player.vue, ajoutez la propriété selectedTrack: null data et liez-la au composant playlist ( : selectedTrack = "selectedTrack"). Ensuite, nous passons le prop dans le fichier PlayerPlaylistPanel.vue ( selectedTrack: Object).

Nous ajoutons également un écouteur d'événement click à  <v-list-tile-content@click=''selectTrack(track)''>  puis créons la méthode selectTrack():

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

Maintenant, dans Player.vue, ajoutez l’événement selecttrackau composant playlist (@ selecttrack= "selectTrack") et créez la méthode selectTrack():

selectTrack (track) {
  this.selectedTrack = track
}

Maintenant, si vous allez dans la liste de lecture et cliquez sur une piste, celle-ci sera sélectionnée. Nous ne pouvons pas le voir, mais nous pouvons le prouver dans Vue DevTools. Dans la capture d'écran suivante, la deuxième piste est sélectionnée:

Style de rangée et de sélection

L'étape suivante consiste à rendre la sélection visible. Pour ce faire, nous lierons une classe qui colorera la piste sélectionnée en orange et une autre classe qui rendra les lignes plus foncées pour rendre les pistes plus reconnaissables. Mettez ce qui suit après la directive v-show:

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

Nous allons également ajouter une autre classe, qui affichera une barre de défilement lorsque la liste devient trop grande.

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

Nous ajoutons les classes nécessaires à la fin du fichier.

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

Et c'est tout. Maintenant, la piste sélectionnée est surlignée en orange.

Nous ajouterons la fonctionnalité de jeu par double-clic à la fin de la section suivante.

Construire le composant de contrôles du lecteur

Créons maintenant les contrôles du joueur. Nous allons commencer par les boutons play, pause et stop.

Ajouter les boutons Play, Pause et Stop

Créez le composant PlayerControlsBars.vue et ajoutez-le à l'intérieur:

<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>

Ici, nous utilisons le composant Vuetify toolbar .

Il y a trois boutons avec des écouteurs d'événement de clic enregistrés. Créons les méthodes pour eux:

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

Maintenant, dans le fichier Player.vue, importez, enregistrez et ajoutez le composant dans le modèle. Enregistrez ensuite les écouteurs d'événement (@playtrack="play", @pausetrack="pause", @stoptrack="stop").

Ensuite, créez la propriété index: 0 data qui contiendra l'index de la piste en cours. Ensuite, créez un currentTrack() calculé :

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

Et maintenant, nous pouvons commencer à créer les méthodes play, pauseet stop. Nous allons commencer par la méthode play(), mais avant cela, nous devons créer la propriété playing: false, qui indiquera si la piste est en cours de lecture ou non. Ajoutez le code suivant pour la méthode 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
}

La méthode prend un index comme paramètre, qui spécifie la piste à jouer. Tout d'abord, nous obtenons l'index de la piste sélectionnée. Ensuite, nous effectuons des vérifications pour déterminer la valeur de l’index. Si un index est fourni comme argument et que c'est un nombre, alors nous l'utilisons. Si une piste est sélectionnée, nous utilisons l'index de la piste sélectionnée. Si la piste sélectionnée est différente de la piste actuelle, nous utilisons la méthode stop()pour arrêter celle qui est en cours. Enfin, si aucun argument d'index n'est transmis ni qu'une piste est sélectionnée, nous utilisons la valeur de la propriété de données d'index.

Ensuite, nous obtenons le hurlement (basé sur la valeur d'index) pour la piste et vérifions s'il joue. Si c'est le cas, nous ne retournons rien; si ce n'est pas le cas, nous y jouons.

Enfin, nous mettons à jour les propriétés selectedTrack, playing et index data.

Créons maintenant les méthodes pause() et stop().

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

Ici, il suffit de mettre en pause ou d'arrêter la piste en cours et de mettre à jour la propriété de données playing.

Faisons aussi jouer une piste en double clic.

Ajoutez @ dblclick="playTrack()" à <v-list-tile-content>  dans PlayerPlaylistPanel.vue et créez la méthode playTrack():

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

Enregistrez le listener @playtrack="play" dans le fichier Player.vue et le tour est joué.

Ajouter les boutons précédent et suivant

Ajoutons maintenant les boutons précédent et suivant.

<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>

Créez la méthode skipTrack():

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

Enregistrez l'écouteur d'événement (@skiptrack="skip") dans Player.vue.

Et créez la méthode 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)
}

Nous vérifions d'abord si la direction est next. Si c'est le cas, nous incrémentons l'index de 1. Et si l'index devient plus grand que le dernier index du tableau, nous recommençons à partir de zéro. Lorsque la direction est prev, nous décrémentons l’indice de 1. Et si l’index est inférieur à zéro, alors nous utilisons le dernier index. À la fin, nous utilisons l'index comme argument pour la méthode skipTo(). Il arrête la piste en cours et lit la suivante ou la précédente.

Voici comment le joueur regarde avec les boutons:

Ajouter le curseur de volume

Ajoutez ce qui suit avant tous les boutons:

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

Ici, nous utilisons le composant curseur Vuetify.

Ajoutez la propriété de données volume: 0.5, puis créez la méthode updateVolume():

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

Ici, nous utilisons l'objet global Howler pour définir globalement le volume pour tous les hurlements.

En outre, nous devons synchroniser le volume Howler initial, qui est défini par défaut sur 1, sur la propriété volume. Si vous ne le faites pas, le volume affichera 0,5 mais sera initialement 1. Pour ce faire, nous utiliserons à nouveau le hook created:

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

Nous voulons voir le niveau de volume en pourcentage à droite du curseur de volume, nous ajoutons donc ceci dans le modèle: {{this.volume * 100 + '%'}}

Ajouter le bouton de sourdine

Maintenant, nous ajoutons une icône de volume avant le curseur.

<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>

L'icône changera en fonction des valeurs du volume et des propriétés muted.

Ajoutez la propriété muted: false data et créez la méthode toggleMute():

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

Nous utilisons à nouveau l'objet Howler global pour définir le muet globalement, puis nous basculons la valeur muted.

Dans la capture d'écran ci-dessous, vous pouvez voir à quoi devrait ressembler le curseur de volume:

Ajouter le bouton de répétition

Ajoutez ce qui suit après tous les boutons:

<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>

Ajoutez la propriété loop: false dans Player.vue, liez-la: loop="loop" et transmettez le prop (loop: Boolean) dans PlayerControlsBars.vue.

Maintenant, créons la méthode toggleLoop():

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

Maintenant, dans Player.vue, enregistrez l'écouteur d'événement (@ toggleloop="toggleLoop") et créez la méthode toggleLoop():

toggleLoop (value) {
  this.loop = value
}

À ce stade, nous sommes confrontés à un petit problème. Quand une piste cherche la fin, elle s'arrête juste. Le lecteur ne se déplace pas sur la piste suivante et ne répète pas la piste en cours. Pour corriger cela, nous devons ajouter ce qui suit à la fonction created après la propriété src:

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

Maintenant, lorsque le loopest activé, la piste en cours sera répétée. Si c'est désactivé, le joueur se déplacera sur la piste suivante.

Ajouter le bouton de lecture aléatoire

Ajoutez ce qui suit après le bouton de répétition:

<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>

Ajoutez la propriété shuffle: false dans Player.vue, liez-la (:shuffle="shuffle") et transmettez le prop (shuffle:Boolean) dans PlayerControlsBars.vue.

Maintenant, créons la méthode toggleShuffle();

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

Maintenant, retournez dans Player.vue, enregistrez l'écouteur d'événement (@toggleshuffle="toggleShuffle") et créez la méthode toggleShuffle():

toggleShuffle (value) {
  this.shuffle = value
}

Maintenant, ajoutez ce qui suit à la méthode skip() après 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") { ...

Voici comment votre application devrait ressembler maintenant:

Ajouter la barre de recherche

Tout d'abord, dans Player.vue, créez la propriétéseek: 0. Ensuite, nous devrons surveiller la propriété playing afin de mettre à jour la recherche.

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)
    }
  },
}

Cela mettra à jour la valeur de recherche quatre fois par seconde.

Maintenant, créez un progress() calculé :

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

Liez-le (: progress = "progress") dans le template.

Maintenant, dans PlayerControlsBars.vue, passez le support progress (progress: Number) et ajoutez une autre barre d'outils sous celle que nous avons déjà créée:

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

Ici, nous utilisons le composant Vuetify progress.

Créez un trackProgress() calculé, qui obtiendra la progression de la piste en pourcentage.

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

Et maintenant, créez la méthode updateSeek():

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

Ici, nous obtenons l'élément barre de progression, qui utilise la classe .progress-linear__bar. Je l'ai trouvé avec le navigateur DevTools. Ensuite, nous obtenons la position de la souris et la largeur de la barre. Ensuite, nous obtenons la position du clic de la souris en pourcentage.

Back in Player.vue, add and register the event listener (@updateseek="setSeek") and create the setSeek() method:

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

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

Et boum! Vous pouvez utiliser votre souris pour changer la position de la piste jouée.

Construire le composant Panneau d'information

Créez le fichier PlayerInfoPanel.vue avec le contenu suivant:

<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>

Ici, nous passons un prop trackInfo, que nous utilisons pour remplir les informations de piste dans notre composant.

Maintenant, retournez dans Player.vue, importez, enregistrez et ajoutez le composant dans le modèle.

Ensuite, créez un getTrackInfo()calculé:

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

Ensuite, nous le lions dans le template (:trackInfo="getTrackInfo") et le tour est joué. Nous obtenons des informations de base sur la piste en cours de lecture, comme vous pouvez le voir sur la capture d'écran ci-dessous.

Construire le composant barre de recherche

Créez le fichier PlayerSearchBar.vue avec le contenu suivant:

<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>

Nous créons un champ de texte et ajoutons le support clearablepour afficher une icône de suppression lorsque nous tapons quelque chose.

En utilisant v-model, nous le lions à searchString, qui est une chaîne vide initialement. Et nous ajoutons un écouteur d'événement d'entrée.

Nous transmettons également le prop playlist, que nous utilisons dans la méthode searchPlaylist(). Dans cette méthode, nous utilisons la propriété displayet la transformons en off pour chaque piste où le titre ou l'artiste ne correspond pas à la chaîne de recherche, et nous le conservons ou le transformons en on pour toutes les correspondances. Enfin, si la chaîne de recherche est vide ou égale à null, ce qui se produit lorsque nous effaçons le champ avec le bouton clear, nous tournons on the display pour toutes les pistes.

Maintenant, retournez dans Player.vue, importez, enregistrez et ajoutez le composant dans le modèle.

Liez la propriété playlist (:playlist="playlist") et vérifiez la fonctionnalité. Voici comment cela devrait ressembler à l'action:

Quelques idées d'amélioration

Comme vous pouvez le constater, avec un objectif clair et une planification appropriée, créer une application Vue / Vuetify peut être très simple et agréable. Vous avez maintenant un lecteur de musique en état de fonctionnement que vous pouvez utiliser pendant votre temps de relaxation ou de codage. Bien sûr, il y a toujours de la place pour d'autres améliorations et ajouts. Voici quelques idées que vous pouvez essayer pour rendre le lecteur encore plus riche en fonctionnalités:

• Prise en charge de plusieurs listes de lecture
• possibilité d'ajouter ou de supprimer des pistes de la liste de lecture
• support de glisser-déposer
• pouvoir trier les pistes
• visualisation audio

Conclusion

Dans ce tutoriel, nous avons vu combien il était facile et agréable de créer une application avec Vue.js, et avec Vuetify.js en particulier. J'espère que vous avez aimé construire ce joueur autant que moi. Je serai ravi de voir votre propre version améliorée du lecteur. Donc, si vous en créez un, déposez simplement un lien de démonstration dans les commentaires!