Spleeter: Isolare la parte vocale in un brano

Isolare la parte vocale in un brano musicale è sempre stato un processo lungo, difficile e, spesso, dai risultati incerti.

Negli ultimi anni, grazie soprattutto a nuove tecnologie e all’aumento della potenza di calcolo dei computer, numerose aziende hanno commercializzato software e plugin che garantiscono risultati sempre migliori. Purtroppo siamo ancora lontani dall’avere uno strumento semplice da usare, veloce e in grado di garantire risultati di qualità.

La ricerca o la creazione di stems, ovvero le tracce separate partendo da un mix stereo, è un’occupazione che, ancora oggi, porta via a DJ e produttori molte ore di lavoro.

Da oggi le cose potrebbero cambiare grazie a Spleeter: uno strumento rilasciato gratuitamente da Deezer nei giorni scorsi che sfrutta l’intelligenza artificiale per separare automaticamente le varie componenti di un brano.

Spleeter è un software che permette di isolare la traccia vocale da un brano musicale completo.

I risultati che si ottengono non sono ancora perfetti ma il fatto che Spleeter lavori in completa autonomia e produca degli output in pochissimi minuti è sicuramente un importante passo avanti.

Al momento è possibile separare i brani in 2, 4 oppure 5 stems:

  • 2 stems: voce e accompagnamento musicale
  • 4 stems: voce, batteria, basso e altre parti
  • 5 stems: voce, batteria, basso, piano e altre parti

Per poter utilizzare Spleeter è necessario installare qualche pacchetto sul proprio computer e utilizzare la linea di comando per farlo funzionare. Sono sicuro che nel giro di qualche settimana verrà reso disponibile da qualcuno un programma che integri le funzioni di Spleeter con un’interfaccia grafica semplice da utilizzare.

Per chi fosse curioso di provare Spleeter di seguito troverete le istruzioni passo passo per installare tutto il necessario.

Installazione su Mac

Per prima cosa è necessario installare Miniconda sul nostro computer. Si tratta di un pacchetto che contiene tutto il necessario per creare un ambiente di sviluppo per far funzionare Spleeter correttamente.

Quando l’installazione è conclusa dobbiamo aprire il Terminale che si trova nella cartella Applicazioni > Utility.

Verificate che sul vostro computer sia installato Git scrivendo il seguente comando:

git --version

Se ricevete un errore, dovete procedere con l’installazione di Git: potete scaricare il pacchetto andando qui. Se, invece, ricevete un output con su scritto qualcosa simile a git version 2.23.0 allora potete procedere con l’installazione di Spleeter.

Per prima cosa andate nella cartella documenti con il comando

cd ~/Documents

E poi lanciate il seguente comando:

git clone https://github.com/deezer/spleeter

Attendete la fine del download. Una volta completato dovreste vedere una cartella nominata spleeter all’interno della cartella Documenti.

Ora creiamo l’ambiente di sviluppo con il seguente comando:

conda env create -f spleeter/conda/spleeter-cpu.yaml

E, infine, procediamo con l’attivazione

conda activate spleeter-cpu

Una volta completate tutte le operazioni, ricordatevi di disattivare l’ambiente con il comando

conda deactivate

Utilizzare Spleeter per separare la parte vocale da un brano

All’interno della cartella di Spleeter c’è un file mp3 chiamato audio_example.mp3. Lanciando il seguente comando il file verrà analizzato e verranno create 2 stems: una per la parte vocale e una per quella musicale.

spleeter separate -i spleeter/audio_example.mp3 -p spleeter:2stems -o output

Dentro la cartella Documenti ora troverete una cartella nominata output con, al suo interno, una sottocartella audio_example con i file separati.

Per utilizzare il software su altri brani sarà sufficiente copiare il file .mp3 oppure .wav nella cartella spleeter e lanciare il comando qui sopra assicurandosi di scrivere correttamente il nome del file; vi consiglio di rinominare i brani evitando spazi, lettere accentate, ecc…).

Se volete estrarre 4 o 5 stems utilizzate questo comando:

