Construire des applications avec Vue.js est facile, amusant et agréable. Vous pouvez créer une application qui fonctionne avec un minimum d'effort. Pour vous le prouver, je vais vous montrer aujourd'hui à quel point 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’interface utilisateur alimentée par Vue.js, qui accélérera la construction de l’UI. Je peux presque sentir votre impatience, alors commençons.
Vous pouvez trouver le code source complet dans le dépôt GitHub. Et voici la démo de travail. Pour suivre ce didacticiel, vous devez connaître les composants Vue, les composants de fichier unique Vue et la syntaxe ES2015..
Planifier 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 un simple croquis du lecteur de musique.
J'ai créé cette structure filaire afin que vous puissiez avoir une idée générale de l'interface utilisateur que nous souhaitons créer. La prochaine étape consiste à décrire la fonctionnalité que nous avons l'intention d'implémenter..
Comme John Johnson le dit:
Tout d'abord, résolvez le problème. Ensuite, écrivez le code.
Nous utiliserons cela comme une source de sagesse et planifierons l'application avant de commencer à la coder..
Composants d'application
Vue.js est un framework à base de composants. Nous devons donc tout d'abord diviser l'application en composants individuels (cinq dans notre cas, comme indiqué dans l'esquisse ci-dessus), puis définir les caractéristiques et les fonctionnalités de chacun d'eux..
Barre de titre
Ce composant contiendra les pièces suivantes:
un menu sur le côté 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 et le titre de la piste 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 de la liste de lecture du lecteur..
un curseur de volume avec une icône à gauche (son apparence changera en fonction du niveau de volume et lorsque le son est mis en sourdine), ainsi que le pourcentage de volume à droite
boutons pour lire, mettre en pause, arrêter et sauter des pistes.
deux boutons à l'extrême droite: un pour répéter la piste en cours et un pour modifier l'ordre de lecture des pistes
une barre de recherche indiquant la position de la piste en cours de lecture, avec la possibilité de la changer d'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 les propriétés de numéro, d'artiste, de titre et de durée appropriées
sélectionner une piste en un seul clic
jouer une piste en double-clic
Barre de recherche
Ce composant offrira une fonctionnalité de recherche dans les cas où nous voulons trouver et lire des pistes particulières..
Bien entendu, le contour ci-dessus ne peut couvrir tous les détails et toutes les nuances, et cela convient parfaitement. Pour le moment, il nous suffit d’avoir une vue d’ensemble du produit final. Nous nous occuperons de tous les détails et des éventuels défis pendant le processus de construction.
Entrons donc dans 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 allons utiliser l'un des modèles CLI Vue prédéfinis appelé Webpack Simple. Exécutez les commandes suivantes dans le répertoire que vous souhaitez utiliser pour ce projet:
Ensuite, allez dans le répertoire de l'application et installez toutes les dépendances:
$ cd vue-music player $ npm installer
Nous utiliserons Howler.js (une bibliothèque audio JavaScript) pour gérer les parties audio du lecteur de musique. Nous devons donc l'inclure également dans le projet. Exécutez la commande suivante:
$ npm install --save hurleur
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 simple squelette de l'application Vuetify.
Peaufiner le modèle
Pour l'adapter à nos besoins, nous devons nettoyer le modèle et le peaufiner un peu. Renommer le App.vue déposer dans Player.vue, ouvrez-le, supprimez tout ce qu'il contient et ajoutez ce qui suit:
Nous enveloppons notre application de lecteur de musique dans le v-app composant requis pour le bon fonctionnement de l'application. Nous passons aussi le foncé prop, pour appliquer le thème sombre Vuetify.
Maintenant, ouvrez le main.js fichier, supprimez le contenu d'origine et ajoutez les éléments suivants:
importer Vue depuis 'vue' importer Vuetify depuis 'vuetify' importer 'vuetify / dist / vuetify.css' importer Player depuis './Player.vue' importer Howl, Howler depuis 'hurler' Vue.use (Vuetify) nouveau Vue (el: '#app', rendu: h => h (Player))
Aussi, ouvrez le index.html déposer et changer le contenu de la </code> tag à <em>Lecteur de musique Vue</em>.</p><p>Maintenant, dans votre navigateur, vous devriez voir une page sombre et vide. Et voila. Vous êtes prêt à commencer à créer.<br></p><p>Avant de commencer à coder, il est bon de savoir que Vuetify propose des extraits de code et l'auto-complétion pour les principaux éditeurs de code: VS Code, Atom et Sublime. Pour obtenir les extraits, recherchez l'extension dans votre éditeur favori (<code>vuetify-vscode</code>, ou <code>vuetify-atom</code>, ou <code>vuetify-sublime</code>).</p><h2>Construire le composant barre de titre</h2><p>dans le <strong>src</strong> répertoire, créer un nouveau <strong>Composants</strong> dossier. Ensuite, dans ce dossier, créez le <strong>PlayerTitleBar.vue</strong> fichier avec le contenu suivant: <br></p><pre><template> <v-system-bar window> <v-menu offset-y transition="slide-y-transition"> <v-btn flat small right slot="activator"> <v-icon>casque</v-icon> MENU </v-btn> <v-list> <v-list-tile @click="dialog = true"> <v-list-tile-title>Sur</v-list-tile-title> </v-list-tile> <v-dialog v-model="dialog" max-width="300"> <v-card> <v-card-title><h2>Lecteur de musique Vue</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">D'accord</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>retirer</v-icon> <v-icon>check_box_outline_blank</v-icon> <v-icon>Fermer</v-icon> </v-system-bar> </template> <script> export default data () return dialog: false , </script></pre><p>Ici, nous utilisons les composants Vuetify suivants: barre d’outils, menu, bouton, icône, liste, boîte de dialogue et carte. </p><p>Nous séparons le menu, le nom et les icônes avec le <code><v-spacer></code> composant. Pour afficher ou masquer le dialogue, nous créons le <code>dialogue: faux</code> propriété de données. Sa valeur va basculer quand on clique sur le bouton <em>Sur</em> élément du menu.<br></p><p>Maintenant, dans le <strong>Player.vue</strong> fichier, importez le composant de la barre de titre, enregistrez-le dans l'objet composants et ajoutez-le dans le modèle.<br></p><pre><template> <v-app dark> <v-content> <v-container> <player-title-bar></player-title-bar> // AJOUTER le composant dans le modèle </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></pre><p>Maintenant, vérifiez le résultat dans votre navigateur. Vous devriez voir ce qui suit:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_3.png"><p>Nous allons répéter ces trois étapes pour les quatre autres composants. Ainsi, lorsque je vous demande d'importer, d'enregistrer et d'ajouter un composant dans le modèle dans les sections suivantes, vous devez suivre la même procédure que celle décrite ici..</p><h2>Construire le composant Playlist<br></h2><p>Dans le répertoire racine, créez un nouveau <strong>playlist</strong> dossier 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 un <strong>.mp3</strong> extension à la fin, par exemple, <strong>Remember_the_Way.mp3</strong>. Maintenant, créez un tableau de pistes audio à l'intérieur <strong>Player.vue</strong>L'objet de données de: <br></p><pre>playlist: [titre: "Streets of Sant'Ivo", artiste: "Ask Again", hurlement: null, display: true, titre: "Remember the Way", artiste: "demander à nouveau", hurlement: null, display: true,…]</pre><p>Chaque piste a <code>Titre</code> et <code>artiste</code> propriétés, un <code>hurler</code> objet mis à <code>nul</code>, et un <code>afficher</code> propriété définie sur <code>vrai</code>. </p><p>le <code>afficher</code> Cette propriété sera utilisée lors de la mise en œuvre de la fonctionnalité de recherche. Maintenant, il est réglé sur <code>vrai</code> pour toutes les pistes, donc toutes sont visibles.</p><p>Howler enveloppe un fichier audio dans un <code>hurler</code> objet. Nous fixons <code>hurler</code> à <code>nul</code> parce que nous le peuplerons dynamiquement lors de la création de l'instance Vue. Pour ce faire, nous utilisons les Vue <code>créé</code> crochet de cycle de vie. </p><pre>created: function () this.playlist.forEach ((track) => let fichier = track.title.replace (/ \ s / g, "_") track.howl = nouveau Howl (src: ['. /playlist/$file.mp3 ']))</pre><p>Cela établira une nouvelle <code>Hurler</code> objet pour chaque piste de la playlist.</p><p>Maintenant, créez le <strong>PlayerPlaylistPanel.vue</strong> composant et ajouter ceci à l'intérieur: </p><pre><template> <v-card> <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></pre><p>Tout d'abord, nous passons l'accessoire <code>playlist</code> du <strong>Player.vue</strong> fichier. Ensuite, dans le modèle, nous parcourons chaque piste avec le <code>v-pour</code> directive et affichez l’indice de la piste, suivi de l’artiste et du titre de la piste, ainsi que la durée de la piste à l’extrême droite. Nous utilisons aussi <code>v-show</code> lié à la <code>afficher</code> propriété. Une piste ne sera visible que si <code>afficher</code> est <code>vrai</code>.</p><p>Maintenant, dans le <strong>Player.vue</strong> fichier, nous importons, enregistrons et ajoutons le composant playlist dans le modèle. Ensuite, nous lions le <code>playlist</code> appui au <code>playlist</code> propriété de données comme ceci: <code><player-playlist-panel :playlist="playlist"></player-playlist-panel></code>.</p><p>Vérifions le résultat dans le navigateur:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_4.png"><p>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 formatage. </p><p>dans le <strong>main.js</strong> déposer, créer un <code>Nombres</code> filtre et un <code>minutes</code> filtre, qui sera globalement accessible. Ensuite, dans <strong>PlayerPlaylistPanel.vue</strong>, nous les utilisons comme ceci: <code>index | Nombres </code> et <code>track.howl.duration () | minutes </code>.</p><p>Maintenant, si vous vérifiez l'application, tout devrait s'afficher correctement. </p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_5.png"><h3>Rendre les pistes sélectionnables<br></h3><p>dans le <strong>Player.vue</strong> fichier, ajoutez le <code>selectedTrack: null</code> data et le lier au composant playlist (<code>: selectedTrack = "selectedTrack"</code>). Ensuite, nous passons l'accessoire dans le <strong>PlayerPlaylistPanel.vue</strong> fichier (<code>selectedTrack: Object</code>). </p><p>Nous ajoutons également un écouteur d’événement click à <code><v-list-tile-content @click="selectTrack(track)"></code> puis créer le <code>selectTrack ()</code> méthode:</p><pre>méthodes: selectTrack (piste) this. $ emit ('selecttrack', piste) </pre><p>De retour dans <code>Player.vue</code>, ajouter le <code>selecttrack</code> événement au composant playlist (<code>@ selecttrack = "selectTrack"</code>) et créer le <code>selectTrack ()</code> méthode:</p><pre>selectTrack (piste) this.selectedTrack = piste</pre><p>Maintenant, si vous allez à la playlist 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:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_6.png"><h4>Rangée et style de sélection</h4><p>L'étape suivante consiste à rendre la sélection visible. Pour ce faire, nous allons lier une classe qui colorera la piste sélectionnée en orange et une autre classe qui assombrira les lignes pour rendre les pistes plus visibles. Mettez ce qui suit après le <code>v-show</code> directif:</p><pre>: class = "[selected: track === selectedTrack, even: index% 2 == 0]" </pre><p>Nous ajouterons également une autre classe, qui affichera une barre de défilement lorsque la liste devient trop longue..</p><pre><v-card :class="playlist"></pre><p>Nous ajoutons les classes nécessaires à la fin du fichier. </p><pre><style scoped> .sélectionné couleur de fond: orange! important; .even background-color: # 505050 .playlist débordement: auto </style></pre><p>Et c'est tout. Maintenant, la piste sélectionnée est surlignée en orange.</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_7.png"><p>Nous ajouterons la fonctionnalité de double-clic à la fin de la section suivante..</p><h2>Construire le composant Contrôles du lecteur<br></h2><p>Créons maintenant les contrôles du joueur. Nous allons commencer par les boutons play, pause et stop. <br></p><h3>Ajouter les boutons Play, Pause et Stop<br></h3><p>Créer le <strong>PlayerControlsBars.vue</strong> composant et ajouter ceci à l'intérieur: <br></p><pre><template> <div> <v-toolbar flat height=90> <v-spacer></v-spacer> <v-btn outline fab small color="light-blue" @click="stopTrack"> <v-icon>Arrêtez</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></pre><p>Ici, nous utilisons le composant Vuetify de la barre d’outils.</p><p>Il y a trois boutons avec des écouteurs d’événement de clic enregistrés. Créons les méthodes pour eux: </p><pre>méthodes: playTrack (index) this. $ emit ('playtrack', index), pauseTrack () this. $ emit ('pausetrack'), stopTrack () this. $ emit ('stoptrack') </pre><p>Maintenant, dans le <strong>Player.vue</strong> fichier, importer, enregistrer et ajouter le composant dans le modèle. Ensuite, enregistrez les écouteurs d'événement (<code>@ playtrack = "play"</code>, <code>@ pausetrack = "pause"</code>, <code>@ stoptrack = "stop"</code>).</p><p>Ensuite, créez le <code>indice: 0</code> propriété de données, qui tiendra l'index de la piste en cours. Ensuite, créez un calcul <code>currentTrack ()</code>: </p><pre>calculé: currentTrack () return this.playlist [this.index]</pre><p>Et maintenant, nous pouvons commencer à créer le <code>jouer</code>, <code>pause</code>, et <code>Arrêtez</code> méthodes. Nous allons commencer avec le <code>jouer()</code> méthode, mais avant cela, nous devons créer le <code>jouer: faux</code> data, qui indiquera si la piste est en cours de lecture ou non. Ajoutez le code suivant pour le <code>jouer()</code> méthode:</p><pre>play (index) let selectedTrackIndex = this.playlist.findIndex (track => track === this.selectedTrack) if (typeof index === 'nombre') index = index sinon 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 ()) retour else track.play () this.selectedTrack = this.playlist [index] this.playing = true this.index = index</pre><p>La méthode prend comme paramètre un index qui spécifie la piste à lire. Tout d'abord, nous obtenons l'index de la piste sélectionnée. Ensuite, nous faisons quelques vérifications pour déterminer la valeur du <code>indice</code>. Si un index est fourni sous forme d'argument et qu'il s'agit d'un nombre, 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 le <code>Arrêtez()</code> méthode pour arrêter le courant. Enfin, si ni un argument d’index n’est passé ni une piste sélectionnée, nous utilisons la valeur de <code>indice</code> propriété de données.</p><p>Ensuite, nous obtenons le hurlement (basé sur la valeur d'index) de la piste et vérifions s'il est en cours de lecture. Si c'est le cas, nous ne retournons rien; si ce n'est pas le cas, on y joue. </p><p>Enfin, nous mettons à jour le <code>selectedTrack</code>, <code>en jouant</code> et <code>indice</code> propriétés de données.</p><p>Créons maintenant le <code>pause()</code> et <code>Arrêtez()</code> les méthodes. </p><pre>pause () this.currentTrack.howl.pause () this.playing = false, stop () this.currentTrack.howl.stop () this.playing = false</pre><p>Ici, nous mettons en pause ou arrêtons la piste en cours et mettons à jour le <code>en jouant</code> propriété de données.</p><p>Faisons également en sorte que la piste commence à jouer en double-clic.</p><p>Ajouter <code>@ dblclick = "playTrack ()"</code> à <code><v-list-tile-content></code> dans le <strong>PlayerPlaylistPanel.vue</strong> et créer le <code>playTrack ()</code> méthode:</p><pre>playTrack (index) this. $ emit ('playtrack', index)</pre><p>Enregistrer l'auditeur <code>@ playtrack = "play"</code> dans le <strong>Player.vue</strong> déposer et le tour est joué.</p><h3>Ajouter les boutons précédent et suivant</h3><p>Ajoutons maintenant les boutons précédent et suivant.<br></p><pre><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>passez au suivant</v-icon> </v-btn></pre><p>Créer le <code>skipTrack ()</code> méthode:</p><pre>skipTrack (direction) this. $ emit ('skiptrack', direction)</pre><p>Enregistrer l'écouteur d'événement (<code>@ skiptrack = "skip"</code>) dans <strong>Player.vue</strong>.</p><p>Et créer le <code>sauter()</code> méthode:</p><pre>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) </pre><p>Nous vérifions d’abord si la direction est <code>suivant</code>. 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 à zéro. Quand la direction est <code>prev</code>, nous décrémentons l'index de 1. Et si l'index est inférieur à zéro, nous utilisons le dernier index. À la fin, nous utilisons le <code>indice</code> comme argument pour la <code>passer()</code> méthode. Il arrête la piste en cours et lit la lecture suivante ou précédente..</p><p>Voici à quoi ressemble le joueur avec les boutons:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_8.png"><h3>Ajouter le curseur de volume<br></h3><p>Ajoutez ce qui suit avant tous les boutons:<br></p><pre><v-slider v-model="volume" @input="updateVolume(volume)" max="1" step="0.1"></v-slider></pre><p>Ici, nous utilisons le composant curseur Vuetify.</p><p>Ajouter le <code>volume: 0.5</code> propriété de données, puis créer le <code>updateVolume ()</code> méthode:</p><pre>updateVolume (volume) Howler.volume (volume)</pre><p>Ici, nous utilisons l'objet global Howler pour définir le volume globalement pour tous les hurlements..</p><p>En outre, nous devons synchroniser le volume initial Howler, qui est défini par défaut sur 1, sur le <code>le volume</code> propriété. Si vous ne le faites pas, le volume indiquera 0,5 mais sera initialement de 1. Pour ce faire, nous allons utiliser le <code>créé</code> accrocher à nouveau:</p><pre>créé: function () Howler.volume (this.volume)</pre><p>Nous voulons voir le niveau de volume sous forme de pourcentage à droite du curseur de volume, nous l'ajoutons donc dans le modèle: <code>this.volume * 100 + '%'</code> </p><h3>Ajouter le bouton Muet </h3><p>Maintenant, nous ajoutons une icône de volume avant le curseur. <br></p><pre><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></pre><p>L'icône changera en fonction des valeurs du <code>le volume</code> et <code>en sourdine</code> Propriétés.</p><p>Ajouter le <code>en sourdine: faux</code> propriété de données et créer le <code>toggleMute ()</code> méthode:</p><pre>toggleMute () Howler.mute (! this.muted) this.muted =! this.muted</pre><p>Nous utilisons à nouveau l'objet global Howler pour définir le muet globalement, puis nous basculons la <code>en sourdine</code> valeur. </p><p>Dans la capture d'écran ci-dessous, vous pouvez voir à quoi le curseur de volume devrait ressembler:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_9.png"><h3>Ajouter le bouton de répétition</h3><p>Ajoutez ce qui suit après tous les boutons:</p><pre><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></pre><p>Ajouter le <code>boucle: faux</code> propriété dans <strong>Player.vue</strong>, lie le <code>: boucle = "boucle"</code> et passez le pilier (<code>boucle: booléenne</code>) dans <strong>PlayerControlsBars.vue</strong>. </p><p>Maintenant, créons le <code>toggleLoop ()</code> méthode:</p><pre>toggleLoop () this. $ emit ('toggleloop',! this.loop)</pre><p>De retour dans <strong>Player.vue</strong>, enregistrer l'écouteur d'événement (<code>@ toggleloop = "toggleLoop"</code>) et créer le <code>toggleLoop ()</code> méthode:</p><pre>toggleLoop (valeur) this.loop = valeur</pre><p>À ce stade, nous sommes confrontés à un petit problème. Quand une piste cherche la fin, elle s'arrête. Le lecteur ne passe pas à la piste suivante et ne répète pas la piste en cours. Pour résoudre ce problème, nous devons ajouter ce qui suit à la <code>créé</code> fonction après la <code>src</code> propriété:</p><pre>onend: () => if (this.loop) this.play (this.index) else this.skip ('next')</pre><p>Maintenant, quand le <code>boucle</code> est activé, la piste en cours sera répétée. S'il est désactivé, le joueur passera sur la piste suivante..</p><h3>Ajouter le bouton de lecture aléatoire</h3><p>Ajoutez ce qui suit après le bouton de répétition:</p><pre><v-btn flat icon @click="toggleShuffle"> <v-icon color="light-blue" v-if="this.shuffle">mélanger</v-icon> <v-icon color="blue-grey" v-else>mélanger</v-icon> </v-btn></pre><p>Ajouter le <code>mélanger: faux</code> propriété dans <code>Player.vue</code>, le lier (<code>: shuffle = "shuffle"</code>) et passez le pilier (<code>shuffle: Boolean</code>) dans <code>PlayerControlsBars.vue</code>. </p><p>Maintenant, créons le <code>toggleShuffle ()</code> méthode;</p><pre>toggleShuffle () this. $ emit ('toggleshuffle',! this.shuffle)</pre><p>De retour dans <strong>Player.vue</strong>, enregistrer l'écouteur d'événement (<code>@ toggleshuffle = "toggleShuffle"</code>) et créer le <code>toggleShuffle ()</code> méthode:</p><pre>toggleShuffle (valeur) this.shuffle = valeur</pre><p>Maintenant, ajoutez ce qui suit au <code>sauter()</code> méthode après <code>indice = 0</code>:</p><pre>lastIndex = this.playlist.length - 1 if (this.shuffle) index = Math.round (Math.random () * lastIndex) tandis que (index === this.index) index = Math.round (Math.random () * lastIndex) else if (direction === "suivant") … </pre><p>Voici à quoi votre application devrait ressembler maintenant:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_10.png"><h3>Ajouter la barre de recherche</h3><p>Premier arrivé <strong>Player.vue</strong>, créer le <code>chercher: 0</code> propriété. Ensuite, nous devrons regarder le <code>en jouant</code> propriété afin de mettre à jour la recherche.</p><pre>regarder: jouer (jouer) this.seek = this.currentTrack.howl.seek () laisser updateSeek si (jouer) updateSeek = setInterval (() => this.seek = this.currentTrack.howl.seek () , 250) else clearInterval (updateSeek),</pre><p>Ceci mettra à jour la valeur de recherche quatre fois par seconde.</p><p>Maintenant, créez un calcul <code>le progrès()</code>:</p><pre>progress () if (this.currentTrack.howl.duration () === 0) renvoie 0 renvoie this.seek / this.currentTrack.howl.duration ()</pre><p>Liez-le (<code>: progress = "progress"</code>) dans le modèle. </p><p>Maintenant en <strong>PlayerControlsBars.vue</strong>, passe le <code>le progrès</code> prop (<code>progrès: nombre</code>) et ajoutez une autre barre d’outils en dessous de celle que nous avons déjà créée:</p><pre><v-toolbar flat> <v-progress-linear v-model="trackProgress" @click="updateSeek($event)"></v-progress-linear> </v-toolbar></pre><p>Ici, nous utilisons le composant Vuetify Progress.</p><p>Créer un calcul <code>suivre le progrès()</code>, qui obtiendra la progression de la piste en pourcentage.</p><pre>calculé: trackProgress () return this.progress * 100,</pre><p>Et maintenant, créez le <code>updateSeek ()</code> méthode: </p><pre>updateSeek (event) let el = document.querySelector (". progress-linear__bar"), mousePos = event.offsetX, elWidth = el.clientWidth, percents = (mousePos / elWidth) * 100 this. $ emit ('updateseek', pourcentages </pre><p>Ici, nous obtenons l’élément barre de progression, qui utilise le <code>.progress-linear__bar</code> classe. J'ai trouvé cela 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 souris en pourcentage.</p><p>Retour dans <strong>Player.vue</strong>, ajoutez et enregistrez l'écouteur d'événement (<code>@ updateseek = "setSeek"</code>) et créer le <code>setSeek ()</code> méthode:</p><pre>setSeek (pourcentages) let track = this.currentTrack.howl if (track.playing ()) track.seek ((track.duration () / 100) * pourcent)</pre><p>Et boum! Vous pouvez utiliser votre souris pour changer la position de la piste lue.</p><h2>Construire le composant du panneau d'informations</h2><p>Créer le <strong>PlayerInfoPanel.vue</strong> fichier avec le contenu suivant:<br></p><pre><template> <v-card> <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></pre><p>Ici, nous passons un accessoire <code>trackInfo</code>, que nous utilisons pour renseigner les informations de piste dans notre composant.</p><p>De retour dans <strong>Player.vue</strong>, importer, enregistrer et ajouter le composant dans le modèle. </p><p>Ensuite, créez un calcul <code>getTrackInfo ()</code>: </p><pre>getTrackInfo () let artiste = this.currentTrack.artist, title = this.currentTrack.title, seek = this.seek, duration = this.currentTrack.howl.duration () retourne artiste, titre, cherche, durée</pre><p>Ensuite, nous le lions dans le template (<code>: trackInfo = "getTrackInfo"</code>) 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..</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_11.png"><h2>Construire le composant barre de recherche</h2><p>Créer le <strong>PlayerSearchBar.vue</strong> fichier avec le contenu suivant: <br></p><pre><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></pre><p>Nous créons un champ de texte et ajoutons le <code>effaçable</code> prop à montrer une icône de compensation lorsque nous tapons quelque chose.</p><p>En utilisant <code>modèle v</code>, nous le lions au <code>searchString</code>, qui est une chaîne vide au début. Et nous ajoutons un écouteur d'événement d'entrée.</p><p>Nous passons aussi le <code>playlist</code> prop, que nous utilisons dans le <code>searchPlaylist ()</code> méthode. Dans cette méthode, nous utilisons le <code>afficher</code> propriété et le tourner <code>de</code> pour chaque piste dont le titre ou l'artiste ne correspond pas à la chaîne de recherche, et nous la conservons ou la transformons <code>sur</code> pour tous les matches. Enfin, si la chaîne de recherche est vide ou égale à <code>nul</code>, ce qui arrive quand on efface le champ avec le bouton clear, on tourne <code>sur</code> la <code>afficher</code> pour toutes les pistes.</p><p>De retour dans <strong>Player.vue</strong>, importer, enregistrer et ajouter le composant dans le modèle. </p><p>Lier la propriété playlist (<code>: playlist = "playlist"</code>) et vérifiez la fonctionnalité. Voici à quoi cela devrait ressembler en action:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_12.png"><h2>Quelques idées d'amélioration</h2><p>Comme vous pouvez le constater, avec un objectif clair et une planification appropriée, la création d'une application Vue / Vuetify peut être très simple et agréable. Vous disposez maintenant d'un lecteur de musique que vous pouvez utiliser pendant votre temps de relaxation ou de codage. Bien sûr, il y a toujours place pour d'autres améliorations et ajouts. Voici donc quelques idées que vous pouvez essayer pour rendre le lecteur encore plus riche en fonctionnalités: </p><ul> <li>support de plusieurs playlists</li> <li>possibilité d'ajouter ou de supprimer d
<div class="rek-block">
<center>
<ins class="adsbygoogle"
style="display:inline-block;width:580px;height:400px"
data-ad-client="ca-pub-3810161443300697"
data-ad-slot="9434875811"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>
</div>
<div class="h-alltags">
<a href="articles/code">Code</a>
</div>
</div>
</div>
</div>
</div>
<div class="next_posts clearfix">
<div class="n_post">
<div class="next_posts-h1 left_nh1"><a href="/articles/gamedevelopment/build-a-neon-asteroids-shoot-em-up-from-scratch.html">Construire un néon Asteroids Shoot-'Em-Up From Scratch</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_21/build-a-neon-asteroids-shoot-em-up-from-scratch.png');"></div>
</div>
<div class="n_post">
<div class="next_posts-h1 right_nh1"><a href="/articles/code/build-a-music-app-with-an-android-app-template.html">Construire une application musicale avec un modèle d'application Android</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_3/build-a-music-app-with-an-android-app-template_15.jpg');"></div>
</div>
</div>
<footer>
<div class="container">
<div class="footer-langs">
<ul class="site-langs-list">
<li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li>
<li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li>
<li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li>
<li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li>
<li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li>
<li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li>
<li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li>
<li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li>
</ul>
</div>
<div class="h-block"><a href="/">fr.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Informations intéressantes et conseils utiles sur la programmation. Développement de sites Web, conception de sites Web et développement Web. Tutoriels Photoshop. Création de jeux informatiques et d'applications mobiles. Devenez un programmeur professionnel à partir de zéro.
</div>
</div>
</footer>
<div class="search">
<img class="searchico" src="//accentsconagua.com/img/search.svg" alt="">
</div>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<input class="searchmain" type="text" id="search-input" placeholder="Chercher...">
<ul class="searchli" id="results-container"></ul>
</div>
</div>
<link rel="stylesheet" href="css/flags.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#edeff5",
"text": "#838391"
},
"button": {
"background": "#4b81e8"
}
},
"theme": "classic",
"position": "bottom-right"
})});
</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script src="js/scripts.min.js"></script>
<script src="js/common.js"></script>
<link rel="stylesheet" href="css/fontawesome-all.min.css">
<script>
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".search");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
</script>
<script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>
<script>
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
json: '/search.json',
searchResultTemplate: '<li><a href="{url}">{title}</a></li>'
})
</script>
<script src="jquery.unveil2.min.js"></script>
<script>
$('img').unveil();
</script>
</body>
</html>
Share
Ce que vous allez créer
Accentsconagua