Apps bouwen met Vue.js is gemakkelijk, leuk en plezierig. Je kunt een werkende app met minimale inspanning bouwen. Om dat te bewijzen, laat ik je vandaag zien hoe eenvoudig het is om je eigen complete muziekspeler te bouwen. Om het nog gemakkelijker te maken, gebruiken we Vuetify.js, een door Vue.js aangedreven UI-bibliotheek, die de UI-constructie versnelt. Ik kan bijna je ongeduld voelen, dus laten we beginnen.
Je vindt de volledige broncode in de GitHub-repo. En hier is de werkende demo. Als u deze zelfstudie wilt volgen, moet u bekend zijn met Vue-componenten, Vue-componenten voor afzonderlijke bestanden en ES2015-syntaxis.
De app plannen
Elke creatie begint met een idee en op zijn minst wat basisplanning. Dus eerst moeten we beslissen wat we willen bouwen en welke functionaliteit we willen implementeren. Er wordt gezegd dat een foto meer zegt dan duizend woorden, dus laten we beginnen met een eenvoudige schets van de muziekspeler.
Ik heb dit draadframe gemaakt, zodat je een algemeen beeld krijgt van de gebruikersinterface die we willen bouwen. De volgende stap is het beschrijven van de functionaliteit die we willen implementeren.
Zoals John Johnson zegt:
Los eerst het probleem op. Schrijf vervolgens de code.
We gebruiken dat als een bron van wijsheid en we plannen de app voordat we hem gaan coderen.
App-componenten
Vue.js is een op componenten gebaseerd raamwerk. We moeten dus eerst de app splitsen in afzonderlijke componenten (vijf in ons geval, zoals weergegeven in de bovenstaande schets) en de functies en functionaliteit voor elk daarvan schetsen.
Titelbalk
Dit onderdeel bevat de volgende onderdelen:
een menu aan de linkerkant
de naam van de app in het midden
drie statische pictogrammen aan de rechterkant
Infopaneel
Dit onderdeel toont basisinformatie over het momenteel afgespeelde nummer:
de artiest en titel van het nummer aan de linkerkant
de positie en duur van het huidige nummer aan de rechterkant
Bedieningsbalken
Dit onderdeel bevat twee balken, die alle bedieningselementen bevatten die nodig zijn om de audiotracks in de afspeellijst van de speler te bewerken.
een volumeschuifregelaar met een pictogram aan de linkerkant (het uiterlijk ervan is afhankelijk van het volumeniveau en wanneer het geluid is gedempt) en het volumepercentage aan de rechterkant
knoppen voor het afspelen, pauzeren, stoppen en overslaan van de nummers.
twee knoppen helemaal rechts: een voor het herhalen van het huidige nummer en een voor het in willekeurige volgorde afspelen van de tracks
een zoekbalk die de positie van het momenteel afgespeelde nummer toont, met de mogelijkheid om het te veranderen met een muisklik op de balk
Playlist-paneel
Dit onderdeel bevat de afspeellijst van de tracks met de volgende functionaliteit:
een nummer weergeven met het juiste nummer, de eigenschappen van de artiest, de titel en de duur
selecteer een nummer met één klik
speel een nummer af met een dubbele klik
Zoekbalk
Dit onderdeel biedt zoekfunctionaliteit in de gevallen waarin we bepaalde track (s) willen vinden en afspelen.
Natuurlijk kan de bovenstaande schets niet alle details en nuances behandelen, en dit is prima. Voor nu is het genoeg voor ons om een algemeen beeld te krijgen van het eindproduct. We zullen omgaan met alle details en eventuele uitdagingen tijdens het bouwproces.
Dus laten we in het leuke gedeelte stappen en wat code schrijven!
Ermee beginnen
De snelle startpagina van Vuetify biedt tal van opties om u op weg te helpen. We gebruiken een van de vooraf gemaakte Vue CLI-sjablonen, Webpack Simple genaamd. Voer de volgende opdrachten uit in de map die u voor dit project wilt gebruiken:
Ga vervolgens naar de directory van de app en installeer alle afhankelijkheden:
$ cd vue-music player $ npm installatie
We gebruiken Howler.js (een JavaScript-audiobibliotheek) om de audiogedeelten van de muziekspeler te verwerken. Dus we moeten het ook in het project opnemen. Voer de volgende opdracht uit:
$ npm install - red howler
En ten slotte, voer de app uit:
$ npm voer dev uit
De app wordt geopend localhost: 8080 in je standaardbrowser. Je zou een eenvoudig Vuetify app-skelet moeten zien.
De sjabloon aanpassen
Om het aan te passen aan onze behoeften, moeten we de sjabloon opschonen en een beetje aanpassen. Hernoem de App.vue bestand naar Player.vue, open het, verwijder alles van binnen, en voeg in plaats daarvan het volgende toe:
We verpakken onze muziekspeler-app in de v-app component, die nodig is om de app correct te laten werken. We passeren ook de donker prop, om het donkere thema van Vuetify toe te passen.
Open nu de main.js bestand, verwijder de originele inhoud en voeg het volgende toe:
import Vue van 'vue' import Vuetify van 'vuetify' import 'vuetify / dist / vuetify.css' import Speler van './Player.vue' import Howl, Howler van 'howler' Vue.use (Vuetify) nieuwe Vue (el: '#app', render: h => h (Player))
Open ook de index.html bestand en verander de inhoud van de </code> tag aan <em>Vue muziekspeler</em>.</p><p>Nu zou je in je browser een lege donkere pagina moeten zien. En voila. U bent klaar om te beginnen met creëren.<br></p><p>Voordat u begint met coderen, is het goed om te weten dat Vuetify codefragmenten en automatische aanvullingen biedt voor de belangrijkste codebewerkers: VS Code, Atom en Sublime. Zoek naar de extensie in uw favoriete editor om de fragmenten op te halen (<code>vuetify-vscode</code>, of <code>vuetify-atoom</code>, of <code>vuetify-sublieme</code>).</p><h2>Bouw de Titelbalkcomponent</h2><p>In de <strong>src</strong> map, maak een nieuwe aan <strong>componenten</strong> map. Maak vervolgens in die map de <strong>PlayerTitleBar.vue</strong> bestand met de volgende inhoud: <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>koptelefoon</v-icon> MENU </v-btn> <v-list> <v-list-tile @click="dialog = true"> <v-list-tile-title>Wat betreft</v-list-tile-title> </v-list-tile> <v-dialog v-model="dialog" max-width="300"> <v-card> <v-card-title><h2>Vue muziekspeler</h2></v-card-title> <v-card-text>Versie 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>verwijderen</v-icon> <v-icon>check_box_outline_blank</v-icon> <v-icon>dichtbij</v-icon> </v-system-bar> </template> <script> export default data () return dialog: false , </script></pre><p>Hier gebruiken we de volgende Vuetify-componenten: werkbalk, menu, knop, pictogram, lijst, dialoogvenster en kaart. </p><p>We scheiden het menu, de naam en de pictogrammen met de <code><v-spacer></code> component. Om het dialoogvenster weer te geven of te verbergen, maken we het <code>dialoogvenster: false</code> data-eigenschap. De waarde zal wisselen als we op klikken <em>Wat betreft</em> menu onderdeel.<br></p><p>Nu, in de <strong>Player.vue</strong> bestand, importeer de titelbalkcomponent, registreer deze in het componentenobject en voeg deze toe aan de sjabloon.<br></p><pre><template> <v-app dark> <v-content> <v-container> <player-title-bar></player-title-bar> // VOEG het onderdeel toe aan de sjabloon </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>Controleer nu het resultaat in uw browser. Je zou het volgende moeten zien:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_3.png"><p>We herhalen deze drie stappen voor de andere vier componenten. Dus als ik in de volgende secties zeg dat u een onderdeel in de sjabloon moet importeren, registreren en toevoegen, moet u dezelfde procedure volgen die hier wordt beschreven.</p><h2>Bouw de afspeellijstcomponent<br></h2><p>Maak een nieuwe in de hoofdmap <strong>afspeellijst</strong> map en voeg de audiobestanden toe die u wilt afspelen. De bestandsnamen moeten met underscores worden geschreven tussen de woorden en a <strong>.mp3</strong> extensie aan het einde, bijvoorbeeld, <strong>Remember_the_Way.mp3</strong>. Maak nu een reeks audionummers aan de binnenkant <strong>Player.vue</strong>gegevensobject: <br></p><pre>playlist: [title: "Streets of Sant'Ivo", artiest: "Ask Again", howl: null, display: true, title: "Remember the Way", artiest: "Ask Again", howl: null, weergave: true, ...]</pre><p>Elke track heeft <code>titel</code> en <code>artiest</code> eigenschappen, a <code>gehuil</code> object ingesteld op <code>nul</code>, en een <code>tonen</code> eigenschap ingesteld op <code>waar</code>. </p><p>De <code>tonen</code> property wordt gebruikt wanneer we de zoekfunctionaliteit implementeren. Nu is het ingesteld op <code>waar</code> voor alle nummers, dus ze zijn allemaal zichtbaar.</p><p>Howler verpakt een audiobestand in een <code>gehuil</code> voorwerp. We gaan zitten <code>gehuil</code> naar <code>nul</code> omdat we het dynamisch vullen bij het maken van de Vue-instantie. Om dat te doen, gebruiken we de Vue's <code>aangemaakt</code> levenscyclus haak. </p><pre>gemaakt: function () this.playlist.forEach ((track) => let file = track.title.replace (/ \ s / g, "_") track.howl = new Howl (src: ['. /playlist/$file.mp3 ']))</pre><p>Hiermee wordt een nieuw ingesteld <code>Gehuil</code> object voor elke track in de afspeellijst.</p><p>Maak nu het <strong>PlayerPlaylistPanel.vue</strong> component en voeg dit toe binnen: </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>Eerst passeren we de prop <code>afspeellijst</code> van de <strong>Player.vue</strong> het dossier. Vervolgens gaan we in de sjabloon door elke track met de <code>v-for</code> richtlijn en toon de index van de track, gevolgd door de artiest en de titel van de track en de duur van de track helemaal rechts. We gebruiken ook <code>v-toon</code> gebonden aan de <code>tonen</code> eigendom. Een nummer is alleen zichtbaar als <code>tonen</code> is <code>waar</code>.</p><p>Nu, in de <strong>Player.vue</strong> bestand, we importeren, registreren en voegen de afspeellijstcomponent toe aan de sjabloon. Vervolgens binden we de <code>afspeellijst</code> steun aan de <code>afspeellijst</code> data-eigenschap als deze: <code><player-playlist-panel :playlist="playlist"></player-playlist-panel></code>.</p><p>Laten we het resultaat in de browser controleren:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_4.png"><p>Er zijn hier twee problemen. Ten eerste zijn de nummers van de tracks niet correct en ten tweede wordt de duur van het nummer weergegeven in milliseconden, maar we willen dat het nummer in minuten is. We lossen elk van deze problemen op door een opmaakfilter te maken. </p><p>In de <strong>main.js</strong> bestand, maak een <code>getallen</code> filter en a <code>notulen</code> filter, die wereldwijd toegankelijk is. Volgende, in <strong>PlayerPlaylistPanel.vue</strong>, we gebruiken ze als volgt: <code>index | nummers</code> en <code>track.howl.duration () | minuten</code>.</p><p>Als u de app nu aanvinkt, zou alles correct moeten worden weergegeven. </p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_5.png"><h3>Maak nummers selecteerbaar<br></h3><p>In de <strong>Player.vue</strong> bestand, voeg de <code>selectedTrack: null</code> data-eigenschap en bind deze aan de afspeellijstcomponent (<code>: SelectedTrack = "selectedTrack"</code>). Vervolgens passeren we de prop in de <strong>PlayerPlaylistPanel.vue</strong> het dossier (<code>selectedTrack: Object</code>). </p><p>We voegen ook een klikgebeurtenislistener toe aan <code><v-list-tile-content @click="selectTrack(track)"></code> en maak vervolgens de <code>selectTrack ()</code> methode:</p><pre>methoden: selectTrack (track) this. $ emit ('selecttrack', track) </pre><p>Nu weer terug <code>Player.vue</code>, voeg het toe <code>selecttrack</code> evenement voor de afspeellijstcomponent (<code>@ Selecttrack = "selectTrack"</code>) en maak de <code>selectTrack ()</code> methode:</p><pre>selectTrack (track) this.selectedTrack = track</pre><p>Als u nu naar de afspeellijst gaat en op een nummer klikt, wordt deze geselecteerd. We kunnen het niet zien, maar we kunnen het bewijzen in de Vue DevTools. In de volgende schermafbeelding is de tweede track geselecteerd:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_6.png"><h4>Rij- en selectie-styling</h4><p>De volgende stap is om de selectie zichtbaar te maken. Om dit te doen, binden we een klasse die de geselecteerde track in oranje kleurt en een andere klasse die zelfs rijen donkerder maakt om de tracks beter te onderscheiden. Zet het volgende na de <code>v-toon</code> richtlijn:</p><pre>: class = "[selected: track === selectedTrack, even: index% 2 == 0]" </pre><p>We voegen ook nog een klas toe, die een schuifbalk laat zien als de lijst te groot wordt.</p><pre><v-card :class="playlist"></pre><p>We voegen de nodige klassen toe aan het einde van het bestand. </p><pre><style scoped> .geselecteerd achtergrondkleur: oranje! belangrijk; .even achtergrondkleur: # 505050 .playlist overflow: auto </style></pre><p>En dat is het. Het geselecteerde nummer is nu oranje gemarkeerd.</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_7.png"><p>Aan het einde van het volgende gedeelte voegen we de afspeelfunctionaliteit voor dubbelklikken toe.</p><h2>Bouw de Player Controls Component<br></h2><p>Laten we nu de bedieningselementen van de speler maken. We beginnen met de knoppen Afspelen, Pauzeren en Stoppen. <br></p><h3>Voeg de knoppen Afspelen, Pauze en Stoppen toe<br></h3><p>Maak het <strong>PlayerControlsBars.vue</strong> component en voeg dit toe binnen: <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>hou op</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>pauze</v-icon> </v-btn> <v-spacer></v-spacer> </v-toolbar> </div> </template></pre><p>Hier gebruiken we de Vuetify-werkbalkcomponent.</p><p>Er zijn drie knoppen met geregistreerde klikgebeurtenislisteners. Laten we de methoden voor hen maken: </p><pre>methoden: playTrack (index) this. $ emit ('playtrack', index), pauseTrack () this. $ emit ('pausetrack'), stopTrack () this. $ emit ('stoptrack') </pre><p>Nu, in de <strong>Player.vue</strong> bestand, importeer, registreer en voeg de component toe aan de sjabloon. Registreer vervolgens de gebeurtenislisteners (<code>@ PlayTrack = "spelen"</code>, <code>@ Pausetrack = "pause"</code>, <code>@ StopTrack = "stop"</code>).</p><p>Maak vervolgens de <code>index: 0</code> data-eigenschap, die de index van de huidige track zal bevatten. Maak vervolgens een berekende <code>currentTrack ()</code>: </p><pre>berekend: currentTrack () retourneer deze.playlist [this.index]</pre><p>En nu kunnen we beginnen met het maken van de <code>spelen</code>, <code>pauze</code>, en <code>hou op</code> methoden. We beginnen met de <code>spelen()</code> methode, maar daarvoor moeten we het maken <code>spelen: false</code> data-eigenschap, die aangeeft of de track wordt afgespeeld of niet. Voeg de volgende code toe voor de <code>spelen()</code> methode:</p><pre>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 ()) ga terug else track.play () this.selectedTrack = this.playlist [index] this.playing = true this.index = index</pre><p>De methode neemt een index als de parameter, die het nummer aangeeft dat moet worden afgespeeld. Eerst krijgen we de index van de geselecteerde track. Vervolgens voeren we enkele controles uit om de waarde van de te bepalen <code>inhoudsopgave</code>. Als een index wordt verstrekt als een argument en het een getal is, gebruiken we het. Als een nummer is geselecteerd, gebruiken we de index van het geselecteerde nummer. Als de geselecteerde track anders is dan de huidige, gebruiken we de <code>hou op()</code> methode om de huidige te stoppen. Als ten slotte een indexargument niet is doorgegeven of een track is geselecteerd, gebruiken we de waarde van de <code>inhoudsopgave</code> data-eigenschap.</p><p>Vervolgens krijgen we het gehuil (op basis van de indexwaarde) voor de track en controleren of het speelt. Als dat zo is, keren we niets terug; als dat niet zo is, spelen we het. </p><p>Ten slotte werken we het <code>selectedTrack</code>, <code>spelen</code> en <code>inhoudsopgave</code> data eigenschappen.</p><p>Laten we nu het maken <code>pauze()</code> en <code>hou op()</code> methoden. </p><pre>pause () this.currentTrack.howl.pause () this.playing = false, stop () this.currentTrack.howl.stop () this.playing = false</pre><p>Hier pauzeren of stoppen we het huidige nummer en werken we het <code>spelen</code> data-eigenschap.</p><p>Laten we ook een nummer beginnen te spelen met dubbelklikken.</p><p>Toevoegen <code>@ DblClick = "PlayTrack ()"</code> naar <code><v-list-tile-content></code> in de <strong>PlayerPlaylistPanel.vue</strong> en maak de <code>PlayTrack ()</code> methode:</p><pre>playTrack (index) this. $ emit ('playtrack', index)</pre><p>Registreer de luisteraar <code>@ PlayTrack = "spelen"</code> in de <strong>Player.vue</strong> bestand en voila.</p><h3>Voeg de vorige en volgende knoppen toe</h3><p>Laten we nu de vorige en volgende knoppen toevoegen.<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>skip_next</v-icon> </v-btn></pre><p>Maak het <code>skipTrack ()</code> methode:</p><pre>skipTrack (richting) this. $ emit ('skiptrack', richting)</pre><p>Registreer de gebeurtenislistener (<code>@ Skiptrack = "skip"</code>) in <strong>Player.vue</strong>.</p><p>En maak de <code>overspringen()</code> methode:</p><pre>skip (richting) 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>We controleren eerst of de richting is <code>volgende</code>. Als dit het geval is, verhogen we de index met 1. En als de index groter wordt dan de laatste index in de array, dan beginnen we opnieuw bij nul. Wanneer de richting is <code>prev</code>, we verlagen de index met 1. En als de index kleiner is dan nul, gebruiken we de laatste index. Aan het eind gebruiken we de <code>inhoudsopgave</code> als een argument voor de <code>skipto ()</code> methode. Het stopt de huidige track en speelt de volgende of vorige af.</p><p>Hier ziet u hoe de speler eruit ziet met de knoppen:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_8.png"><h3>Voeg de volumeschuif toe<br></h3><p>Voeg het volgende toe vóór alle knoppen:<br></p><pre><v-slider v-model="volume" @input="updateVolume(volume)" max="1" step="0.1"></v-slider></pre><p>Hier gebruiken we de schuifcomponent Vuetify.</p><p>Voeg de toe <code>volume: 0,5</code> data eigenschap en maak vervolgens de <code>updateVolume ()</code> methode:</p><pre>updateVolume (volume) Howler.volume (volume)</pre><p>Hier gebruiken we het globale Howler-object om het volume globaal in te stellen voor alle gehuil.</p><p>We moeten ook het oorspronkelijke Howler-volume, dat standaard is ingesteld op 1, synchroniseren met de <code>volume</code> eigendom. Als u dit niet doet, wordt het volume 0,5 weergegeven, maar in eerste instantie 1. Om dat te doen, zullen we de <code>aangemaakt</code> haak opnieuw:</p><pre>gemaakt: function () Howler.volume (this.volume)</pre><p>We willen het volumeniveau zien als een percentage rechts van de volumeregelaar, dus we voegen dit toe aan de sjabloon: <code>this.volume * 100 + '%'</code> </p><h3>Voeg de knop Dempen toe </h3><p>Nu voegen we een volumepictogram toe vóór de schuifregelaar. <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>Het pictogram zal veranderen volgens de waarden van de <code>volume</code> en <code>gedempt</code> eigenschappen.</p><p>Voeg de toe <code>gedempt: false</code> data eigenschap en maak de <code>toggleMute ()</code> methode:</p><pre>toggleMute () Howler.mute (! this.muted) this.muted =! this.muted</pre><p>We gebruiken het globale Howler-object opnieuw om de muting globaal in te stellen, en dan schakelen we de <code>gedempt</code> waarde. </p><p>In de onderstaande schermafbeelding ziet u hoe de volumeregelaar eruit moet zien:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_9.png"><h3>Voeg de herhaalknop toe</h3><p>Voeg het volgende toe na alle knoppen:</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>Voeg de toe <code>loop: false</code> woning in <strong>Player.vue</strong>, bind het <code>: Loop = "loop"</code> en passeer de prop (<code>loop: Boolean</code>) in <strong>PlayerControlsBars.vue</strong>. </p><p>Laten we nu het maken <code>toggleLoop ()</code> methode:</p><pre>toggleLoop () this. $ emit ('toggleloop',! this.loop)</pre><p>Nu weer terug <strong>Player.vue</strong>, registreer de gebeurtenislistener (<code>@ Toggleloop = "toggleLoop"</code>) en maak de <code>toggleLoop ()</code> methode:</p><pre>toggleLoop (waarde) this.loop = value</pre><p>Op dit moment hebben we een klein probleempje. Wanneer een nummer het einde zoekt, stopt het gewoon. De speler gaat niet naar de volgende track en herhaalt ook de huidige track niet. Om dit op te lossen, moeten we het volgende toevoegen aan de <code>aangemaakt</code> functie na de <code>src</code> eigendom:</p><pre>onend: () => if (this.loop) this.play (this.index) else this.skip ('next')</pre><p>Nu, wanneer de <code>lus</code> is ingeschakeld, wordt het huidige nummer herhaald. Als het uit is, gaat de speler verder met het volgende nummer.</p><h3>Voeg de Shuffle-knop toe</h3><p>Voeg het volgende toe na de herhaalknop:</p><pre><v-btn flat icon @click="toggleShuffle"> <v-icon color="light-blue" v-if="this.shuffle">schuifelen</v-icon> <v-icon color="blue-grey" v-else>schuifelen</v-icon> </v-btn></pre><p>Voeg de toe <code>shuffle: false</code> woning in <code>Player.vue</code>, bind het (<code>: Shuffle = "shuffle"</code>) en geef de prop door (<code>shuffle: Boolean</code>) in <code>PlayerControlsBars.vue</code>. </p><p>Laten we nu het maken <code>toggleShuffle ()</code> methode;</p><pre>toggleShuffle () this. $ emit ('toggleshuffle',! this.shuffle)</pre><p>Nu weer terug <strong>Player.vue</strong>, registreer de gebeurtenislistener (<code>@ Toggleshuffle = "toggleShuffle"</code>) en maak de <code>toggleShuffle ()</code> methode:</p><pre>toggleShuffle (waarde) this.shuffle = waarde</pre><p>Voeg nu het volgende toe aan de <code>overspringen()</code> methode na <code>index = 0</code>:</p><pre>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") ... </pre><p>Dit is hoe uw app er nu zou moeten uitzien:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_10.png"><h3>Voeg de zoekbalk toe</h3><p>Eerst in <strong>Player.vue</strong>, maak het <code>zoeken: 0</code> eigendom. Dan zullen we de <code>spelen</code> eigendom om de zoekactie bij te werken.</p><pre>bekijk: spelen (spelen) this.seek = this.currentTrack.howl.seek () laat updateSeek if (spelen) updateSeek = setInterval (() => this.seek = this.currentTrack.howl.seek () , 250) else clearInterval (updateSeek),</pre><p>Hiermee wordt de zoekwaarde vier keer per seconde bijgewerkt.</p><p>Maak nu een berekende <code>vooruitgang()</code>:</p><pre>progress () if (this.currentTrack.howl.duration () === 0) return 0 retourneer this.seek / this.currentTrack.howl.duration ()</pre><p>Bind het (<code>: Progress = "vooruitgang"</code>) in de sjabloon. </p><p>Nu in <strong>PlayerControlsBars.vue</strong>, geef de <code>vooruitgang</code> prop (<code>voortgang: nummer</code>) en voeg een andere werkbalk toe onder degene die we al hebben gemaakt:</p><pre><v-toolbar flat> <v-progress-linear v-model="trackProgress" @click="updateSeek($event)"></v-progress-linear> </v-toolbar></pre><p>Hier gebruiken we de Vuetify-voortgangscomponent.</p><p>Maak een berekend <code>trackProgress ()</code>, waarmee de voortgang van het nummer als een percentage wordt weergegeven.</p><pre>berekend: trackProgress () return this.progress * 100,</pre><p>En nu, maak de <code>updateSeek ()</code> methode: </p><pre>updateSeek (event) let el = document.querySelector (". progress-linear__bar"), mousePos = event.offsetX, elWidth = el.clientWidth, percents = (mousePos / elWidth) * 100 this. $ emit ('updateseek', procenten) </pre><p>Hier krijgen we het voortgangsbalkelement, dat de <code>.vooruitgang-linear__bar</code> klasse. Ik vond dit met de browser DevTools. Vervolgens krijgen we de muispositie en de breedte van de balk. Vervolgens krijgen we de muisklikpositie als een percentage.</p><p>Terug in <strong>Player.vue</strong>, toevoegen en registreren van de gebeurtenislistener (<code>@ Updateseek = "setSeek"</code>) en maak de <code>setSeek ()</code> methode:</p><pre>setSeek (procenten) let track = this.currentTrack.howl if (track.playing ()) track.seek ((track.duration () / 100) * procenten)</pre><p>En boem! U kunt uw muis gebruiken om de positie van de afgespeelde track te wijzigen.</p><h2>Bouw het infopaneelcomponent</h2><p>Maak het <strong>PlayerInfoPanel.vue</strong> bestand met de volgende inhoud:<br></p><pre><template> <v-card> <v-card-title> <h2>trackInfo.artist - trackInfo.title</h2> <v-spacer></v-spacer> <h3>trackInfo.seek | minuten / trackInfo.duration | notulen</h3> </v-card-title> </v-card> </template> <script> export default props: trackInfo: Object , </script></pre><p>Hier passeren we een prop <code>trackinfo</code>, die we gebruiken om de trackinformatie in onze component te vullen.</p><p>Nu weer terug <strong>Player.vue</strong>, importeer, registreer en voeg het component toe aan de sjabloon. </p><p>Maak vervolgens een berekende <code>getTrackInfo ()</code>: </p><pre>getTrackInfo () let artist = this.currentTrack.artist, title = this.currentTrack.title, seek = this.seek, duration = this.currentTrack.howl.duration () return artiest, titel, zoek, duur,</pre><p>Vervolgens binden we het in de sjabloon (<code>: Trackinfo = "getTrackInfo"</code>) en voila. We krijgen wat basisinformatie voor het momenteel afgespeelde nummer, zoals je kunt zien in de onderstaande schermafbeelding.</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_11.png"><h2>Bouw de component Search Bar</h2><p>Maak het <strong>PlayerSearchBar.vue</strong> bestand met de volgende inhoud: <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>We maken een tekstveld en voegen het toe <code>wisbare</code> steun om een verwijderingspictogram weer te geven wanneer we iets typen.</p><p>Door het gebruiken van <code>v-model</code>, we binden het aan de <code>searchstring</code>, wat in eerste instantie een lege string is. En we voegen een luisteraar voor invoergebeurtenissen toe.</p><p>We passeren ook de <code>afspeellijst</code> prop, die we gebruiken in de <code>searchPlaylist ()</code> methode. In deze methode gebruiken we de <code>tonen</code> eigendom en draai het <code>uit</code> voor elke track waar de titel of artiest niet overeenkomt met de zoekreeks, en we behouden deze of we draaien hem <code>op</code> voor alle wedstrijden. Ten slotte, als de zoekreeks leeg of gelijk is aan <code>nul</code>, wat gebeurt als we het veld leegmaken met de clear-knop, draaien we <code>op</code> de <code>tonen</code> voor alle nummers.</p><p>Nu weer terug <strong>Player.vue</strong>, importeer, registreer en voeg het component toe aan de sjabloon. </p><p>Bind de eigenschap afspeellijst (<code>: Playlist = "playlist"</code>) en controleer de functionaliteit. Hier is hoe het er in actie uit zou moeten zien:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_12.png"><h2>Enkele verbeteringsideeën</h2><p>Zoals u kunt zien, met een duidelijk doel en een goede planning, kan het bouwen van een Vue / Vuetify-app heel gemakkelijk en plezierig zijn. Je hebt nu een werkende muziekspeler die je kunt gebruiken tijdens je ontspanning of coderingstijd. Natuurlijk is er altijd ruimte voor verdere verbeteringen en toevoegingen, dus hier zijn enkele ideeën die u kunt uitproberen om de speler nog rijker te maken: </p><ul> <li>meerdere afspeellijstondersteuning</li> <li>mogelijkheid om nummers toe te voegen aan of te verwijderen uit de afspeellijst</li> <li>Drag-and-drop-ondersteuning</li> <li>mogelijkheid om de nummers te sorteren</li> <li>audio visualisatie </li> </ul><h2>Conclusie</h2><p>In deze zelfstudie hebben we gezien hoe gemakkelijk en plezierig het kan zijn om een app te bouwen met Vue.js en in het bijzonder met Vuetify.js. Ik hoop dat je het leuk vond om deze speler net zo te bouwen als ik. Ik zal blij zijn om je eigen verbeterde versie van de speler te zien. Dus als u er een maakt, kunt u een demokoppeling in de opmerkingen plaatsen!</p>
<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">Bouw een Neon 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">Bouw een muziek-app met een Android-app-sjabloon</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="/">nl.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Interessante informatie en nuttige tips over programmeren. Website ontwikkeling, webdesign en webontwikkeling. Photoshop-zelfstudies. Creatie van computerspellen en mobiele applicaties. Word een volledig professionele programmeur.
</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="Zoeken...">
<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
Wat je gaat creëren
Accentsconagua