spleeter separate -i spleeter/audio_example.mp3 -p spleeter:4stems -o output
spleeter separate -i spleeter/audio_example.mp3 -p spleeter:5stems -o output

Esempi audio e limitazioni

Ecco un paio di esempi di divisione in due stems

Tones and I – Dance Monkey

Parte vocale
Accompagnamento musicale

Billie Jean – Michael Jackson

Parte vocale
Accompagnamento musicale

Come indicato sul sito degli sviluppatori: se intendete utilizzare questo strumento su materiale protetto da copyright, assicuratevi di avere tutte le autorizzazioni del caso.

Il problema dei grafici a linee curve

Dopo aver realizzato il nostro grafico a linee, potremmo pensare di utilizzare delle linee curve. Ma, come vedremo in questo articolo, ci troveremo ad affrontare una serie di problemi.

Dalle linee dritte a linee curve

Ripartendo dal codice nell’articolo precedente e cambiato le seguenti righe:

vertex(x1, height - 50 + tempMin[i] * - 20);
vertex(x1, height - 50 + tempMax[i] * - 20);

utilizzando curveVertex() al posto di vertex() otteniamo questo risultato:

grafico linee curve utilizzando curveVertex

Notiamo subito che mancano dei collegamenti con il primo e l’ultimo punto della serie di dati. Come indicato nel reference, questa funzione utilizza il primo e l’ultimo punto vengono usati per guidare la curvatura della linea.

A questo punto dobbiamo arbitrariamente aggiungere due punti e, in questo caso, conviene farlo prima e dopo il ciclo for. Qui sorge il secondo problema: che coordinate diamo a questi due punti che non derivano dal nostro dataset?

La soluzione più ovvia è utilizzare le coordinate del primo e dell’ultimo punto:

// Temperature minime
  int x1 = 68;
  beginShape();
  curveVertex(x1, height - 50 + tempMin[0] * - 20); 
  for (int i = 0; i < tempMin.length; i++) {
    fill(100, 190, 255);
    curveVertex(x1, height - 50 + tempMin[i] * - 20);
    noStroke();
    ellipse(x1, height - 50 + tempMin[i] * - 20, 10, 10);
    x1 += 40;
    stroke(100, 190, 255);
    noFill();
  }
  curveVertex(x1, height - 50 + tempMin[tempMin.length - 1] * - 20); 
  endShape();

  // Temperature massime
  x1 = 68;
  beginShape();
  curveVertex(x1, height - 50 + tempMax[0] * - 20); 
  for (int i = 0; i < tempMax.length; i++) {
    fill(255, 100, 100);
    curveVertex(x1, height - 50 + tempMax[i] * - 20);
    noStroke();
    ellipse(x1, height - 50 + tempMax[i] * - 20, 10, 10);
    x1 += 40;
    stroke(255, 100, 100);
    noFill();
  }
  curveVertex(x1, height - 50 + tempMax[tempMax.length - 1] * - 20); 
  endShape();

Se lanciamo il programma, il nostro grafico a linee curve diventa così:

Grafico a linee curve in Processing

Il risultato potrebbe sembrare soddisfacente ma un occhio esperto si potrebbe accorgere di un altro problema: la curvatura delle linee intorno ai punti dei dati può confonderci e portarci in errore quando leggiamo il grafico.

L’errore di precisione

Questo set di dati ha dei data point molto vicini tra loro e, quindi, il fenomeno non si vede chiaramente.

Ho realizzato quest’altra immagine per mostrarlo meglio: questa volta i punti sono inseriti in un array in modo casuale ma il principio è lo stesso di quello utilizzato nello sketch che stiamo realizzando.

Grafico a linee curve con errore

È evidente l’errore che esiste tra i primi due punti e gli ultimi due: la linea curva va oltre i valori in modo anomalo e portando a un’interpretazione errata del grafico.

Come trovare la soluzione definita al nostro problema? Abbiamo due possibilità:

  1. Rinunciare alle linee curve una volta per tutte
  2. Non usare la funzione curveVertex() ma usare le curve di Bézier e, quindi, la funzione bezierVertex().

