French (Français) translation by honeymmmm (you can also view the original English article)

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 title
etartist
, un objet howl
défini surnulL
et une propriété display
définie surtrue
.
La propriété display
sera utilisée lorsque nous implémenterons la fonctionnalité de recherche. Maintenant, il est défini surtrue
pour toutes les pistes, elles sont donc toutes visibles.
Howler encapsule un fichier audio dans un objet howl
. Nous définissonshowl
surnull
car nous allons le remplir dynamiquement lors de la création de l'instance de Vue. Pour ce faire, nous utilisons leCreated
lifecycle 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 objetHowl
pour 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-show
lié à la propriété displa
. Une piste ne sera visible que sidisplay
est 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 numbers
et 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 selecttrack
au 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
, pause
et 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 loop
est 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 clearable
pour 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é display
et 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!
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post