Å bygge programmer med Vue.js er enkelt, morsomt og morsomt. Du kan bygge en fungerende app med minimal innsats. For å bevise at i dag vil jeg vise deg hvor lett det er å bygge din egen fullverdige musikkspiller. For å gjøre ting enda enklere, bruker vi Vuetify.js, et Vue.js-drevet brukergrensesnitt, som vil øke hastigheten på brukergrensesnittkonstruksjonen. Jeg kan nesten føle din utålmodighet, så la oss komme i gang.
Du kan finne full kildekoden i GitHub repo. Og her er den arbeidende demoen. For å følge denne opplæringen bør du være kjent med Vue-komponenter, Vue-enkeltfilkomponenter og ES2015-syntaks.
Planlegger App
Hver opprettelse starter med en idé og i det minste noen grunnleggende planlegging. Så først må vi bestemme hva vi vil bygge og hvilken funksjonalitet vi vil implementere. Det sies at et bilde er verdt tusen ord, så la oss starte med en enkel skiss av musikkspilleren.
Jeg laget denne wireframe slik at du kan få en generell oppfatning av brukergrensesnittet vi vil bygge. Det neste trinnet er å beskrive funksjonaliteten vi skal implementere.
Som john johnson sier:
Først løser du problemet. Skriv deretter koden.
Vi bruker det som en kilde til visdom, og vi planlegger appen før vi begynner å kode det.
Appkomponenter
Vue.js er en komponentbasert rammeverk. Så vi trenger først å dele appen i individuelle komponenter (fem i vårt tilfelle, som vist på skissen ovenfor), og å skissere funksjonene og funksjonaliteten for hver av dem.
Tittellinje
Denne komponenten vil inneholde følgende deler:
en meny på venstre side
navnet på appen i midten
tre statiske ikoner på høyre side
Info Panel
Denne komponenten vil vise grunnleggende informasjon om det spilt sporet:
sporets artist og tittel på venstre side
Nåværende sporets posisjon og varighet på høyre side
Kontrollstenger
Denne komponenten inneholder to barer, som inkluderer alle kontrollene som er nødvendige for å manipulere lydsporene i spillerens spilleliste.
en volumregulator med et ikon til venstre (utseendet endres i henhold til volumnivået og når lyden er dempet) og volumprosent til høyre
knapper for å spille, pause, stoppe og hoppe over sporene.
to knapper helt til høyre: en for å gjenta det gjeldende sporet, og en for å spole sporets rekkefølge
en søkefelt som viser det aktuelle sporet av posisjonen, med muligheten til å endre det med et museklikk på linjen
Playlist Panel
Denne komponenten vil inneholde sporets spilleliste med følgende funksjonalitet:
vis et spor med riktig antall, artist, tittel og varighet egenskaper
velg et spor med enkelt klikk
spill et spor med dobbeltklikk
Søkelinje
Denne komponenten vil tilby søkefunksjonalitet i tilfeller der vi ønsker å finne og spille bestemte spor (er).
Selvfølgelig kan oversikten ovenfor ikke dekke alle detaljer og nyanser, og dette er helt greit. For nå er det nok for oss å få et samlet bilde av sluttproduktet. Vi håndterer alle detaljer og eventuelle utfordringer under byggeprosessen.
Så la oss komme inn i den morsomme delen og skrive noen kode!
Starter
Vuetifys hurtige startside tilbyr mange muligheter for å komme i gang. Vi bruker en av de forhåndsdefinerte Vue CLI-malene, kalt Webpack Simple. Kjør følgende kommandoer i katalogen du vil bruke til dette prosjektet:
Deretter går du til appens katalog og installerer alle avhengigheter:
$ cd vue-musikkspiller $ npm installere
Vi bruker Howler.js (et JavaScript-lydbibliotek) til å håndtere lyddelene til musikkspilleren. Så vi må også inkludere det i prosjektet. Kjør følgende kommando:
$ npm installere - lagre howler
Og til slutt, kjøre appen:
$ npm kjøre dev
Appen vil åpne på localhost: 8080 i standard nettleseren din. Du bør se et enkelt Vuetify-appskjelett.
Tweaking the Template
For å tilpasse det til våre behov, må vi rydde opp malen og justere den litt. Gi nytt navn til App.vue fil til Player.vue, åpne den, slett alt inni, og legg til følgende i stedet:
Vi pakker inn vår musikkspiller-app i v-app komponent, som kreves for at appen skal fungere skikkelig. Vi passerer også mørk prop, for å bruke Vuetify mørkt tema.
Nå åpner du main.js fil, slett det opprinnelige innholdet, og legg til følgende:
importer Vue fra 'vue' import Vuetify fra 'vuetify' import 'vuetify / dist / vuetify.css' import Player fra './Player.vue' import Howl, Howler fra 'howler' Vue.use (Vuetify) new Vue (el: '#app', gjengi: h => h (spiller))
Åpne også index.html fil og endre innholdet i </code> tag til <em>Vue Music Player</em>.</p><p>Nå, i nettleseren din, bør du se en tom mørk side. Og voila. Du er klar til å begynne å lage.<br></p><p>Før du begynner kodingen, er det godt å vite at Vuetify tilbyr kodestykker og autofullføring for de store kodeditorene: VS-kode, Atom og Sublime. For å få utklippene, søk etter utvidelsen i favorittredigeren din (<code>vuetify-vscode</code>, eller <code>vuetify-atom</code>, eller <code>vuetify-sublime</code>).</p><h2>Bygg tittelbalkomponent</h2><p>I <strong>src</strong> katalog, opprett en ny <strong>komponenter</strong> mappe. Deretter, i den mappen, opprett <strong>PlayerTitleBar.vue</strong> fil med følgende innhold: <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>headset</v-icon> MENY </v-btn> <v-list> <v-list-tile @click="dialog = true"> <v-list-tile-title>Handle om</v-list-tile-title> </v-list-tile> <v-dialog v-model="dialog" max-width="300"> <v-card> <v-card-title><h2>Vue Music Player</h2></v-card-title> <v-card-text>Versjon 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>fjerne</v-icon> <v-icon>check_box_outline_blank</v-icon> <v-icon>Lukk</v-icon> </v-system-bar> </template> <script> export default data () return dialog: false , </script></pre><p>Her bruker vi følgende Vuetify-komponenter: verktøylinje, meny, knapp, ikon, liste, dialog og kort. </p><p>Vi skiller menyen, navnet og ikonene med <code><v-spacer></code> komponent. For å vise eller skjule dialogen, oppretter vi <code>dialog: falsk</code> dataegenskap. Verdien vil skifte når vi klikker på <em>Handle om</em> menyelement.<br></p><p>Nå, i <strong>Player.vue</strong> fil, importer inn tittellinjekomponenten, registrer den i komponentobjektet, og legg det til i malen.<br></p><pre><template> <v-app dark> <v-content> <v-container> <player-title-bar></player-title-bar> // ADD komponenten i malen </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>Sjekk nå resultatet i nettleseren din. Du bør se følgende:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_3.png"><p>Vi gjentar disse tre trinnene for de fire andre komponentene. Så når i de neste avsnittene jeg forteller deg å importere, registrere og legge til en komponent i malen, bør du følge samme fremgangsmåte som beskrevet her.</p><h2>Bygg spillelistekomponenten<br></h2><p>I rotkatalogen, opprett en ny <strong>spilleliste</strong> mappe og legg til lydfilene du vil spille. Filnavnene må skrives med understreker mellom ordene og a <strong>.mp3</strong> forlengelse på slutten, for eksempel, <strong>Remember_the_Way.mp3</strong>. Nå, lag en lydspor array inni <strong>Player.vue</strong>dataobjekt: <br></p><pre>spilleliste: [title: "Streets of Sant'Ivo", artist: "Ask Again", howl: null, display: true, title: "Remember the Way", artist: "Ask Again" skjerm: true, ...]</pre><p>Hvert spor har <code>tittel</code> og <code>kunstner</code> egenskaper, a <code>hyle</code> objektet er satt til <code>null</code>, og a <code>vise</code> eiendom satt til <code>ekte</code>. </p><p>De <code>vise</code> Egenskapen vil bli brukt når vi implementerer søkefunksjonen. Nå er det satt til <code>ekte</code> for alle spor, så alle er synlige.</p><p>Howler wraps en lydfil i en <code>hyle</code> gjenstand. Vi setter <code>hyle</code> til <code>null</code> fordi vi vil fylle den dynamisk ved etableringen av Vue-forekomsten. For å gjøre det bruker vi Vue <code>opprettet</code> livscykluskrok. </p><pre>opprettet: funksjon () this.playlist.forEach ((spor) => let file = track.title.replace (/ \ s / g, "_") track.howl = new Howl (src: ['. /playlist/$file.mp3 ']))</pre><p>Dette vil sette en ny <code>Hyle</code> objekt for hvert spor i spillelisten.</p><p>Nå lager du <strong>PlayerPlaylistPanel.vue</strong> komponent og legg til dette innvendig: </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>Først passerer vi staven <code>spilleliste</code> fra <strong>Player.vue</strong> fil. Neste, i malen, går vi gjennom hvert spor med <code>v-i</code> Direktivet og vise sporets indeks, etterfulgt av sporets artist og tittel, og lengden på sporet helt til høyre. Vi bruker også <code>v-vis</code> bundet til <code>vise</code> eiendom. Et spor vil kun være synlig hvis <code>vise</code> er <code>ekte</code>.</p><p>Nå, i <strong>Player.vue</strong> fil, importerer vi, registrerer og legger til spillelisten i malen. Da binder vi <code>spilleliste</code> prop til <code>spilleliste</code> dataegenskap slik: <code><player-playlist-panel :playlist="playlist"></player-playlist-panel></code>.</p><p>La oss sjekke resultatet i nettleseren:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_4.png"><p>Det er to problemer her. For det første er numrene på sporene ikke riktige, og for det andre er sporets varighet vist i millisekunder, men vi vil at det skal være på få minutter. Vi løser alle disse problemene ved å opprette et formateringsfilter. </p><p>I <strong>main.js</strong> fil, opprett en <code>tall</code> filter og a <code>minutter</code> filter, som vil være globalt tilgjengelig. Neste, i <strong>PlayerPlaylistPanel.vue</strong>, vi bruker dem slik: <code>index | tall</code> og <code>track.howl.duration () | minutter </code>.</p><p>Nå, hvis du sjekker appen, bør alt vises riktig. </p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_5.png"><h3>Lag spor som kan velges<br></h3><p>I <strong>Player.vue</strong> fil, legg til <code>selectedTrack: null</code> dataegenskap og bind den til spillelistekomponenten (<code>: SelectedTrack = "selectedTrack"</code>). Så passerer vi staven i <strong>PlayerPlaylistPanel.vue</strong> fil (<code>selectedTrack: Object</code>). </p><p>Vi legger også til en klikkhendelselytter til <code><v-list-tile-content @click="selectTrack(track)"></code> og opprett deretter <code>selectTrack ()</code> metode:</p><pre>metoder: selectTrack (spor) this. $ emit ('selecttrack', spor) </pre><p>Nå tilbake i <code>Player.vue</code>, Legg til <code>selecttrack</code> hendelse til spillelistekomponenten (<code>@ Selecttrack = "selectTrack"</code>) og opprett <code>selectTrack ()</code> metode:</p><pre>selectTrack (spor) this.selectedTrack = track</pre><p>Nå, hvis du går til spillelisten og klikker på et spor, blir det valgt. Vi kan ikke se det, men vi kan bevise det i Vue DevTools. I det følgende skjermbilde er det andre sporet valgt:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_6.png"><h4>Rad- og utvalgsstilering</h4><p>Det neste trinnet er å gjøre markeringen synlig. For å gjøre det, binder vi en klasse som vil fargelegge det valgte sporet i oransje og en annen klasse som vil gjøre enda rader mørkere for å gjøre sporene mer skillebare. Sett følgende etter <code>v-vis</code> direktiv:</p><pre>: class = "[valgt: spor === selectedTrack, even: index% 2 == 0]" </pre><p>Vi legger også til en annen klasse, som viser en rullefelt når listen blir for stor.</p><pre><v-card :class="playlist"></pre><p>Vi legger til de nødvendige klassene på slutten av filen. </p><pre><style scoped> .valgt bakgrunnsfarge: oransje! viktig; .even bakgrunnsfargen: # 505050 .spilleliste overflow: auto </style></pre><p>Og det er det. Nå er det valgte sporet uthevet i oransje.</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_7.png"><p>Vi legger til dobbeltklikk avspillingsfunksjonen på slutten av neste seksjon.</p><h2>Bygg spillerkontrollkomponenten<br></h2><p>La oss lage spillerkontrollene nå. Vi starter med play, pause og stoppe knapper. <br></p><h3>Legg til Play, Pause og Stop-knappene<br></h3><p>Opprett <strong>PlayerControlsBars.vue</strong> komponent og legg til dette innvendig: <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>Stoppe</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>Her bruker vi Vuetify-verktøylinjekomponenten.</p><p>Det er tre knapper med registrerte klikkhendelselyttere. La oss lage metodene for dem: </p><pre>metoder: playTrack (index) this. $ emit ('playtrack', indeks), pauseTrack () this. $ emit ('pausetrack'), stopTrack () this. $ emit ('stoptrack') </pre><p>Nå, i <strong>Player.vue</strong> fil, importer, registrer og legg til komponenten i malen. Deretter registrerer du hendelseslytterne (<code>@ Playtrack = "play"</code>, <code>@ Pausetrack = "pause"</code>, <code>@ Stoptrack = "stopp"</code>).</p><p>Deretter lager du <code>indeks: 0</code> dataegenskap, som vil holde indeksen for gjeldende spor. Deretter oppretter du en beregning <code>currentTrack ()</code>: </p><pre>beregnes: currentTrack () returner denne spillelisten [this.index]</pre><p>Og nå kan vi begynne å lage <code>spille</code>, <code>pause</code>, og <code>Stoppe</code> metoder. Vi starter med <code>spille()</code> metode, men før det må vi lage <code>spiller: false</code> dataegenskap, som vil indikere om sporet spiller eller ikke. Legg til følgende kode for <code>spille()</code> metode:</p><pre>play (index) la selectedTrackIndex = this.playlist.findIndex (spor => spor === this.selectedTrack) hvis (typeof index === 'tall') index = index annet hvis (this.selectedTrack) hvis (this.selectedTrack! = this.currentTrack) this.stop () index = selectedTrackIndex annet index = this.index lar track = this.playlist [index] .howl hvis (track.playing ()) annet track.play () this.selectedTrack = this.playlist [index] this.playing = true this.index = index</pre><p>Metoden tar en indeks som parameter, som spesifiserer sporet som skal spilles. Først får vi indeksen til det valgte sporet. Deretter foretar vi noen sjekker for å bestemme verdien av <code>index</code>. Hvis en indeks er gitt som et argument, og det er et tall, så bruker vi det. Hvis et spor er valgt, bruker vi indeksen til det valgte sporet. Hvis det valgte sporet er forskjellig fra det nåværende, bruker vi <code>Stoppe()</code> metode for å stoppe den nåværende. Til slutt, hvis ikke et indeksargument er bestått eller et spor er valgt, bruker vi verdien av <code>index</code> dataegenskap.</p><p>Deretter får vi hylen (basert på indeksverdien) for sporet og sjekker om den spiller. Hvis det er, returnerer vi ingenting; Hvis det ikke er det, spiller vi det. </p><p>Endelig oppdaterer vi <code>selectedTrack</code>, <code>spiller</code> og <code>index</code> data egenskaper.</p><p>La oss nå lage <code>pause()</code> og <code>Stoppe()</code> fremgangsmåter. </p><pre>pause () this.currentTrack.howl.pause () this.playing = false, stop () this.currentTrack.howl.stop () this.playing = false</pre><p>Her stopper vi eller stopper nåværende spor og oppdaterer <code>spiller</code> dataegenskap.</p><p>La oss også få et spor å begynne å spille på dobbeltklikk.</p><p>Legg til <code>@ DblClick = "playTrack ()"</code> til <code><v-list-tile-content></code> i <strong>PlayerPlaylistPanel.vue</strong> og opprett <code>playTrack ()</code> metode:</p><pre>playTrack (indeks) this. $ emit ('playtrack', indeks)</pre><p>Registrer lytteren <code>@ Playtrack = "play"</code> i <strong>Player.vue</strong> fil og voila.</p><h3>Legg til Forrige og Neste knapper</h3><p>La oss nå legge til forrige og neste knapp.<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>Opprett <code>skipTrack ()</code> metode:</p><pre>skipTrack (retning) this. $ emit ('skiptrack', retning)</pre><p>Registrer hendelseslytteren (<code>@ Skiptrack = "skip"</code>) i <strong>Player.vue</strong>.</p><p>Og skape <code>hopp ()</code> metode:</p><pre>hopp over (retning) let index = 0 hvis (retning === "neste") index = this.index + 1 if (index> = this.playlist.length) index = 0 annet indeks = dette. indeks - 1 hvis (indeks < 0) index = this.playlist.length - 1 this.skipTo(index) , skipTo (index) if (this.currentTrack) this.currentTrack.howl.stop() this.play(index) </pre><p>Vi kontrollerer først om retningen er <code>neste</code>. I så fall øker vi indeksen med 1. Og hvis indeksen blir større enn den siste indeksen i arrayet, starter vi igjen fra null. Når retningen er <code>prev</code>, vi reduserer indeksen med 1. Og hvis indeksen er mindre enn null, bruker vi den siste indeksen. På slutten bruker vi <code>index</code> som et argument for <code>skipTo ()</code> metode. Den stopper nåværende spor og spiller neste eller forrige.</p><p>Slik ser spilleren ut med knappene:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_8.png"><h3>Legg til glidebryteren<br></h3><p>Legg til følgende før alle knappene:<br></p><pre><v-slider v-model="volume" @input="updateVolume(volume)" max="1" step="0.1"></v-slider></pre><p>Her bruker vi Vuetify-skyvekomponenten.</p><p>Legg til <code>volum: 0,5</code> dataegenskap, og opprett deretter <code>updateVolume ()</code> metode:</p><pre>updateVolume (volum) Howler.volume (volum)</pre><p>Her bruker vi det globale Howler-objektet til å angi volumet globalt for alle grøfter.</p><p>Også, vi må synkronisere det innledende Howler-volumet, som som standard er satt til 1, til <code>volum</code> eiendom. Hvis du ikke gjør det, vil volumet vise 0,5, men vil først være 1. For å gjøre det, bruker vi <code>opprettet</code> krok igjen:</p><pre>opprettet: funksjon () Howler.volume (this.volume)</pre><p>Vi vil se volumnivået som en prosentdel til høyre for volumregulatoren, så vi legger til dette i malen: <code>this.volume * 100 + '%'</code> </p><h3>Legg til stemmeknappen </h3><p>Nå legger vi til et volumikon foran glidebryteren. <br></p><pre><v-btn flat icon @click="toggleMute"> <template v-if="!this.muted"> <v-icon v-if="this.volume >= 0,5 "> volum opp</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>Ikonet vil endres i henhold til verdiene til <code>volum</code> og <code>dempet</code> eiendommer.</p><p>Legg til <code>dempet: falsk</code> dataegenskap og opprett <code>toggleMute ()</code> metode:</p><pre>toggleMute () Howler.mute (! this.muted) this.muted =! this.muted</pre><p>Vi bruker det globale Howler-objektet igjen for å stille dempet globalt, og vi bytter deretter <code>dempet</code> verdi. </p><p>I skjermbildet nedenfor kan du se hvordan volumkontrollen skal se ut:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_9.png"><h3>Legg til gjenta knappen</h3><p>Legg til følgende etter alle knappene:</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>Legg til <code>loop: false</code> eiendom i <strong>Player.vue</strong>, bind den <code>: Sløyfe = "sløyfe"</code> og pass prop (<code>sløyfe: boolsk</code>) i <strong>PlayerControlsBars.vue</strong>. </p><p>La oss nå lage <code>toggleLoop ()</code> metode:</p><pre>toggleLoop () this. $ emit ('toggleloop',! this.loop)</pre><p>Nå tilbake i <strong>Player.vue</strong>, registrer hendelseslytteren (<code>@ Toggleloop = "toggleLoop"</code>) og opprett <code>toggleLoop ()</code> metode:</p><pre>toggleLoop (verdi) this.loop = value</pre><p>På dette punktet står vi overfor et lite problem. Når et spor søker slutten, stopper det bare. Spilleren beveger seg ikke til neste spor, og gjentar ikke gjeldende spor. For å fikse det, må vi legge til følgende i <code>opprettet</code> fungere etter <code>src</code> eiendom:</p><pre>onend: () => if (this.loop) this.play (this.index) else this.skip ('next')</pre><p>Nå, når <code>sløyfe</code> er på, gjentas gjeldende spor. Hvis den er av, går spilleren videre på neste spor.</p><h3>Legg til Shuffle-knappen</h3><p>Legg til følgende etter gjenta-knappen:</p><pre><v-btn flat icon @click="toggleShuffle"> <v-icon color="light-blue" v-if="this.shuffle">tilfeldig rekkefølge</v-icon> <v-icon color="blue-grey" v-else>tilfeldig rekkefølge</v-icon> </v-btn></pre><p>Legg til <code>shuffle: false</code> eiendom i <code>Player.vue</code>, bind den (<code>: Shuffle = "shuffle"</code>), og pass prop (<code>shuffle: boolsk</code>) i <code>PlayerControlsBars.vue</code>. </p><p>La oss nå lage <code>toggleShuffle ()</code> metode;</p><pre>toggleShuffle () this. $ emit ('toggleshuffle',! this.shuffle)</pre><p>Nå tilbake i <strong>Player.vue</strong>, registrer hendelseslytteren (<code>@ Toggleshuffle = "toggleShuffle"</code>) og opprett <code>toggleShuffle ()</code> metode:</p><pre>toggleShuffle (verdi) this.shuffle = value</pre><p>Legg nå følgende til <code>hopp ()</code> metode etter <code>indeks = 0</code>:</p><pre>lastIndex = this.playlist.length - 1 if (this.shuffle) index = Math.round (Math.random () * lastIndex) mens (index === this.index) index = Math.round (Math.random () * lastIndex) annet hvis (retning === "neste") ... </pre><p>Slik ser appen din nå:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_10.png"><h3>Legg til søkefeltet</h3><p>Først i <strong>Player.vue</strong>, opprett <code>søk: 0</code> eiendom. Da må vi se på <code>spiller</code> eiendom for å oppdatere søket.</p><pre>se på (spill) (this) , 250) annet clearInterval (updateSeek),</pre><p>Dette vil oppdatere søkeverdien fire ganger per sekund.</p><p>Opprett nå en beregning <code>framgang()</code>:</p><pre>fremgang () hvis (denne.strømTrack.howl.duration () === 0) return 0 return denne.seek / this.currentTrack.howl.duration ()</pre><p>Bind det (<code>: Progress = "fremskritt"</code>) i malen. </p><p>Nå i <strong>PlayerControlsBars.vue</strong>, Send meg <code>framgang</code> rekvisitt (<code>fremdrift: nummer</code>) og legg til et annet verktøylinje under det vi allerede har opprettet:</p><pre><v-toolbar flat> <v-progress-linear v-model="trackProgress" @click="updateSeek($event)"></v-progress-linear> </v-toolbar></pre><p>Her bruker vi Vuetify-fremgangskomponenten.</p><p>Opprett en beregning <code>trackProgress ()</code>, som vil få sporets fremgang som en prosentandel.</p><pre>beregnet: trackProgress () return this.progress * 100,</pre><p>Og nå, opprett <code>updateSeek ()</code> metode: </p><pre>updateSeek (event) let el = document.querySelector ("progress-linear__bar"), mousePos = event.offsetX, elWidth = el.clientWidth, prosent = (mousePos / elWidth) * 100 dette. $ emit ('updateseek' percents) </pre><p>Her får vi fremdriftslinjen elementet, som bruker <code>.fremgang-linear__bar</code> klasse. Jeg fant dette med nettleser DevTools. Deretter får vi museposisjonen og bredden på linjen. Da får vi museklikkposisjonen som en prosentandel.</p><p>Tilbake i <strong>Player.vue</strong>, legg til og registrer hendelseslytteren (<code>@ Updateseek = "setSeek"</code>) og opprett <code>setSeek ()</code> metode:</p><pre>setSeek (percents) let track = this.currentTrack.howl hvis (track.playing ()) track.seek ((track.duration () / 100) * prosent)</pre><p>Og boom! Du kan bruke musen til å endre posisjonen til det spilt sporet.</p><h2>Bygg Info Panel-komponenten</h2><p>Opprett <strong>PlayerInfoPanel.vue</strong> fil med følgende innhold:<br></p><pre><template> <v-card> <v-card-title> <h2>trackInfo.artist - trackInfo.title</h2> <v-spacer></v-spacer> <h3>trackInfo.seek | minutter / trackInfo.duration | minutter</h3> </v-card-title> </v-card> </template> <script> export default props: trackInfo: Object , </script></pre><p>Her passerer vi en prop <code>trackInfo</code>, som vi bruker til å fylle sporinformasjonen i komponenten vår.</p><p>Nå tilbake i <strong>Player.vue</strong>, importer, registrer og legg til komponenten i malen. </p><p>Deretter oppretter du en beregning <code>getTrackInfo ()</code>: </p><pre>getTrackInfo () la artist = this.currentTrack.artist, title = this.currentTrack.title, seek = this.seek, duration = this.currentTrack.howl.duration () retur artist, tittel, søk, varighet</pre><p>Deretter bindes det i malen (<code>: TrackInfo = "getTrackInfo"</code>) og voila. Vi får litt grunnleggende info for det spilt sporet, som du kan se på skjermbildet nedenfor.</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_11.png"><h2>Bygg søkebrakomponent</h2><p>Opprett <strong>PlayerSearchBar.vue</strong> fil med følgende innhold: <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>Vi lager et tekstfelt og legger til <code>fjernbar</code> prop for å vise et clearing-ikon når vi skriver noe.</p><p>Ved bruk av <code>v-modellen</code>, vi binder den til <code>search</code>, som er en tom streng først. Og vi legger til en inngangshendelse lytter.</p><p>Vi passerer også <code>spilleliste</code> prop, som vi bruker i <code>searchPlaylist ()</code> metode. I denne metoden bruker vi <code>vise</code> eiendom og slå den <code>av</code> for hvert spor hvor tittelen eller artisten ikke samsvarer med søkestrengen, og vi beholder den eller snu den <code>på</code> for alle kamper. Endelig, hvis søkestrengen er tom eller lik <code>null</code>, Hva skjer når vi fjerner feltet med den klare knappen, vi svinger <code>på</code> de <code>vise</code> for alle sporene.</p><p>Nå tilbake i <strong>Player.vue</strong>, importer, registrer og legg til komponenten i malen. </p><p>Bind inn spillelisten (<code>: Spille = "spilleliste"</code>) og sjekk funksjonaliteten. Slik ser det ut i handling:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_12.png"><h2>Noen forbedringsideer</h2><p>Som du kan se, med et klart mål og riktig planlegging, kan det være veldig enkelt og morsomt å bygge en Vue / Vuetify-app. Du har nå en arbeidsmusikkspiller som du kan bruke under avslapnings- eller kodetiden. Selvfølgelig er det alltid plass til videre forbedringer og tillegg, så her er noen ideer du kan prøve å gjøre spilleren enda mer funksjonsrik: </p><ul> <li>flere spillelister</li> <li>mulighet til å legge til eller fjerne spor fra spillelisten</li> <li>dra-og-slipp-støtte</li> <li>evne til å sortere sporene</li> <li>lydvisualisering </li> </ul><h2>Konklusjon</h2><p>I denne opplæringen så vi hvor lett og morsomt det kan være å bygge en app med Vue.js, og spesielt Vuetify.js. Jeg håper du likte å bygge denne spilleren så mye som jeg gjorde. Jeg vil gjerne se din egen forbedrede versjon av spilleren. Så hvis du lager en, bare slipp en demo link i kommentarene!</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">Kode</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">Bygg en 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">Bygg en musikkapp med en Android App-mal</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="/">no.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Interessant informasjon og nyttige tips om programmering. Nettstedutvikling, webdesign og webutvikling. Photoshop opplæringsprogrammer. Opprettelse av dataspill og mobile applikasjoner. Bli en profesjonell programmerer fra grunnen av.
</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="Søke...">
<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
Hva du skal skape
Accentsconagua