La difficoltà dell’usare queste curve è di dover passare alla funzione tre coordinate x e y: due per i punti di controllo e una per il punto di ancoraggio. Se volete capire come funzionano, consiglio di provare a giocare al The Bézier Game (io ho rinunciato dopo poco).

Alcuni lavori dei miei studenti del corso CMTI dell’università di Udine #2

Il primo articolo con la spiegazione e un po’ di background in merito al corso e ai lavori di data visualization dei miei studenti lo trovate qui.

In questo post pubblico, con il loro permesso, le infografiche realizzate dagli studenti che hanno sostenuto l’esame al secondo appello.

Passione film con i dati di IMDB

Il primo lavoro è di Omar Frasson, appassionato di cinema, che grazie ai dati raccolti su IMDB ha sviluppato una visualizzazione piuttosto articolata.

Omar Frasson, data visualization IMDB

La prima schermata, che funge da splash screen, è già, di per sé, una visualizzazione: i nomi dei registi dei film appaiono, infatti, a grandezza differente in base al numero di lungometraggi visti. La posizione sullo schermo, invece, è casuale.

Data visualization IMDB film

Nella prima schermata, tutti i film vengono ordinati sull’asse delle x per anno di uscita. Sull’asse delle y, invece, la durata del film e, attraverso il colore, è possibile vedere il voto assegnato.

Passando con il mouse sopra a ciascun rettangolo compaiono alcuni dati sul film.

Visualizzazione di dati IMDB infografica

La visualizzazione per generi con animazione controllata dallo slider in alto con riferimento sempre l’anno di uscita del film. Sulla destra, invece, alcuni eventi rilevanti della storia del cinema.

Omar Frasson, data visualization registi

Terza schermata: visualizzazione per registi con comparazione tra la votazione assegnata dallo studente e quella media generale di tutti gli utenti di IMDB.

Omar Frasson data visualization IMDB

Schermata che rappresenta dei dati relativamente alla durata dei film e alle valutazioni assegnate.

E, infine, una comparazione tra tutti i film visti da Omar nel 2017 e nel 2018.

Tutto sugli Avengers

Rimaniamo in ambito cinematografico con il lavoro di Giulia Nardò che ha deciso di creare una data visualization sulla serie degli Avengers. I dati sono stati raccolti da varie fonti (Wikipedia, IMDB, ecc…) e assemblati in un file excel.

Giulia Nardo data visualization Avengers

Una prima schermata mostra l’universo degli Avengers con tutti i personaggi (cerchio esterno) e film (cerchi interni). Muovendosi con il mouse è possibile vedere quali personaggi erano presenti nei film. La legenda sulla sinistra aiuta molto a capire le varie relazioni e la scelta dei colori.

Giulia Nardo Avengers Iron Man
Dettaglio sul personaggio Iron Man
Ronan the accuser data visualization avengers
Dettaglio sul personaggio Ronan the accuser

Cliccando sui personaggi o sul film è possibile avere ulteriori dettagli

Giulia Nardo Avenger Endgame data visualization
Dettaglio su: Avengers: Endgame.

Visualizzare i dati raccolti con l’App Salute su iOS

Il progetto di Erika Corallo, invece, si è concentrato sulla visualizzazione dei dati raccolti con l’App Salute su iOS: battito cardiaco, distanze percorse e passi.

L’approccio è stato piuttosto semplice nel disegnare i grafici ma la parte, a mio modo di vedere, più interessante, sono le schermate iniziali che sono animate e già rappresentano i dati in modo molto creativo.

Erika Corallo, visualizzazione dati salute iOS
Erika Corallo, data visualization salute
Erika Corallo my steps visualizzazione infografica

Per ciascun dato esiste, poi una vista dettagliata suddivisa per mese oppure generale per anno.

Clash of Clans

