Creare app con Vue.js è facile, divertente e divertente. Puoi costruire un'app funzionante con il minimo sforzo. Per dimostrarlo, oggi ti mostrerò quanto è facile costruire il tuo lettore musicale completo. Per rendere le cose ancora più semplici, utilizzeremo Vuetify.js, una libreria UI potenziata di Vue.js, che velocizzerà la costruzione dell'interfaccia utente. Posso quasi sentire la tua impazienza, quindi cominciamo.
Puoi trovare il codice sorgente completo nel repository GitHub. Ed ecco la demo funzionante. Per seguire questo tutorial, è necessario avere familiarità con i componenti Vue, i componenti Vue single file e la sintassi ES2015.
Pianificazione dell'app
Ogni creazione inizia con un'idea e almeno con una pianificazione di base. Quindi prima dobbiamo decidere cosa vogliamo costruire e quali funzionalità vogliamo implementare. Si dice che un'immagine vale più di mille parole, quindi iniziamo con un semplice schizzo del lettore musicale.
Ho realizzato questo wireframe in modo da poter ottenere una nozione generale dell'interfaccia utente che vogliamo costruire. Il prossimo passo è descrivere la funzionalità che intendiamo implementare.
Come dice John Johnson:
Innanzitutto, risolvi il problema. Quindi, scrivi il codice.
Lo useremo come fonte di saggezza e pianificheremo l'app prima di iniziare a codificarla.
Componenti dell'app
Vue.js è un framework basato su componenti. Quindi, per prima cosa dobbiamo dividere l'app in singoli componenti (cinque nel nostro caso, come mostrato nello schizzo sopra) e per delineare le caratteristiche e le funzionalità di ciascuno di essi.
Barra del titolo
Questo componente conterrà le seguenti parti:
un menu sul lato sinistro
il nome dell'app al centro
tre icone statiche sul lato destro
Pannello informativo
Questo componente mostrerà le informazioni di base sulla traccia attualmente riprodotta:
l'artista e il titolo della traccia sul lato sinistro
la posizione corrente della traccia e la durata sul lato destro
Barre di controllo
Questo componente conterrà due barre, che includeranno tutti i controlli necessari per manipolare le tracce audio nella playlist del lettore.
un cursore del volume con un'icona sulla sinistra (il suo aspetto cambierà in base al livello del volume e quando l'audio è disattivato) e la percentuale del volume sulla destra
pulsanti per giocare, mettere in pausa, fermare e saltare le tracce.
due pulsanti all'estrema destra: uno per ripetere la traccia corrente e uno per mischiare l'ordine di riproduzione dei brani
una barra di ricerca che mostra la posizione della traccia attualmente riprodotta, con la possibilità di modificarla con un clic del mouse sulla barra
Pannello della playlist
Questo componente conterrà la playlist dei brani con la seguente funzionalità:
mostra una traccia con le proprietà corrette di numero, artista, titolo e durata
seleziona una traccia con un solo clic
riprodurre una traccia con doppio clic
Barra di ricerca
Questo componente offrirà funzionalità di ricerca nei casi in cui vogliamo trovare e riprodurre tracce particolari.
Naturalmente, lo schema sopra non può coprire tutti i dettagli e le sfumature, e questo è perfettamente a posto. Per ora, è sufficiente per noi ottenere una visione d'insieme del prodotto finale. Gestiremo tutti i dettagli e le eventuali sfide durante il processo di costruzione.
Quindi entriamo nella parte divertente e scriviamo del codice!
Iniziare
La pagina di avvio rapido di Vuetify offre molte opzioni per iniziare. Useremo uno dei modelli Vue CLI predefiniti chiamato Webpack Simple. Eseguire i seguenti comandi nella directory che si desidera utilizzare per questo progetto:
Successivamente, vai alla directory dell'app e installa tutte le dipendenze:
$ cd vue-music player $ npm install
Useremo Howler.js (una libreria audio JavaScript) per gestire le parti audio del lettore musicale. Quindi dobbiamo includerlo anche nel progetto. Esegui il seguente comando:
$ npm install --save howler
Infine, esegui l'app:
$ npm esegui dev
L'app si aprirà localhost: 8080 nel tuo browser predefinito. Dovresti vedere un semplice scheletro di app di Vuetify.
Modifica il modello
Per adattarlo alle nostre esigenze, dobbiamo pulire il modello e modificarlo un po '. Rinominare il App.vue file su Player.vue, aprilo, cancella tutto all'interno e aggiungi invece quanto segue:
Abbiamo avvolto la nostra app di musica nel v-app componente, che è necessario affinché l'app funzioni correttamente. Passiamo anche il buio prop, per applicare il tema scuro di Vuetify.
Ora apri il main.js file, eliminare il contenuto originale e aggiungere quanto segue:
importa Vue da 'vue' importa Vuetify da 'vuetify' importa 'vuetify / dist / vuetify.css' importa Player da './Player.vue' importa Howl, Howler da 'howler' Vue.use (Vuetify) new Vue (el: '#app', render: h => h (Player))
Inoltre, apri il index.html file e modificare il contenuto del </code> tag a <em>Vue Music Player</em>.</p><p>Ora, nel tuo browser, dovresti vedere una pagina scura vuota. E voilà. Sei pronto per iniziare a creare.<br></p><p>Prima di iniziare la codifica, è bene sapere che Vuetify offre snippet di codice e completamento automatico per i principali editor di codice: VS Code, Atom e Sublime. Per ottenere i frammenti, cerca l'estensione nel tuo editor preferito (<code>vuetify-vscode</code>, o <code>vuetify atomo</code>, o <code>vuetify-sublime</code>).</p><h2>Costruisci il componente della barra del titolo</h2><p>Nel <strong>src</strong> directory, creane una nuova <strong>componenti</strong> cartella. Quindi, in quella cartella, crea il <strong>PlayerTitleBar.vue</strong> file con il seguente contenuto: <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>cuffia</v-icon> MENU </v-btn> <v-list> <v-list-tile @click="dialog = true"> <v-list-tile-title>Di</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>Versione 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>rimuovere</v-icon> <v-icon>check_box_outline_blank</v-icon> <v-icon>vicino</v-icon> </v-system-bar> </template> <script> export default data () return dialog: false , </script></pre><p>Qui, utilizziamo i seguenti componenti di Vuetify: barra degli strumenti, menu, pulsante, icona, elenco, finestra di dialogo e scheda. </p><p>Separiamo il menu, il nome e le icone con <code><v-spacer></code> componente. Per mostrare o nascondere la finestra di dialogo, creiamo il <code>dialog: false</code> proprietà dei dati. Il suo valore si alternerà quando clicchiamo su <em>Di</em> elemento del menu.<br></p><p>Ora, nel <strong>Player.vue</strong> file, importa il componente della barra del titolo, registralo nell'oggetto componenti e aggiungilo nel modello.<br></p><pre><template> <v-app dark> <v-content> <v-container> <player-title-bar></player-title-bar> // AGGIUNGI il componente nel modello </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>Ora controlla il risultato nel tuo browser. Dovresti vedere quanto segue:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_3.png"><p>Ripeteremo questi tre passaggi per gli altri quattro componenti. Quindi quando nelle prossime sezioni ti dico di importare, registrare e aggiungere un componente nel modello, dovresti seguire la stessa procedura descritta qui.</p><h2>Costruisci il componente Playlist<br></h2><p>Nella directory root, creane una nuova <strong>elenco di riproduzione</strong> cartella e aggiungere i file audio che si desidera riprodurre. I nomi dei file devono essere scritti con caratteri di sottolineatura tra le parole e a <strong>.mp3</strong> estensione alla fine, per esempio, <strong>Remember_the_Way.mp3</strong>. Ora, crea un array di tracce audio all'interno <strong>Player.vue</strong>L'oggetto dati di: <br></p><pre>playlist: [title: "Streets of Sant'Ivo", artista: "Ask Again", howl: null, display: true, title: "Remember the Way", artista: "Ask Again", howl: null, display: true, ...]</pre><p>Ogni traccia ha <code>titolo</code> e <code>artista</code> proprietà, a <code>ululato</code> oggetto impostato su <code>nullo</code>, e a <code>display</code> proprietà impostata su <code>vero</code>. </p><p>Il <code>display</code> la proprietà verrà utilizzata quando implementeremo la funzionalità di ricerca. Ora è impostato su <code>vero</code> per tutte le tracce, quindi sono tutte visibili.</p><p>Howler avvolge un file audio in a <code>ululato</code> oggetto. Prepariamo <code>ululato</code> a <code>nullo</code> perché lo compileremo dinamicamente alla creazione dell'istanza Vue. Per farlo, usiamo le Vue <code>creato</code> gancio del ciclo di vita. </p><pre>created: function () this.playlist.forEach ((track) => let file = track.title.replace (/ \ s / g, "_") track.howl = new Howl (src: ['. /playlist/$file.mp3 ']))</pre><p>Questo imposterà un nuovo <code>Ululato</code> oggetto per ogni traccia nella playlist.</p><p>Ora crea il <strong>PlayerPlaylistPanel.vue</strong> componente e aggiungilo all'interno: </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>indice 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>In primo luogo, passiamo il puntello <code>elenco di riproduzione</code> dal <strong>Player.vue</strong> file. Successivamente, nel modello, passiamo attraverso ogni traccia con il <code>v-for</code> direttiva e visualizzare l'indice della traccia, seguito dall'artista e titolo della traccia e dalla durata della traccia all'estrema destra. Usiamo anche <code>v-mostra</code> legato al <code>display</code> proprietà. Una traccia sarà visibile solo se <code>display</code> è <code>vero</code>.</p><p>Ora, nel <strong>Player.vue</strong> file, importiamo, registriamo e aggiungiamo il componente playlist nel modello. Quindi, leghiamo il <code>elenco di riproduzione</code> prop a <code>elenco di riproduzione</code> proprietà dati come questa: <code><player-playlist-panel :playlist="playlist"></player-playlist-panel></code>.</p><p>Controlliamo il risultato nel browser:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_4.png"><p>Ci sono due problemi qui. Innanzitutto, i numeri delle tracce non sono corretti, e in secondo luogo, la durata della traccia viene mostrata in millisecondi, ma vogliamo che sia in minuti. Ripareremo ognuno di questi problemi creando un filtro di formattazione. </p><p>Nel <strong>main.js</strong> file, creare a <code>numeri</code> filtro e a <code>minuti</code> filtro, che sarà accessibile a livello globale. Avanti, in <strong>PlayerPlaylistPanel.vue</strong>, li usiamo così: <code>indice | numeri</code> e <code>track.howl.duration () | minuti </code>.</p><p>Ora, se controlli l'app, tutto dovrebbe essere visualizzato correttamente. </p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_5.png"><h3>Crea tracce selezionabili<br></h3><p>Nel <strong>Player.vue</strong> file, aggiungi il <code>selectedTrack: null</code> proprietà dati e collegarlo al componente playlist (<code>: SelectedTrack = "selectedTrack"</code>). Quindi, passiamo il puntello nel <strong>PlayerPlaylistPanel.vue</strong> file (<code>selectedTrack: Object</code>). </p><p>Aggiungiamo anche un listener di eventi click <code><v-list-tile-content @click="selectTrack(track)"></code> e quindi creare il <code>selectTrack ()</code> metodo:</p><pre>metodi: selectTrack (track) this. $ emit ('selecttrack', track) </pre><p>Ora, di nuovo dentro <code>Player.vue</code>, Aggiungi il <code>selecttrack</code> evento al componente della playlist (<code>@ Selecttrack = "selectTrack"</code>) e creare il <code>selectTrack ()</code> metodo:</p><pre>selectTrack (track) this.selectedTrack = track</pre><p>Ora, se vai alla playlist e fai clic su una traccia, sarà selezionato. Non possiamo vederlo, ma possiamo dimostrarlo in Vue DevTools. Nello screenshot seguente, la seconda traccia è selezionata:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_6.png"><h4>Stile di riga e selezione</h4><p>Il prossimo passo è rendere visibile la selezione. Per farlo, legheremo una classe che colorerà la traccia selezionata in arancione e un'altra classe che renderà le righe più scure per rendere le tracce più distinguibili. Metti il seguente dopo il <code>v-mostra</code> direttiva:</p><pre>: class = "[selected: track === selectedTrack, even: index% 2 == 0]" </pre><p>Aggiungeremo anche un'altra classe, che mostrerà una barra di scorrimento quando l'elenco diventa troppo grande.</p><pre><v-card :class="playlist"></pre><p>Aggiungiamo le classi necessarie alla fine del file. </p><pre><style scoped> .selezionato background-color: orange! important; .even background-color: # 505050 .playlist overflow: auto </style></pre><p>E questo è tutto. Ora, la traccia selezionata è evidenziata in arancione.</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_7.png"><p>Aggiungeremo la funzionalità di riproduzione a doppio clic alla fine della sezione successiva.</p><h2>Costruisci il componente Controlli del giocatore<br></h2><p>Creiamo i controlli del giocatore ora. Inizieremo con i pulsanti play, pause e stop. <br></p><h3>Aggiungi i pulsanti Riproduci, Pausa e Stop<br></h3><p>Crea il <strong>PlayerControlsBars.vue</strong> componente e aggiungilo all'interno: <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>pausa</v-icon> </v-btn> <v-spacer></v-spacer> </v-toolbar> </div> </template></pre><p>Qui, usiamo il componente della barra degli strumenti Vuetify.</p><p>Ci sono tre pulsanti con listener di eventi di clic registrati. Creiamo i metodi per loro: </p><pre>metodi: playTrack (index) this. $ emit ('playtrack', index), pauseTrack () this. $ emit ('pausetrack'), stopTrack () this. $ emit ('stoptrack') </pre><p>Ora, nel <strong>Player.vue</strong> file, importa, registra e aggiungi il componente nel modello. Quindi, registra gli ascoltatori di eventi (<code>@ Playtrack = "giocare"</code>, <code>@ Pausetrack = "pausa"</code>, <code>@ StopTrack = "stop"</code>).</p><p>Quindi, crea il <code>indice: 0</code> proprietà dei dati, che manterrà l'indice della traccia corrente. Quindi, crea un calcolo <code>currentTrack ()</code>: </p><pre>computato: currentTrack () return this.playlist [this.index]</pre><p>E ora possiamo iniziare a creare il <code>giocare</code>, <code>pausa</code>, e <code>Stop</code> metodi. Inizieremo con il <code>giocare()</code> metodo, ma prima dobbiamo creare il <code>giocando: falso</code> proprietà dei dati, che indica se la traccia è in riproduzione o meno. Aggiungere il seguente codice per il <code>giocare()</code> metodo:</p><pre>play (indice) 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 lascia track = this.playlist [index] .howl if (track.playing ()) return else track.play () this.selectedTrack = this.playlist [index] this.playing = true this.index = index</pre><p>Il metodo prende un indice come parametro, che specifica la traccia da riprodurre. Innanzitutto, otteniamo l'indice della traccia selezionata. Quindi, effettuiamo alcuni controlli per determinare il valore di <code>indice</code>. Se un indice è fornito come argomento ed è un numero, allora lo usiamo. Se una traccia è selezionata, usiamo l'indice della traccia selezionata. Se la traccia selezionata è diversa da quella corrente, usiamo il <code>Stop()</code> metodo per fermare quello corrente. Infine, se non viene passato né un argomento indice né una traccia, usiamo il valore di <code>indice</code> proprietà dei dati.</p><p>Successivamente, otteniamo l'ululato (basato sul valore dell'indice) per la traccia e controlliamo se sta giocando. Se lo è, non restituiamo nulla; se non lo è, lo suoniamo. </p><p>Infine, aggiorniamo il <code>selectedTrack</code>, <code>giocando</code> e <code>indice</code> proprietà dei dati.</p><p>Creiamo ora il <code>pausa()</code> e <code>Stop()</code> metodi. </p><pre>pause () this.currentTrack.howl.pause () this.playing = false, stop () this.currentTrack.howl.stop () this.playing = false</pre><p>Qui, interrompiamo o fermiamo la traccia corrente e aggiorniamo il file <code>giocando</code> proprietà dei dati.</p><p>Facciamo anche iniziare una traccia con doppio clic.</p><p>Inserisci <code>@ DblClick = "playTrack ()"</code> a <code><v-list-tile-content></code> nel <strong>PlayerPlaylistPanel.vue</strong> e creare il <code>playTrack ()</code> metodo:</p><pre>playTrack (index) this. $ emit ('playtrack', index)</pre><p>Registra l'ascoltatore <code>@ Playtrack = "giocare"</code> nel <strong>Player.vue</strong> file e voilà.</p><h3>Aggiungi i pulsanti Precedente e Successivo</h3><p>Aggiungiamo ora i pulsanti precedente e successivo.<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 il <code>skipTrack ()</code> metodo:</p><pre>skipTrack (direction) this. $ emit ('skiptrack', direction)</pre><p>Registra il listener di eventi (<code>@ Skiptrack = "saltare"</code>) nel <strong>Player.vue</strong>.</p><p>E creare il <code>Salta()</code> metodo:</p><pre>skip (direction) let index = 0 if (direction === "next") index = this.index + 1 if (index> = this.playlist.length) index = 0 else index = this. indice - 1 se (indice < 0) index = this.playlist.length - 1 this.skipTo(index) , skipTo (index) if (this.currentTrack) this.currentTrack.howl.stop() this.play(index) </pre><p>Per prima cosa controlliamo se la direzione è <code>Il prossimo</code>. Se è così, incrementiamo l'indice di 1. E se l'indice diventa più grande dell'ultimo indice dell'array, ricominciamo da zero. Quando la direzione è <code>prev</code>, decrementiamo l'indice di 1. E se l'indice è inferiore a zero, allora usiamo l'ultimo indice. Alla fine, usiamo il <code>indice</code> come argomento per il <code>saltare a()</code> metodo. Interrompe la traccia corrente e riproduce il successivo o il precedente.</p><p>Ecco come il giocatore guarda con i pulsanti:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_8.png"><h3>Aggiungi il dispositivo di scorrimento del volume<br></h3><p>Aggiungi quanto segue prima di tutti i pulsanti:<br></p><pre><v-slider v-model="volume" @input="updateVolume(volume)" max="1" step="0.1"></v-slider></pre><p>Qui, usiamo il componente del cursore Vuetify.</p><p>Aggiungi il <code>volume: 0,5</code> proprietà dati e quindi creare il file <code>updateVolume ()</code> metodo:</p><pre>updateVolume (volume) Howler.volume (volume)</pre><p>Qui, usiamo l'oggetto globale Howler per impostare il volume globalmente per tutti gli ululati.</p><p>Inoltre, dobbiamo sincronizzare il volume di Howler iniziale, che per impostazione predefinita è impostato su 1, su <code>volume</code> proprietà. Se non lo fai, il volume mostrerà 0.5 ma sarà 1 inizialmente. Per farlo, useremo il <code>creato</code> aggancia ancora:</p><pre>creato: function () Howler.volume (this.volume)</pre><p>Vogliamo vedere il livello del volume come percentuale sulla destra del cursore del volume, quindi aggiungiamo questo nel modello: <code>this.volume * 100 + '%'</code> </p><h3>Aggiungi il pulsante Mute </h3><p>Ora, aggiungiamo un'icona del volume prima del cursore. <br></p><pre><v-btn flat icon @click="toggleMute"> <template v-if="!this.muted"> <v-icon v-if="this.volume >= 0,5 "> volume_up</v-icon> <v-icon v-else-if="this.volume > 0" > volume_down</v-icon> <v-icon v-else>volume_mute</v-icon> </template> <v-icon v-show="this.muted">volume_off</v-icon> </v-btn></pre><p>L'icona cambierà in base ai valori di <code>volume</code> e <code>smorzato</code> proprietà.</p><p>Aggiungi il <code>disattivato: falso</code> proprietà dei dati e creare il <code>toggleMute ()</code> metodo:</p><pre>toggleMute () Howler.mute (! this.muted) this.muted =! this.muted</pre><p>Usiamo di nuovo l'oggetto Howler globale per impostare il silenziamento a livello globale, e quindi commutiamo il <code>smorzato</code> valore. </p><p>Nello screenshot qui sotto, puoi vedere come dovrebbe apparire il cursore del volume:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_9.png"><h3>Aggiungi il pulsante Ripeti</h3><p>Aggiungi quanto segue dopo tutti i pulsanti:</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>Aggiungi il <code>loop: falso</code> proprietà in <strong>Player.vue</strong>, legalo <code>: Loop = "loop"</code> e passare il prop (<code>loop: booleano</code>) nel <strong>PlayerControlsBars.vue</strong>. </p><p>Ora, creiamo il <code>toggleLoop ()</code> metodo:</p><pre>toggleLoop () this. $ emit ('toggleloop',! this.loop)</pre><p>Ora, di nuovo dentro <strong>Player.vue</strong>, registra l'ascoltatore di eventi (<code>@ Toggleloop = "toggleLoop"</code>) e creare il <code>toggleLoop ()</code> metodo:</p><pre>toggleLoop (valore) this.loop = valore</pre><p>A questo punto, affrontiamo un piccolo problema. Quando una traccia cerca la fine, si ferma. Il giocatore non si sposta sulla traccia successiva, né ripete la traccia corrente. Per risolvere il problema, dobbiamo aggiungere quanto segue al <code>creato</code> funzione dopo il <code>src</code> proprietà:</p><pre>onend: () => if (this.loop) this.play (this.index) else this.skip ('next')</pre><p>Ora, quando il <code>ciclo continuo</code> è attivo, la traccia corrente verrà ripetuta. Se è spento, il giocatore si muoverà sulla traccia successiva.</p><h3>Aggiungi il pulsante Shuffle</h3><p>Aggiungi il seguente dopo il pulsante di ripetizione:</p><pre><v-btn flat icon @click="toggleShuffle"> <v-icon color="light-blue" v-if="this.shuffle">rimescolare</v-icon> <v-icon color="blue-grey" v-else>rimescolare</v-icon> </v-btn></pre><p>Aggiungi il <code>shuffle: falso</code> proprietà in <code>Player.vue</code>, legarlo (<code>: Riordino = "shuffle"</code>), e passare il prop (<code>shuffle: booleano</code>) nel <code>PlayerControlsBars.vue</code>. </p><p>Ora, creiamo il <code>toggleShuffle ()</code> metodo;</p><pre>toggleShuffle () this. $ emit ('toggleshuffle',! this.shuffle)</pre><p>Ora, di nuovo dentro <strong>Player.vue</strong>, registra l'ascoltatore di eventi (<code>@ Toggleshuffle = "toggleShuffle"</code>) e creare il <code>toggleShuffle ()</code> metodo:</p><pre>toggleShuffle (value) this.shuffle = value</pre><p>Ora, aggiungi quanto segue al <code>Salta()</code> metodo dopo <code>indice = 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>Ecco come dovrebbe apparire la tua app ora:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_10.png"><h3>Aggiungi la barra di ricerca</h3><p>Primo <strong>Player.vue</strong>, creare il <code>cerca: 0</code> proprietà. Quindi dovremo guardare il <code>giocando</code> proprietà per aggiornare la ricerca.</p><pre>watch: playing (playing) this.seek = this.currentTrack.howl.seek () let updateSeek if (playing) updateSeek = setInterval (() => this.seek = this.currentTrack.howl.seek () , 250) else clearInterval (updateSeek),</pre><p>Ciò aggiornerà il valore di ricerca quattro volte al secondo.</p><p>Ora crea un calcolo <code>progresso()</code>:</p><pre>progress () if (this.currentTrack.howl.duration () === 0) return 0 return this.seek / this.currentTrack.howl.duration ()</pre><p>Legalo (<code>: Il progresso = "progresso"</code>) nel modello. </p><p>Ora in <strong>PlayerControlsBars.vue</strong>, passa il <code>progresso</code> prop (<code>progresso: numero</code>) e aggiungi un'altra barra degli strumenti sotto quella che abbiamo già creato:</p><pre><v-toolbar flat> <v-progress-linear v-model="trackProgress" @click="updateSeek($event)"></v-progress-linear> </v-toolbar></pre><p>Qui, usiamo il componente di progresso di Vuetify.</p><p>Crea un calcolo <code>trackProgress ()</code>, che otterrà il progresso della traccia in percentuale.</p><pre>calcolato: trackProgress () return this.progress * 100,</pre><p>E ora, crea il <code>updateSeek ()</code> metodo: </p><pre>updateSeek (evento) let el = document.querySelector (". progress-linear__bar"), mousePos = event.offsetX, elWidth = el.clientWidth, percents = (mousePos / elWidth) * 100 this. $ emit ('updateseek', percentuali) </pre><p>Qui, otteniamo l'elemento barra di avanzamento, che utilizza il <code>.il progresso-linear__bar</code> classe. Ho trovato questo con il browser DevTools. Successivamente, otteniamo la posizione del mouse e la larghezza della barra. Quindi, otteniamo la posizione del clic del mouse come percentuale.</p><p>Di nuovo dentro <strong>Player.vue</strong>, aggiungi e registra l'ascoltatore di eventi (<code>@ Updateseek = "setSeek"</code>) e creare il <code>setSeek ()</code> metodo:</p><pre>setSeek (percentuali) let track = this.currentTrack.howl if (track.playing ()) track.seek ((track.duration () / 100) * percents)</pre><p>E boom! Puoi usare il mouse per cambiare la posizione della traccia riprodotta.</p><h2>Costruisci il componente del pannello informazioni</h2><p>Crea il <strong>PlayerInfoPanel.vue</strong> file con il seguente contenuto:<br></p><pre><template> <v-card> <v-card-title> <h2>trackInfo.artist - trackInfo.title</h2> <v-spacer></v-spacer> <h3>trackInfo.seek | minuti / trackInfo.duration | minuti</h3> </v-card-title> </v-card> </template> <script> export default props: trackInfo: Object , </script></pre><p>Qui, passiamo un sostegno <code>trackinfo</code>, che usiamo per popolare le informazioni sulla traccia nel nostro componente.</p><p>Ora, di nuovo dentro <strong>Player.vue</strong>, importa, registra e aggiungi il componente nel modello. </p><p>Quindi, crea un calcolo <code>getTrackInfo ()</code>: </p><pre>getTrackInfo () let artist = this.currentTrack.artist, title = this.currentTrack.title, seek = this.seek, duration = this.currentTrack.howl.duration () return artist, title, seek, duration,</pre><p>Successivamente, lo associamo al modello (<code>: Trackinfo = "getTrackInfo"</code>) e voilà. Riceviamo alcune informazioni di base per la traccia attualmente riprodotta, come puoi vedere nello screenshot qui sotto.</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_11.png"><h2>Costruisci il componente della barra di ricerca</h2><p>Crea il <strong>PlayerSearchBar.vue</strong> file con il seguente contenuto: <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>Creiamo un campo di testo e aggiungiamo il <code>azzerabile</code> prop a mostrare un'icona di cancellazione quando scriviamo qualcosa.</p><p>Usando <code>v-model</code>, lo leghiamo al <code>stringa di ricerca</code>, che è una stringa vuota inizialmente. E aggiungiamo un listener di eventi di input.</p><p>Passiamo anche il <code>elenco di riproduzione</code> prop, che usiamo nel <code>searchPlaylist ()</code> metodo. In questo metodo, usiamo il <code>display</code> proprietà e accenderlo <code>via</code> per ogni traccia in cui il titolo o l'artista non corrisponde alla stringa di ricerca e la manteniamo o la trasformiamo <code>sopra</code> per tutte le partite. Infine, se la stringa di ricerca è vuota o uguale a <code>nullo</code>, che succede quando cancelliamo il campo con il pulsante di cancellazione, giriamo <code>sopra</code> il <code>display</code> per tutte le tracce.</p><p>Ora, di nuovo dentro <strong>Player.vue</strong>, importa, registra e aggiungi il componente nel modello. </p><p>Associare la proprietà della playlist (<code>: Playlist = "playlist"</code>) e controllare la funzionalità. Ecco come dovrebbe apparire in azione:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_12.png"><h2>Alcune idee di miglioramento</h2><p>Come puoi vedere, con un obiettivo chiaro e una pianificazione adeguata, la creazione di un'app Vue / Vuetify può essere davvero facile e divertente. Ora hai un lettore musicale funzionante che puoi usare durante il tuo relax o tempo di codifica. Naturalmente, c'è sempre spazio per ulteriori miglioramenti e integrazioni, quindi ecco alcune idee che puoi provare per rendere il player ancora più ricco di funzionalità: </p><ul> <li>supporto per più playlist</li> <li>possibilità di aggiungere o rimuovere brani dalla playlist</li> <li>supporto drag-and-drop</li> <li>possibilità di ordinare le tracce</li> <li>visualizzazione audio </li> </ul><h2>Conclusione</h2><p>In questo tutorial abbiamo visto quanto sia facile e divertente creare un'app con Vue.js e, in particolare, con Vuetify.js. Spero ti sia piaciuto costruire questo giocatore tanto quanto me. Sarò felice di vedere la tua versione migliorata del giocatore. Quindi, se ne crei uno, ti basta rilasciare un link dimostrativo nei commenti!</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">Codice</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">Costruisci un asteroide al neon Spara-emetti da 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 un'app musicale con un modello di app 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="/">it.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Informazioni interessanti e consigli utili sulla programmazione. Sviluppo di siti web, web design e sviluppo web. Tutorial di Photoshop. Creazione di giochi per computer e applicazioni mobili. Diventa un programmatore professionista da 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="Ricerca...">
<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
Cosa starai creando
Accentsconagua