Tutorial flash #5 - | Let the music play |

 

Benvenuti amici!

Come promesso in questo tutorial andremo a vedere come creare un piccolo player musicale con playlist incorporata allacciandoci al tutorial flash della scorsa volta che ci permetteva di leggere file da una cartella ( 👉  QUI  il tutorial). Questa volta flash non si riferisce alla velocità di esecuzione dei blocchi ma al fatto che andrò a compattare il codice a differenza delle altre volte dove aggiungevo passaggi per rimarcare meglio alcuni punti. Vedremo anche qualche blocco in più rispetto ai soliti utilizzati quindi sarà leggermente più difficile del normale. Partiamo!

Prima di tutto vediamo cosa ci servirà e come ho impostato i vari componenti, resta ovvio che potrete personalizzazione la grafica a vostro piacere.

Partiamo con i componenti, sul lato destro abbiamo una preview della grafica, in basso ho posizionato una list view ( rettangolo verde ) che funzionerà come visualizzatore della playlist e ci permetterà anche di selezionare rapidamente i nostri brani. Risalendo abbiamo la nostra console ( rettangolo azzurro ) con i tasti canonici play, pause, stop e brano precedente e seguente; ho impostato un 'immagine ( rettangolo arancione ) nella parte centrale che eventualmente potrà ospitare l'immagine dell'album e infine un button che ci servirà per selezionare la playlist. 

Passiamo alle variabili, split name ci servirà per salvare una parte del percorso del file per poi prelevare solo il nome del brano e non tutto il percorso, song index ci permetterà di muoverci all'interno della playlist usando i tasti canzone precedente e successiva, directory sarà il percorso che andremo a salvare per poi richiamare la lista con tutti i file, lista brani credo si possa intuire 😅 e dopo alcuni passaggi riusciremo a trasformarla nel formato dell'immagine e cioè con numerazione e nome brano ripulito .

I tasti sul lato sinistro si commentano da soli, una volta inseriti nel designer e aggiunto il componente player basterà ricercare tra i blocchi start, pause e stop che attiveranno le relative funzioni sul brano. Passiamo al cuore del progetto, il codice centrale , che andrà a prelevare un file dalla cartella di nostro interesse, lavorare il percorso ottenuto per estrapolare la directory della cartella che useremo per richiamare tutti i file presenti per poi inserirli nella playlist. Vi ricordo infatti che il componente audio picker ci forniva solo un brano alla volta e mi raccomando gestiamo la cartella sul nostro smartphone affinché non ci siano file diversi da brani musicali. 

Voglio partire da questo focus per vedere nel dettaglio come lavora questa concatenazione di blocchi e poi andremo a vedere dove si posiziona, premendo il button nell'app attiveremo l'audio picker che aprirà il file manager del nostro telefono per prelevare il brano, una volta selezionato il blocco after picking ci restituisce il percorso del file che salva all'interno selection , che noi andremo a manipolare.
Nel primo blocco a destra vediamo il percorso salvato, nel formato che abbiamo visto nell'altro tutorial, e grazie al blocco GetUri lo trasformeremo nel formato in foto che come possiamo vedere oltre ad aggiungere file:// va a modificare anche il nome del file aggiungendo quei caratteri che gli servono per leggere correttamente la posizione nella sd card. Il nostro scopo è quello di ricavare in seguito il percorso della cartella quindi dobbiamo trovare un modo per eliminare il nome del file dal percorso , che vi ricordo è diverso da utente ad utente e da cartella a cartella , quindi non sappiamo a priori cosa poter eliminare e come. Ecco il mio metodo, se volete postare anche il vostro potete utilizzare i commenti o volendo anche la pagina facebook. Come prima cosa ho pensato di sostituire i tre slash con uno solo in modo da avere un carattere ricorrente che mi identifica una parte del percorso , un po' come le cartelle del pc. Il blocco replace all text riceve il percorso modificato ( nel primo plug ) e poi gli do come segment il pezzettino che voglio eliminare per poterlo sostituire con lo slash che inserisco come replacement , nell'anteprima potrete notare il cambiamento. Adesso un altro blocco text, split text, mi permette di usare un carattere, o anche un testo, per dividere il testo inserito; ogni volta che troverà il carattere inserito nel plug at taglierà quel pezzettino, eliminerà il carattere di controllo ( lo slash ) e lo farà diventare un elemento di una lista. Nell'ultimo balloon gli elementi trovati sono scritti all'interno delle parentesi tronde e li ho distanziati maggiormente per farli notare meglio. Questi elementi sono precisamente quello che troviamo tra uno slash e l'altro nel testo iniziale, questa lista la andremo a salvare nella variabile lista indirizzo per poter ricomporre la directory corretta. Bene, andiamo al blocco principale.