Williams Piazza ha utilizzato i dati presi dall’API del gioco Clash of Clans per valutare il rendimento di ciascun giocatore del suo clan per capire come migliorare le prestazioni di gioco.

Alcuni lavori dei miei studenti del corso CMTI dell’Università di Udine

Due anni fa ho iniziato a lavorare come docente a contratto per il corso di Laurea Magistrale in Comunicazione Multimediale e Tecnologie dell’Informazione (CMTI) dell’Università degli Studi di Udine.

La materia che insegno si chiama Linguaggi Visuali per Sistemi Complessi e, all’interno del percorso, offre un punto di contatto tra l’anima informatica (Virtual Reality, Machine Learning, Cybersecurity ecc…) e tra il mondo del design (Design dello Spazio, Interaction Design, ecc…).

In questo post ho deciso di condividere – con il loro permesso – alcuni dei lavori presentati al primo appello d’esame da alcuni studenti e studentesse del corso.

La scelta del tema era libera e ciascuno/a ha sviluppato in completa autonomia sia il lavoro di ricerca che di visualizzazione.

Premessa: il background e i contenuti del corso

Il background di chi frequenta il corso è molto vario ma, in generale, chi ha competenze in ambito informatico non ha mai lavorato prima con la grafica e viceversa.

Nel percorso didattico che ho sviluppato e che sto perfezionando di anno in anno, cerco di portare tutti ad acquisire delle competenze in entrambi questi ambiti attraverso lo studio della programmazione in Processing e con analisi ed esercitazioni in classe di data visualisation.

L’occupazione dei neo-laureati

Partendo dai dati di Almalaurea, Michelangelo ha deciso di fare una visualizzazione interattiva e animata sulle percentuali di neo-laureati che trovano lavoro dopo un anno dal conseguimento del titolo.

Un grafico che mostra le statistiche occupazionali dei neo laureati dopo un anno dal conseguimento del titolo. Corso CMTI Università di Udine
Data Visualisation di Michelangelo Campanella, fonte dati: Almalaurea

I colori di un film

Kristian si è concentrato sull’analisi dei colori dei suoi film preferiti (Apocalypse Now, Blade Runner, Mad Max, ecc…). Nel realizzare questo progetto ha incontrato due difficoltà:

  • estrarre i dati analizzando i film frame per frame
  • creare una visualizzazione unica che permettesse l’interpretazione dei dati raccolti.
Corso CMTI Università di Udine. Visualizzazione di Kristian Simonato.
Un’analisi approfondita sull’utilizzo del colore nel cinema di Kristian Simonato

Anche in questo caso, trattandosi di una visualizzazione interattiva, lo screenshot che ho condiviso non rende giustizia al lavoro svolto. Partendo da questo studio sull’utilizzo dei colori nel cinema, il primo grafico (in alto) mostra quanto ciascun frame tende a uno dei sette colori principali analizzati nello studio.

Nella parte centrale è possibile vedere il colore predominante in ciascun frame, vedere il frame di riferimento nel film un’analisi più approfondita con le percentuali di ciascun colore.

Il grafico 3D sulla sinistra, che si può ruotate, presenta un’analisi completa e numerica delle componenti colore dell’intero film.

Mappare le nascite del Friuli Venezia Giulia

Data Visualization delle nascite nel Friuli Venezia Giulia suddivise per comune. Corso CMTI Università di Udine
Una mappa interattiva per mappare le nascite nel Friuli Venezia Giulia di Michele Dal Zotto, fonte dati: ISTAT

Prendendo i dati dell’ISTAT, Michele ha visualizzato su una mappa interattiva le nascite dal 2013 al 2017 nella sua regione, il Friuli Venezia Giulia.

È possibile interagire con la mappa cliccando sui comuni per vedere il dettaglio oppure selezionando il dato generale o quello di maschi/femmine.

Featuring tra rapper e artisti italiani

Sfruttando i dati presi dall’API di Spotify, Niccolò è andato ad analizzare alcuni dei suoi musicisti/cantanti preferiti e le loro collaborazioni.

