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

Construire un lecteur de musique avec Vuetify

by
Difficulty:IntermediateLength:LongLanguages:

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

Final product image
What You'll Be Creating

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.

Vue music player wireframe sketch

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:

Ensuite, créez l'application:

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

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:

Et enfin, lancez l'application:

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:

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:

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:

Ici, nous utilisons les composants Vuetify suivantss:  toolbarmenubuttoniconlistdialog, 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.

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

The player title bar

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:

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.

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

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

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:

The player playlist panel

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.

The player playlist panel with fixed numbers and minutes

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

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

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:

The player playlist with selected track shown in DevTools

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:

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

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

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

The player playlist with selected track colored

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:

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:

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

Et maintenant, nous pouvons commencer à créer les méthodes playpauseet 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():

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

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

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.

Créez la méthode skipTrack():

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

Et créez la méthode skip():

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:

The player play buttons

Ajouter le curseur de volume

Ajoutez ce qui suit avant tous les boutons:

Ici, nous utilisons le composant curseur Vuetify.

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

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:

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.

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

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:

The player volume slider

Ajouter le bouton de répétition

Ajoutez ce qui suit après tous les boutons:

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

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

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

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:

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

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

Maintenant, ajoutez ce qui suit à la méthode skip() après index =0:

Voici comment votre application devrait ressembler maintenant:

The player repeat and shuffle buttons

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.

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

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

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:

Ici, nous utilisons le composant Vuetify progress.

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

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

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:

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:

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

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.

The player info panel

Construire le composant barre de recherche

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

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:

The player search bar test

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!

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.