Quindi dopo aver premuto il pulsante ed aver selezionato un brano all'interno della cartella che vogliamo ascoltare si attiva l'after picking e come prima cosa cancelliamo la variabile directory perché ipoteticamente potremmo cambiare playlist a nostro piacimento ogni volta e si attiva il blocco che abbiamo vista prima salvando il tutto in una variabile locale che ho chiamato lista indirizzo . Le variabili locali a differenza di quelle globali esistono solo nel momento in cui vengono attivate e solo per quei blocchi al suo interno, da notare infatti la forma a "c" che attende il codice; questo ci permette di alleggerire la nostra app evitando di creare variabili superflue , pratica molto consigliata magari per quelle variabili temporanee che usiamo solo per determinate procedure e poi muoiono li senza utilizzo. Dalla nostra lista con i pezzettini del percorso andiamo a salvare il penultimo pezzo ( quindi lenght of list - 1) e lo salviamo in split name e ci servirà per tagliare e prelevare solo il nome del file senza il percorso.

Iniziamo a ricomporre la nostra directory , come prima cosa salviamo il primo elemento ( select list item e index 1) della lista dei pezzettini ( lista indirizzo ) unito ( join // ) ai due slash per ottenere file:// e con un ciclo andremo ad aggiungere gli altri pezzi senza includere l'ultimo, che è il nome del file, in questo modo arriveremo fino a Music.

Il nostro ciclo for each number dovrà quindi partire da 2 ( perché il primo elemento lo abbiamo già aggiunto) ed arrivare al penultimo ( perché togliamo il nome del file) e aggiungere al valore già esistente in directory i valori dell'elemento 2 , 3 e 4 della lista , intervallati dallo slash. Quindi prende il valore in directory ( file:// ) aggiunge ( join ) uno slash e poi il secondo elemento della lista ottenendo file:///storage, con il secondo giro del for each preleva il valore di directory ( che adesso è file:///storage ) aggiunge lo slash e il terzo elemento della lista ottenendo file:///storage/152D-1602 . Farà lo stesso anche con l'ultimo elemento ( cioè il penultimo della lista ) e finirà di comporre la directory , le due label sono inutili ma le ho lasciate per dare un 'indicazione di come possiamo lavorare per trovare un errore o solo studiare come funziona un codice, salvare in delle label i valori per poterli visionare con calma .

Adesso che abbiamo la nostra directory possiamo inserirla nel blocco dell'estensione di Pura Vida App e inserendo " * " nel plug estensione ci darà una lista di tutti i tipi di file in quella cartella oppure volendo possiamo scrivere mp3 per avere solo quel tipo di file.

Come compito per casa dovrete controllare in che forma arriva la lista dei brani così da capire ancora meglio l'operazione che andremo a fare adesso.

Ecco di nuovo una variabile locale , nominata temp list proprio per rimarcare la sua volatilità e questa volta il nostro for each andrà a lavorare su tutti gli elementi della lista lista brani quindi da 1 a lunghezza della lista. Ad ogni giro del nostro ciclo andremo a prelevare un elemento dalla lista dei brani ( select list item e come index number) quindi il primo , poi il secondo, il terno e così via, per modificarlo e poi inserirlo nella lista temp che poi arriverà nel nostro list picker come in foto. Ma come modificarlo? Ci pensa ancora uno split e qui useremo split name che abbiamo salvato all'inizio , tutto questo per rendere universale il codice a seconda del file prelevato. L'elemento salvato in split name altro non è che il nome della cartella da cui abbiamo preso il file , nel nostro caso Music, che unito ( join ) con uno slash servirà come elemento del nostro split ( at ) creando due elementi, tutto quello prima del taglio ( da Music a salire ) e tutto quello che sta dopo il taglio , quindi il nome del file, che andiamo a prelevare come secondo elemento di questa lista appena creata dallo split. Ricapitolando! Il for each prende il primo elemento da lista brani ( nome grezzo con directory inclusa ) lo taglia a Music/ e prendere il secondo elemento del taglio , la parte finale per capirci , il nome del file. Questo nome lo inseriamo in un bel join per il tocco di classe ( che modestia 😆), aggiungiamo number ( quindi un numero progressivo che parte da 1 ) un bel punto e il nome del file , risultato " 1. NOME FILE " che spettacolo 😂😂 il nostro for each farà il lavoro sporco per tutti i file presenti aggiungendo tutti i nomi dei brani nella lista temporanea che poi arriverà nella listview. Che fatica ma che soddisfazione 👍 . Mancano solo i tasti per scorrere le canzoni e cosa succede se clicchiamo il nome di un brano nella playlist.

I tasti per scorrere le canzoni sono molto simili quindi li possiamo fare anche insieme , l'unica cosa che cambia è la gestione della variabile che mi permette di selezionare il brano visto che dobbiamo introdurre un controllo nel momento in cui aumentando troppo o diminuendo troppo questo indice sforiamo in un numero non ammissibile per la lista in esame , quindi non possiamo permettere la selezione dell'indice zero quando andiamo indietro e di un indice più grande della lunghezza della lista quando andiamo in avanti.

Andiamo ad utilizzare anche un blocco nuovo , nei miei tutorial, che ci permette di non usare il solito if then else e può essere facilmente inserito in altri blocchi vista la forma differente, song index è l'indice che useremo per selezionare i brani e poi vedremo anche da dove viene fuori. Partiamo con il blocco nuovo della prima immagine , il pulsante che permette di andare alla canzone precedente. La prima cosa che facciamo è aggiornare il valore dell'indice che poi servirà per selezionare il brano, visto che vogliamo il brano precedente dovremo inserire come indice un valore uguale all'indice corrente meno una posizione quindi song index - 1 per esempio se stiamo ascoltando la canzone numero 5 andremo a selezionare l'indice 5-1= 4 , se stiamo ascoltando la prima canzone invece andremo a selezionare la canzone 1-1=0 impossibile per le liste visto che partono da uno , ecco quindi la necessità del controllo. Se l'indice selezionato in quel momento è 1 dovremo andare a riprodurre l'ultima canzone della lista , stiamo facendo il giro al contrario, quindi sarà proprio la lunghezza della nostra lista di brani, in tutti gli altri casi invece ci servirà indice corrente aumentato di una unità. Semplice no ?? Adesso che abbiamo il nostro indice tramite il blocco select list andiamo a prelevare il nome del brano dalla lista brani lo codifichiamo sempre tramite GetUri e lo impostiamo come sorgente del nostro player musicale. Non ci resta che dare il via al nostro brano con il comando start .

Se invece proseguiamo nell'ascolto selezionando il prossimo brano dovremo salvare song index + 1 quindi posizione attuale più una unità, anche qui, attenzione ma al limite massimo, se abbiamo come indice proprio la lunghezza della lista vuol dire che abbiamo finito i brani e dobbiamo iniziare dal primo, sempre attivare la riproduzione con l'apposito comando. Quindi in soldoni questi nuovi blocchi if ad ogni click fanno il controllo e in automatico selezionano una parte o l'altra del codice.

Non ci resta che capire questo indice da dove arriva.

Appena la nostra app parte abbiamo impostato la variabile song index ad 1 quindi al primo utilizzo se premiamo solo il tasto play partirà il primo brano, volendo possiamo anche inserire un numero random tipo riproduzione casuale, i tasti per la prossima canzone faranno il loro dovere come abbiamo visto , ma se scorriamo la playlist e premiamo su una canzone vediamo come selezionare correttamente il brano. Molto semplice, la listview ci mette già a disposizione l'indice della selezione Selection Index che possiamo usare direttamente come valore della nostra variabile , da qui passerà al blocco lista per prelevare il nome , codificarlo e inserirlo come fonte di riproduzione. Play e il gioco è fatto 💪
Mentre scrivevo mi sono ricordato anche un'altra cosa, per rendere ancora più precisa e professionale l'app, appena partiamo la listview è vuota quindi se andiamo a premere i tasti della console non succederà niente, possiamo quindi introdurre un controllo su tutti i tasti di riproduzione che se la list brani è vuota manda una notifica dicendo devi selezionare prima una play list . Compiti per casa ?? 😂😂 vediamo se riuscite da soli.

Un saluto da Raffaele , vi aspetto nei commenti.