Ne nasce un grafico interattivo dove ciascun artista è rappresentato da un cerchio, il cui colore varia in base al genere musicale di riferimento (scelto in modo arbitrario). I featuring tra gli artisti sono rappresentati dalle linee di collegamento: più è spessa la linea, maggiori sono le collaborazioni tra i due artisti.

Data Visualization Niccolò Bellucco - Corso CMTI Università di Udine
Data Visualization Niccolò Bellucco - Corso CMTI Università di Udine

Cliccando su un artista (immagine sopra) si può entrare nel dettaglio mentre, cliccando sui nodi (immagine sotto) che rappresentano le collaborazioni è possibile visualizzare dei dati aggiuntivi sui brani.

Nella versione animata, le barre verdi si muovono come fossero animate dall’audio del brano.

Data Visualization Niccolò Bellucco - Corso CMTI Università di Udine con API di Spotify

La diffusione delle microplastiche nell’acqua

Il lavoro di Tania e Silvia si può vedere on-line. Hanno deciso di concentrare la loro attenzione su un tema molto attuale: la diffusione delle microplastiche nelle acque.

Microplastic: il lavoro di Tania Scorpio e Silvia Gioia Florio. In questa immagine un mock-up di una locandina per un’esibizione.

Cliccando sul menu a destra è possibile visualizzare informazioni diverse sulla mappa. La cosa interessante è che i dati raccolti provengono dal database di Adventure Scientists, un gruppo volontari che raccolgono dati in giro per il mondo per aiutare gli scienziati.

Fonte dati: Adventure Scientists

L’area dell’Oceano Atlantico che salta subito all’occhio non è più inquinata delle altre, semplicemente in quella fascia sono stati raccolti moltissimi campioni durante una competizione nautica.

Interessante anche il grafico forecast che vuole azzardare una previsione di quanto saranno inquinati gli oceani da qui al 2050 se non dovessimo cambiare immediatamente il nostro modo di produrre microplastiche.

Analisi di una relazione su Telegram

Sicuramente ispirato dal progetto che ho mostrato in classe Call me Adele, Francesco ha deciso di analizzare i dati generati dalla chat di Telegram con la sua fidanzata (più di 80 mila messaggi).

I risultati sono molto interessanti e credo che le immagini parlino da sole; anche in questo caso l’applicazione originale è interattiva e permette di navigare facilmente tra le varie schermate e di scendere nel dettaglio quando necessario.

Grafico a linee

Partiamo sempre dall’esempio su cui stiamo lavorando da un po’ di tempo a questa parte e creiamo un grafico a linee in Processing.

L’unica modifica al codice che dobbiamo fare è quella relativa alla grafica: lasciamo, dunque, inalterata la prima parte, quella relativa alla lettura dei dati dal file .csv e l’inserimento degli stessi in un array e passiamo direttamente alla grafica.

Ripensare la posizione della x

La prima differenza rispetto al grafico a barre sarà determinare correttamente la posizione x del valore estratto dall’array. Se, infatti, il ciascuna barra del grafico aveva una sua larghezza, ora dobbiamo rappresentare solo un punto.

Per risolvere il problema, pur mantenendo il risultato finale che avevamo realizzato nell’ultimo post, creo una nuova variabile chiamata x1 che mi servirà come nuovo riferimento e aggiungo un nuovo ciclo for solo per disegnare i punti di riferimento nel grafico.


int x1 = 68;
  
for(int i = 0; i < tempMin.length; i++) {
  ellipse(x1, height - 50 + tempMin[i] * - 20, 10, 10);
  ellipse(x1, height - 50 + tempMax[i] * - 20, 10, 10);
  x1 += 40;
}

Ecco il risultato:

Grafico a linee in Processing

Creiamo il grafico a linee

Creare un grafico a linee potrebbe essere più complesso di quanto ipotizzato: dovremmo, infatti, creare manualmente una linea per congiungere tra loro i punti disegnati in precedenza.

Per fortuna ci vengono in aiuto alcune funzione di Processing: beginShape()vertex() ed endShape().

