Construirea de aplicații cu Vue.js este ușoară, distractivă și plăcută. Puteți crea o aplicație de lucru cu un efort minim. Pentru a dovedi asta, astăzi vă voi arăta cât de ușor este să vă construiți propriul player de muzică full-featured. Pentru a face lucrurile mai ușoare, vom folosi Vuetify.js, o bibliotecă UI powered by Vue.js, ceea ce va grăbi construcția UI. Aproape că vă simt nerăbdarea, așa că să începem.
Puteți găsi codul sursă complet în repo GitHub. Și aici este demo-ul de lucru. Pentru a urma acest tutorial, ar trebui să fiți familiarizați cu componentele Vue, componentele fișierului single Vue și sintaxa ES2015.
Planificarea aplicației
Fiecare creație începe cu o idee și cel puțin o planificare de bază. Deci, mai întâi trebuie să decidem ce vrem să construim și ce funcționalitate vrem să implementăm. Se spune că o imagine este în valoare de o mie de cuvinte, așa că să începem cu o schiță simplă a music playerului.
Am făcut acest cadru pentru a obține o noțiune generală despre interfața utilizator pe care dorim să o construim. Următorul pas este să descriem funcționalitatea pe care intenționăm să o implementăm.
După cum spune John Johnson:
În primul rând, rezolvați problema. Apoi scrieți codul.
O vom folosi ca pe o sursă de înțelepciune și vom planifica aplicația înainte de a începe să o codificăm.
Componentele aplicației
Vue.js este un cadru bazat pe componente. Așadar, mai întâi trebuie să împărțim aplicația în componente individuale (cinci în cazul nostru, așa cum se arată în schița de mai sus) și să contureze caracteristicile și funcționalitatea fiecăruia.
Bara de titlu
Această componentă va conține următoarele părți:
un meniu din partea stângă
numele aplicației din centru
trei pictograme statice pe partea dreaptă
Panoul de informații
Această componentă va afișa informații de bază despre piesa redată curent:
artistul și titlul piesei pe partea stângă
poziția și durata piesei curente pe partea dreaptă
Bare de control
Această componentă va conține două bare, care vor include toate comenzile necesare pentru manipularea pieselor audio din lista de redare a playerului.
un cursor de volum cu o pictogramă în stânga (aspectul său se va schimba în funcție de nivelul volumului și atunci când sunetul este oprit) și procentul volumului din dreapta
butoane pentru redare, întrerupere, oprire și sărind peste piste.
două butoane de pe extrema dreaptă: una pentru repetarea piesei curente și una pentru amestecarea ordinii de redare a pieselor
o bară de căutare care arată poziția curentă a piesei, cu posibilitatea de ao schimba cu un click de mouse pe bara
Playlist Panel
Această componentă va conține lista de redare a melodiilor cu următoarele funcționalități:
afișați o piesă cu proprietățile corespunzătoare, numărul artistului, titlul și durata
selectați o piesă cu un singur clic
redați o melodie cu dublu clic
Bara de căutare
Această componentă va oferi funcționalitate de căutare în cazurile în care vrem să găsim și să jucăm anumite piese.
Desigur, conturul de mai sus nu poate acoperi toate detaliile și nuanțele, iar acest lucru este perfect. Deocamdată, este suficient să obținem o imagine globală a produsului final. Vom rezolva toate detaliile și eventualele provocări în timpul procesului de construcție.
Deci, hai să intrăm în partea distractivă și să scriem un cod!
Noțiuni de bază
Pagina de pornire rapidă a lui Vuetify oferă o mulțime de opțiuni pentru a începe. Vom utiliza unul dintre șabloanele Vue CLI pre-fabricate numite Webpack Simple. Rulați următoarele comenzi în directorul pe care doriți să îl utilizați pentru acest proiect:
Apoi, mergeți la directorul aplicației și instalați toate dependențele:
$ cd music player $ npm install
Vom folosi Howler.js (o bibliotecă audio JavaScript) pentru a gestiona părțile audio ale playerului muzical. Deci, trebuie să-l includem și în proiect. Rulați următoarea comandă:
$ npm install - salvează
În sfârșit, rulați aplicația:
$ npm run dev
Aplicația se va deschide localhost: 8080 în browserul dvs. implicit. Ar trebui să vedeți un simplu schelet de aplicații Vuetify.
Optimizați modelul
Pentru ao adapta la nevoile noastre, trebuie să curățăm șablonul și să-l optimizăm puțin. Redenumiți App.vue fișier la Player.vue, deschideți-l, ștergeți totul în interior și adăugați în schimb următoarele:
Am înfășurat aplicația noastră de muzică în v-app care este necesar pentru ca aplicația să funcționeze corect. De asemenea, treceți întuneric prop, pentru a aplica tema Vuetify întunecată.
Acum, deschideți main.js fișier, ștergeți conținutul original și adăugați următoarele:
import Vue de la importul "vue" Vuetify de la "vuetify" importați importul "vuetify / dist / vuetify.css" importați din importul "./Player.vue" howl, howler Vue.use (Vuetify) (el: '#app', render: h => h (Player))
De asemenea, deschideți index.html fișier și modificați conținutul </code> eticheta la <em>Vue Music Player</em>.</p><p>Acum, în browser-ul dvs., ar trebui să vedeți o pagină neagră goală. Și voila. Sunteți gata să începeți să creați.<br></p><p>Înainte de a începe codarea, este bine de știut că Vuetify oferă fragmente de cod și autocompleție pentru editorii majori de cod: VS Code, Atom și Sublime. Pentru a obține fragmentele, căutați extensia în editorul dvs. preferat (<code>vuetify-vscode</code>, sau <code>vuetify-atom</code>, sau <code>vuetify-sublimă</code>).</p><h2>Construiți componenta barei de titlu</h2><p>În <strong>src</strong> director, creați un nou <strong>componente</strong> pliant. Apoi, în acel dosar, creați <strong>PlayerTitleBar.vue</strong> fișier cu următorul conținut: <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>căști</v-icon> MENIUL </v-btn> <v-list> <v-list-tile @click="dialog = true"> <v-list-tile-title>Despre</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>Versiunea 1.0.0</v-card-text> <v-card-actions> <v-spacer></v-spacer> <v-btn flat @click="dialog = false">O.K</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>elimina</v-icon> <v-icon>check_box_outline_blank</v-icon> <v-icon>închide</v-icon> </v-system-bar> </template> <script> export default data () return dialog: false , </script></pre><p>Aici folosim următoarele componente Vuetify: bara de instrumente, meniu, buton, pictogramă, listă, dialog și card. </p><p>Detinem meniul, numele și pictogramele cu <code><v-spacer></code> componentă. Pentru a afișa sau a ascunde dialogul, creăm <code>dialog: fals</code> proprietatea datelor. Valoarea sa se va schimba atunci când faceți clic pe <em>Despre</em> articol din meniu.<br></p><p>Acum, în <strong>Player.vue</strong> fișier, importați componenta barei de titlu, înregistrați-o în obiectul componente și adăugați-o în șablon.<br></p><pre><template> <v-app dark> <v-content> <v-container> <player-title-bar></player-title-bar> // Adăugați componenta în șablon </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>Acum, verificați rezultatul în browser. Ar trebui să vedeți următoarele:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_3.png"><p>Vom repeta acești trei pași pentru celelalte patru componente. Deci, atunci când în secțiunile următoare vă spun să importați, să înregistrați și să adăugați o componentă în șablon, trebuie să urmați aceeași procedură descrisă aici.</p><h2>Construiți componenta Playlist<br></h2><p>În directorul rădăcină, creați un nou <strong>lista de redare</strong> și adăugați fișierele audio pe care doriți să le redați. Numele de fișiere trebuie să fie scrise cu subliniere între cuvintele și a <strong>.mp3</strong> extindere la sfârșitul anului - de exemplu, <strong>Remember_the_Way.mp3</strong>. Acum, creați o matrice de piese audio înăuntru <strong>Player.vue</strong>'s obiect de date: <br></p><pre>playlist: [title: "Streets of Sant'Ivo", artist: "Întrebați", urla: null, display: true, title: "Remember the Way" afișare: true, ...]</pre><p>Fiecare piesă are <code>titlu</code> și <code>artist</code> proprietăți, a <code>urla</code> obiect setat la <code>nul</code>, și a <code>afişa</code> proprietate setat la <code>Adevărat</code>. </p><p> <code>afişa</code> proprietatea va fi utilizată atunci când implementăm funcția de căutare. Acum este setat la <code>Adevărat</code> pentru toate piesele, astfel încât toate acestea sunt vizibile.</p><p>Howler împachetează un fișier audio într - un <code>urla</code> obiect. Noi am stabilit <code>urla</code> la <code>nul</code> deoarece o vom populiza dinamic la crearea instanței Vue. Pentru a face asta, folosim Vue <code>creată</code> Cârlig de viață. </p><pre>creat: functie () this.playlist.forEach ((piesa) => let file = track.title.replace (/ \ s / g, "_") track.howl = new Howl (src: ['. /playlist/$file.mp3 ']))</pre><p>Acest lucru va crea un nou <code>Urla</code> obiect pentru fiecare piesă din lista de redare.</p><p>Acum, creați <strong>PlayerPlaylistPanel.vue</strong> și adăugați acest lucru în interior: </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>În primul rând, noi trecem pe proiecție <code>lista de redare</code> de la <strong>Player.vue</strong> fişier. Apoi, în șablon, vom trece prin fiecare piesă cu <code>v-pentru</code> directivă și afișați indicele piesei, urmat de artistul și titlul piesei, precum și durata piesei de pe extrema dreaptă. De asemenea, folosim <code>v-show</code> obligat la <code>afişa</code> proprietate. O piesă va fi vizibilă numai dacă <code>afişa</code> este <code>Adevărat</code>.</p><p>Acum, în <strong>Player.vue</strong> fișier, vom importa, înregistra și adăuga componenta playlistului în șablon. Apoi, le legăm <code>lista de redare</code> propunere la <code>lista de redare</code> astfel de date: <code><player-playlist-panel :playlist="playlist"></player-playlist-panel></code>.</p><p>Să verificăm rezultatul în browser:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_4.png"><p>Există două probleme aici. În primul rând, numărul pieselor nu este corect și, în al doilea rând, durata piesei este afișată în milisecunde, dar vrem să fie în câteva minute. Vom remedia fiecare dintre aceste probleme creând un filtru de formatare. </p><p>În <strong>main.js</strong> fișier, creați un <code>numerele</code> filtru și a <code>minute</code> filtru, care va fi accesibil la nivel global. În continuare, în <strong>PlayerPlaylistPanel.vue</strong>, le folosim astfel: <code>index | numere</code> și <code>track.howl.duration () | minute</code>.</p><p>Acum, dacă verificați aplicația, totul ar trebui să fie afișat corect. </p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_5.png"><h3>Efectuați selectarea traseelor<br></h3><p>În <strong>Player.vue</strong> fișier, adăugați <code>selectatTrack: null</code> și să o legați de componenta playlistului (<code>: SelectedTrack = "selectedTrack"</code>). Apoi, trecem proiecția în <strong>PlayerPlaylistPanel.vue</strong> fișier (<code>selectatTrack: Obiect</code>). </p><p>Adăugăm, de asemenea, un ascultător al evenimentului de clic <code><v-list-tile-content @click="selectTrack(track)"></code> și apoi creați <code>selectTrack ()</code> metodă:</p><pre>metode: selectTrack (track) this. $ emit ('selecttrack', track) </pre><p>Acum, înapoi <code>Player.vue</code>, adaugă <code>selecttrack</code> la componenta playlist (<code>@ Selecttrack = "selectTrack"</code>) și creați <code>selectTrack ()</code> metodă:</p><pre>selectTrack (melodie) this.selectedTrack = melodie</pre><p>Acum, dacă accesați playlistul și faceți clic pe o piesă, acesta va fi selectat. Nu o putem vedea, dar o putem dovedi în Vue DevTools. În următorul ecran, este selectată cea de-a doua piesă:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_6.png"><h4>Rând și stil de selecție</h4><p>Următorul pas este să faceți vizibilitatea selecției. Pentru a face acest lucru, vom lega o clasă care va colora pista selectată cu portocaliu și o altă clasă, care va face ca rândurile să fie mai întunecate pentru a face piesele mai distincte. Puneți următoarele după <code>v-show</code> directivă:</p><pre>: class = "[select: track === selectTrack, even: index% 2 == 0]" </pre><p>De asemenea, vom adăuga o altă clasă, care va afișa o bară de derulare atunci când lista devine prea mare.</p><pre><v-card :class="playlist"></pre><p>Adăugăm clasele necesare la sfârșitul fișierului. </p><pre><style scoped> .selectate background-color: orange! important; chiar și background-color: # 505050 .playlist overflow: auto </style></pre><p>Si asta e. Acum piesa selectată este evidențiată cu portocaliu.</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_7.png"><p>Vom adăuga funcția de redare cu dublu clic la sfârșitul secțiunii următoare.</p><h2>Construiți componenta Controale Player<br></h2><p>Să creăm acum controalele playerului. Vom începe cu butoanele de redare, pauză și oprire. <br></p><h3>Adăugați butoanele Redare, Pauză și Stop<br></h3><p>Creați <strong>PlayerControlsBars.vue</strong> și adăugați acest lucru în interior: <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>Stop</v-icon> </v-btn> <v-btn outline fab color="light-blue" @click="playTrack()"> <v-icon large>play_arrow</v-icon> </v-btn> <v-btn outline fab small color="light-blue" @click="pauseTrack"> <v-icon>pauză</v-icon> </v-btn> <v-spacer></v-spacer> </v-toolbar> </div> </template></pre><p>Aici, vom folosi componenta bara de instrumente Vuetify.</p><p>Există trei butoane cu ascultători de evenimente înregistrate pentru clicuri. Să creați metodele pentru ele: </p><pre>metode: playTrack (index) acest $ emit ('playtrack', index), pauseTrack () this. $ emit ('pausetrack') stopTrack </pre><p>Acum, în <strong>Player.vue</strong> fișier, importați, înregistrați și adăugați componenta în șablon. Apoi, înregistrați ascultătorii evenimentului (<code>@ Playtrack = "play"</code>, <code>@ Pausetrack = "pauză"</code>, <code>@ Stoptrack = "stop"</code>).</p><p>Apoi, creați <code>index: 0</code> proprietate de date, care va păstra indicele piesei curente. Apoi, creați un calculat <code>currentTrack ()</code>: </p><pre>calculat: currentTrack () return this.playlist [this.index]</pre><p>Și acum putem începe să creăm <code>Joaca</code>, <code>pauză</code>, și <code>Stop</code> metode. Vom începe cu <code>Joaca()</code> dar înainte de aceasta avem nevoie să creăm <code>joc: fals</code> proprietate de date, care va indica dacă piesa se joacă sau nu. Adăugați următorul cod pentru <code>Joaca()</code> metodă:</p><pre>play (index) lăsați selectTrackIndex = this.playlist.findIndex (track => track === this.selectedTrack) dacă (typeof index === 'number') index = index altceva dacă (this.selectedTrack) (this.selectedTrack! = this.currentTrack) this.stop () index = selectedTrackIndex altceva index = this.index permite track = this.playlist [index] .howl if (track.playing () altceva track.play () this.selectedTrack = this.playlist [index] this.playing = true this.index = index</pre><p>Metoda ia un index ca parametru, care specifică piesa care urmează să fie redată. Mai întâi, obținem indicele piesei selectate. Apoi, facem unele verificări pentru a determina valoarea lui <code>index</code>. Dacă un index este furnizat ca argument și este un număr, atunci îl folosim. Dacă este selectată o pistă, folosim indexul piesei selectate. Dacă piesa selectată este diferită de cea curentă, folosim <code>Stop()</code> metoda de oprire a celei curente. În cele din urmă, dacă nu este trecut nici un argument index și nici o piesă nu este selectată, vom folosi valoarea lui <code>index</code> proprietatea datelor.</p><p>Apoi, obținem urla (pe baza valorii indexului) pentru piesă și verificăm dacă se redă. Dacă este, nu vom întoarce nimic; dacă nu este, ne jucăm. </p><p>În cele din urmă, actualizăm <code>selectedTrack</code>, <code>joc</code> și <code>index</code> proprietăți de date.</p><p>Să creați acum <code>pauză()</code> și <code>Stop()</code> metode. </p><pre>pauză () this.currentTrack.howl.pause () this.playing = false, stop () this.currentTrack.howl.stop () this.playing = false</pre><p>Aici, vom întrerupe sau opri piesa curentă și vom actualiza <code>joc</code> proprietatea datelor.</p><p>Să facem, de asemenea, o pistă începe să joace cu dublu clic.</p><p>Adăuga <code>@ Dblclick = "playTrack ()"</code> la <code><v-list-tile-content></code> în <strong>PlayerPlaylistPanel.vue</strong> și creați <code>playTrack ()</code> metodă:</p><pre>playTrack (index) this. $ emit ('playtrack', index)</pre><p>Înregistrați ascultătorul <code>@ Playtrack = "play"</code> în <strong>Player.vue</strong> fișier și voila.</p><h3>Adăugați butoanele Anterior și Următor</h3><p>Să adăugăm acum butoanele anterioare și următoare.<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>Creați <code>skipTrack ()</code> metodă:</p><pre>skipTrack (direcția) this. $ emit ('skiptrack', direcție)</pre><p>Înregistrați ascultătorul evenimentului (<code>@ Skiptrack = "skip"</code>) în <strong>Player.vue</strong>.</p><p>Și creați <code>ocolire()</code> metodă:</p><pre>(index => this.playlist.length) index = 0 altceva index = acest lucru. index - 1 dacă (index < 0) index = this.playlist.length - 1 this.skipTo(index) , skipTo (index) if (this.currentTrack) this.currentTrack.howl.stop() this.play(index) </pre><p>Mai întâi verificăm dacă direcția este <code>Următor →</code>. Dacă da, vom crește indicele cu 1. Și dacă indicele devine mai mare decât ultimul indice din matrice, atunci vom începe din nou de la zero. Când direcția este <code>prev</code>, noi decrementăm indicele cu 1. Și dacă indicele este mai mic decât zero, vom folosi ultimul indice. În final, folosim <code>index</code> ca argument pentru <code>sari la()</code> metodă. Oprește piesa curentă și redă următoarea sau cea anterioară.</p><p>Iată cum arată playerul cu butoanele:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_8.png"><h3>Adăugați cursorul de volum<br></h3><p>Adăugați următoarele înaintea tuturor butoanelor:<br></p><pre><v-slider v-model="volume" @input="updateVolume(volume)" max="1" step="0.1"></v-slider></pre><p>Aici folosim componenta glisantă Vuetify.</p><p>Adaugă <code>volum: 0,5</code> data proprietate, și apoi creați <code>updateVolume ()</code> metodă:</p><pre>updateVolume (volum) Capacitate volum (volum)</pre><p>Aici, utilizăm obiectul global Howler pentru a seta volumul la nivel global pentru toate urletele.</p><p>De asemenea, trebuie să sincronizăm volumul inițial Howler, care în mod prestabilit este setat la 1, la <code>volum</code> proprietate. Dacă nu o faceți, volumul va afișa 0,5, dar va fi inițial 1. Pentru a face asta, vom folosi <code>creată</code> cârlig din nou:</p><pre>creat: function () Howler.volume (this.volume)</pre><p>Vrem să vedem nivelul volumului ca procent din partea dreaptă a cursorului de volum, deci adăugăm acest lucru în șablon: <code>acest volum * 100 + '%'</code> </p><h3>Adăugați butonul Mute </h3><p>Acum, adăugăm o pictogramă de volum înaintea glisorului. <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>Pictograma se va schimba în funcție de valorile <code>volum</code> și <code>dezactivat</code> proprietăţi.</p><p>Adaugă <code>dezactivat: fals</code> datele de proprietate și de a crea <code>toggleMute ()</code> metodă:</p><pre>toggleMute () Howler.mute (! this.muted) this.muted =! this.muted</pre><p>Utilizăm din nou obiectul global Howler pentru a seta mutele la nivel global, apoi vom comuta <code>dezactivat</code> valoare. </p><p>În captura de ecran de mai jos, puteți vedea cum ar trebui să arate glisorul de volum:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_9.png"><h3>Adăugați butonul Repetare</h3><p>Adăugați următoarele după toate butoanele:</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>Adaugă <code>buclă: falsă</code> în proprietate <strong>Player.vue</strong>, obligați-l <code>: Loop = "loop"</code> și treceți propulsa (<code>buclă: Booleană</code>) în <strong>PlayerControlsBars.vue</strong>. </p><p>Acum, să creăm <code>toggleLoop ()</code> metodă:</p><pre>toggleLoop () acest. $ emit ('toggleloop',! this.loop)</pre><p>Acum, înapoi <strong>Player.vue</strong>, înregistrați ascultătorul evenimentului (<code>@ Toggleloop = "toggleLoop"</code>) și creați <code>toggleLoop ()</code> metodă:</p><pre>toggleLoop (valoare) this.loop = valoare</pre><p>În acest moment, ne confruntăm cu o mică problemă. Când o piesă urmărește sfârșitul, ea se oprește. Playerul nu se mișcă la piesa următoare și nici nu repetă melodia curentă. Pentru a rezolva acest lucru, trebuie să adăugăm următoarele <code>creată</code> funcție după <code>src</code> proprietate:</p><pre>onend: () => if (this.loop) this.play (this.index) altceva this.skip ('next')</pre><p>Acum, când <code>buclă</code> este activată, piesa curentă va fi repetată. Dacă este oprit, jucătorul se va muta pe următoarea pistă.</p><h3>Adăugați butonul Shuffle</h3><p>Adăugați următoarele după butonul de repetare:</p><pre><v-btn flat icon @click="toggleShuffle"> <v-icon color="light-blue" v-if="this.shuffle">amesteca</v-icon> <v-icon color="blue-grey" v-else>amesteca</v-icon> </v-btn></pre><p>Adaugă <code>shuffle: false</code> în proprietate <code>Player.vue</code>, lega-l (<code>: Shuffle = "shuffle"</code>), și treceți propulsa (<code>shuffle: Boolean</code>) în <code>PlayerControlsBars.vue</code>. </p><p>Acum, să creăm <code>toggleShuffle ()</code> metodă;</p><pre>toggleShuffle () this. $ emit ('toggleshuffle',! this.shuffle)</pre><p>Acum, înapoi <strong>Player.vue</strong>, înregistrați ascultătorul evenimentului (<code>@ Toggleshuffle = "toggleShuffle"</code>) și creați <code>toggleShuffle ()</code> metodă:</p><pre>toggleShuffle (valoare) this.shuffle = valoare</pre><p>Acum, adăugați următoarele la <code>ocolire()</code> dupa metoda <code>index = 0</code>:</p><pre>lastIndex = this.playlist.length - 1 dacă (this.shuffle) index = Math.round (Math.random () * lastIndex) în timp ce (index === this.index) index = Math.round (Math.random () * lastIndex) altfel dacă (direcția === "următorul") ... </pre><p>Iată cum arată acum aplicația dvs.:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_10.png"><h3>Adăugați bara de căutare</h3><p>Primul in <strong>Player.vue</strong>, creați <code>caută: 0</code> proprietate. Atunci vom avea nevoie să urmărim <code>joc</code> proprietate în scopul de a actualiza căuta.</p><pre>ceas: play (joc) this.seek = this.currentTrack.howl.seek () lasă updateSeek dacă (joc) updateSeek = setInterval (() => this.seek = this.currentTrack.howl.seek , 250) altceva clearInterval (updateSeek),</pre><p>Aceasta va actualiza valoarea căutării de patru ori pe secundă.</p><p>Acum, creați un calculat <code>progres ()</code>:</p><pre>progress () if (this.currentTrack.howl.duration () === 0) retur 0 întoarcere this.seek / this.currentTrack.howl.duration ()</pre><p>Legați-l (<code>: Progres = „progres“</code>) în șablon. </p><p>Acum in <strong>PlayerControlsBars.vue</strong>, treci <code>progres</code> prop (<code>progres: Număr</code>) și adăugați o altă bara de instrumente sub cea pe care am creat-o deja:</p><pre><v-toolbar flat> <v-progress-linear v-model="trackProgress" @click="updateSeek($event)"></v-progress-linear> </v-toolbar></pre><p>Aici folosim componenta de progres Vuetify.</p><p>Creați o valoare calculată <code>trackProgress ()</code>, care va obține progresul piesei ca procent.</p><pre>calculat: trackProgress () return this.progress * 100,</pre><p>Și acum, creați <code>updateSeek ()</code> metodă: </p><pre>($) $ $ emit ('updateseek', '%', '%', ' procente) </pre><p>Aici, obținem elementul barei de progres, care utilizează <code>.progres-linear__bar</code> clasă. Am găsit acest lucru cu browserul DevTools. Apoi, vom obține poziția mouse-ului și lățimea barei. Apoi, vom obține poziția clicului mouse-ului ca procent.</p><p>Înapoi în <strong>Player.vue</strong>, adăugați și înregistrați ascultătorul evenimentului (<code>@ Updateseek = "setSeek"</code>) și creați <code>setSeek ()</code> metodă:</p><pre>setSeek (percente) lăsați track = this.currentTrack.howl dacă (track.playing ()) track.seek ((track.duration () / 100) * percents)</pre><p>Și boom! Puteți folosi mouse-ul pentru a schimba poziția piesei redate.</p><h2>Construiți componenta Panou informativ</h2><p>Creați <strong>PlayerInfoPanel.vue</strong> fișier cu următorul conținut:<br></p><pre><template> <v-card> <v-card-title> <h2>trackInfo.artist - trackInfo.title</h2> <v-spacer></v-spacer> <h3>trackInfo.seek | minute / trackInfo.duration | minute</h3> </v-card-title> </v-card> </template> <script> export default props: trackInfo: Object , </script></pre><p>Aici, trecem printr-un suport <code>trackInfo</code>, pe care le folosim pentru a popula informațiile despre piesă în componenta noastră.</p><p>Acum, înapoi <strong>Player.vue</strong>, import, înregistrați și adăugați componenta în șablon. </p><p>Apoi, creați un calculat <code>getTrackInfo ()</code>: </p><pre>getTrackInfo () let artist = this.currentTrack.artist, title = acest.currentTrack.title, caută = this.seek, duration = this.currentTrack.howl.duration () întoarce artist, titlu, căuta, durata</pre><p>În continuare, îl legăm în șablon (<code>: TrackInfo = "getTrackInfo"</code>) și voila. Avem câteva informații de bază pentru melodia pe care o jucăm în prezent, după cum puteți vedea în imaginea de mai jos.</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_11.png"><h2>Construiți componenta barei de căutare</h2><p>Creați <strong>PlayerSearchBar.vue</strong> fișier cu următorul conținut: <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>Creăm un câmp de text și adăugăm <code>anulabile</code> propuneți să afișați o pictogramă de ștergere când scrieți ceva.</p><p>Prin utilizarea <code>v model</code>, îl legăm la <code>searchstring</code>, care este inițial un șir gol. Și adăugăm un ascultător al evenimentului de intrare.</p><p>De asemenea, treceți <code>lista de redare</code> prop, pe care îl folosim în <code>searchPlaylist ()</code> metodă. În această metodă, folosim <code>afişa</code> proprietăți și transformați-o <code>de pe</code> pentru fiecare piesă în care titlul sau artistul nu se potrivește cu șirul de căutare și îl păstrăm sau îl transformăm <code>pe</code> pentru toate meciurile. În cele din urmă, dacă șirul de căutare este gol sau egal cu <code>nul</code>, care se întâmplă atunci când ștergem câmpul cu butonul clar, ne întoarcem <code>pe</code> <code>afişa</code> pentru toate melodiile.</p><p>Acum, înapoi <strong>Player.vue</strong>, import, înregistrați și adăugați componenta în șablon. </p><p>Legați proprietatea playlistului (<code>: Lista de redare = "playlist"</code>) și verificați funcționalitatea. Iată cum ar trebui să arate în acțiune:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_12.png"><h2>Unele idei de îmbunătățire</h2><p>După cum puteți vedea, cu un scop clar și o planificare adecvată, construirea unei aplicații Vue / Vuetify poate fi foarte ușoară și plăcută. Aveți acum un player de muzică de lucru pe care îl puteți utiliza în timpul relaxării sau timpului de codare. Desigur, există întotdeauna loc pentru îmbunătățiri și adăugiri suplimentare, deci iată câteva idei pe care le puteți încerca pentru a face jucătorul chiar mai bogat în funcții: </p><ul> <li>suport pentru mai multe playlisturi</li> <li>capacitatea de a adăuga sau de a elimina melodii din lista de redare</li> <li>drag-and-drop suport</li> <li>capacitatea de a sorta melodiile</li> <li>vizualizare audio </li> </ul><h2>Concluzie</h2><p>În acest tutorial, am văzut cât de ușor și plăcut poate fi să construiți o aplicație cu Vue.js și în special cu Vuetify.js. Sper că ți-a plăcut construirea acestui jucător la fel de mult ca și mine. Voi fi bucuros să văd propria versiune îmbunătățită a playerului. Deci, dacă creați unul, aruncați o legătură demo în comentarii!</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">Cod</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">Construiește un asteroizii Neon Shoot -Em-Up de la zero</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">Creați o aplicație muzicală cu un șablon de aplicație 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="/">ro.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Informații interesante și sfaturi utile privind programarea. Dezvoltarea de site-uri, web design si dezvoltare web. Tutoriale Photoshop. Crearea de jocuri pe calculator și aplicații mobile. Deveniți un programator profesionist de la zero.
</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="Căutare...">
<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 veți crea
Accentsconagua