Con beginShape() diciamo al programma di iniziare a creare una forma, aggiungiamo tutti i vertici che la compongono con vertex() e, una volta richiamata la funzione endShape(), Processing si preoccuperà di collegare insieme tutti i punti.

Come al solito, consiglio di verificare sul reference i parametri opzionali che possiamo usare per ciascuna funzione. Per questo esempio il comportamento di default è quello che fa al caso nostro ma in futuro potrebbero tornarvi utili anche le altre possibilità.

Dovendo creare due grafici a barre, dovremo utilizzare due cicli for:


int x1 = 68;

beginShape();
for (int i = 0; i < tempMin.length; i++) {
  vertex(x1, height - 50 + tempMin[i] * - 20);
  ellipse(x1, height - 50 + tempMin[i] * - 20, 10, 10);
  x1 += 40;
}
endShape();

x1 = 68;
beginShape();
for (int i = 0; i < tempMax.length; i++) {
  vertex(x1, height - 50 + tempMax[i] * - 20);
  ellipse(x1, height - 50 + tempMax[i] * - 20, 10, 10);
  x1 += 40;
}
endShape();

Grafico a linee beginShape, vertex, endShape

A questo punto possiamo eliminare i grafici a barre che avevamo tenuto come riferimento e andare a sistemare i colori per ottenere un risultato finale soddisfacente:

Grafico a linee finale in Processing

Codice completo

Guardando il codice vi sembrerà un po’ verboso, in particolare per quanto riguarda le assegnazioni dei colori. Facendo qualche esperimento vi renderete conto di quanto sia importante inserire le istruzioni giuste per evitare problemi di visualizzazione.


/*
 * Grafico a linee
 * Federico Pepe, 20.05.2018
 * http://blog.federicopepe.com/processing
 */

Table csv;

float tempMin[], tempMax[];

void setup() {
  size(500, 500);
  background(255);
  noStroke();
  csv = loadTable("data.csv", "header");

  println("Numero righe: " + csv.getRowCount());
  println("Numero colonne: " + csv.getColumnCount());

  tempMin = new float[0];
  tempMax = new float[0];

  for (int i = 1; i < csv.getColumnCount(); i++) {
    tempMin = append(tempMin, csv.getFloat(0, i));
    tempMax = append(tempMax, csv.getFloat(3, i));
  }

  printArray(tempMin);

  println("Il valore minimo è: " + min(tempMin));
  println("Il valore massimo è: " + max(tempMin));

  noLoop();

  // Scritte relative all'anno
  int x = 50;
  int year = 2008;
  
  for (int i = 0; i < tempMin.length; i++) {
    fill(0, 127);
    text(year, x + 2, height - 30);
    x += 40;
    year++;
  }
  
  // Temperature minime
  int x1 = 68;
  beginShape();
  for (int i = 0; i < tempMin.length; i++) {
    fill(100, 190, 255);
    vertex(x1, height - 50 + tempMin[i] * - 20);
    noStroke();
    ellipse(x1, height - 50 + tempMin[i] * - 20, 10, 10);
    x1 += 40;
    stroke(100, 190, 255);
    noFill();
  }
  endShape();
  
  // Temperature massime
  x1 = 68;
  beginShape();
  for (int i = 0; i < tempMax.length; i++) {
    fill(255, 100, 100);
    vertex(x1, height - 50 + tempMax[i] * - 20);
    noStroke();
    ellipse(x1, height - 50 + tempMax[i] * - 20, 10, 10);
    x1 += 40;
    stroke(255, 100, 100);
    noFill();
  }
  endShape();

  // Griglia di riferimento
  textAlign(RIGHT, CENTER);
  for (int j = 0; j <= 20; j++) {
    if (j % 5 == 0) {
      fill(0, 127);
      text(j + "°", 25, height - 52 + (j * - 20));
      stroke(0, 30);
    } else {
      stroke(0, 15);
    }
    line(30, height - 50 + (j * - 20), 470, height - 50 + (j * - 20));
  }
}

void draw() {
}