Il sito Songsterr è un sito utile ai musicisti che vogliono leggere le parti di una canzone per impararla, vedere passaggi che non sono chiari etc…

È in pratica una versione web-based del software Guitar Pro, infatti sin dal primo sguardo chi lo conosce si accorgerà che ha molte funzioni simili.

Per poter usare Songsterr non occorre essere registrati, invece occorre esserlo per inviare una nuova canzone. Penso questa decisione sia dovuta al fatto che si vuole mantenere un’alta qualità al servizio offerto.

Un’altra distinzione tra gli utenti è che quelli non registrati (e anche gli account gratuiti, penso) hanno un limite nelle funzioni: non possono variare i livelli, stampare le tablature, mettere il player a schermo intero etc. Tuttavia ci sono alcune canzoni di prova delle funzionalità PRO.

In questo articolo voglio analizzare il funzionamento del player, limitato alle richieste delle informazioni sulle canzoni, non a come queste ultime vengono visualizzate.

In pratica saranno analizzate le API del player, non documentate nella loro pagina delle API.

Innanzitutto potremmo dividere il sito in backend e frontend. Il frontend è la parte visibile a tutti, un sito web pulito (che però come font imposta Tahoma e se ne frega del sans-serif).

L’header e il footer sono sempre gli stessi: logo, campo di ricerca e link utili, invece, come contenuti, nell’homepage sono presenti tab famose e le ultime aggiunte; la pagina di ricerca mostra i possibili risultati e le opzioni avanzate.

Proviamo ad aprire una canzone.

Ci si apre un player che si vede subito essere basato su Flash, i commenti “Powered by Facebook” e le canzoni correlate; da qualche parte ci dovrebbero essere anche i banner ma il mio ad-block basato sul file hosts funziona bene 😀 .

Inoltre vediamo subito anche che la struttura del link è la tipica struttura di un link riscritto col mod_rewrite: http://www.songsterr.com/a/wsa/nome-canzone-guitar-tab-sNtN. Ovviamente nome-canzone cambia sempre ma anche i numeri (N) dopo s e t.

Dando un’occhiata al sorgente non c’è alcuna traccia di flash che infatti è caricato usando dei javascript. Precisamente una loro libreria che fa uso di Prototype. Il codice è guardabile, non è neanche compresso ma in realtà non mi interessa analizzarlo dettagliatamente: ho già capito che è Flash “che fa le magie”.

Solamente la funzione Songsterr.Player.embedPlayer è interessante, poiché carica automaticamente il filmato Flash.

I suoi parametri sono:

• swfPath (stringa): l’URL del file SWF;
• swf9Path (strigna): l’URL del file SWF per Flash Player v9 (non usato però, nella funzione);
• isWide (boolean): true o false cambia la larghezza del player;
• flashvars (stringa): bingo! È ciò che ci serve, però lo vedremo dopo;
• playerProductInstallPath (stringa): È un parametro per Flash Player, non ci interessa.

Il flashvars è un parametro generato dinamicamente dal server: indica l’id numerico (songId) della canzone, cioè quello che abbiamo trovato nel link dopo s; il player di base che di solito rimane uguale e l’indice della traccia che deve far visualizzare (initialTrackIndex), anch’esso presente nel link, dopo t. Se infatti si prova a cambiare il t, si vedrà che la canzone rimarrà uguale, tuttavia si vede un’altra traccia (spartito, o meglio, tablatura) appena la canzone si carica.

Ora che abbiamo scoperto questi “segreti”, analizziamo le richieste. Apriamo la consolle di Firefox (CTRL + Maiusc + K) o Firebug, abilitando la scheda Net, o la console di Chromium sulla scheda Network e ricarichiamo la pagina.

Vedremo subito una strage di CSS, Javascript e immagini, un sacco di richieste a uno dei sotto domini di fbcdn.net (Facebook, insomma) finché ad un certo punto cominceremo a vedere file interessanti. Subito dopo il player (che tra l’altro prende un sacco di dati per fare statistiche, come il sistema operativo), un file che ha per indirizzo http://www.songsterr.com/a/wa/enabledFeatures?songId={$songId}. È un file XML dove sono elencate le funzionalità a nostra disposizione. Serve per gli utenti PRO e per le famose prove gratuite delle funzionalità complete. Non compare nelle XHR (ovvero richieste eseguite AJAX), perciò penso sia caricato da Flash e ciò vuol dire una cosa: se pensavate di trovare un modo di scroccare, non c’è. E anche se ci fosse sarebbe illegale e perciò non ne parlerei in questo articolo.

Un altro file importante è http://www.songsterr.com/a/ra/player/song/{$songId}.xml. Qui è riassunto lo scheletro della canzone.
La struttura mi pare simile per tutti i file: l’elemento principale è Song. Poi ci sono tre sotto elementi: title, ovvero il titolo della canzone; artist con l’id dell’artista e in un suo sotto elemento il nome; infine latestAvailableRevision con le informazioni sulla canzone.

Quest’ultimo nodo è molto importante ed è a sua volta ramificato. Per prima cosa troviamo l’indirizzo del file guitar pro. Peccato che i TOS ci vietino di scaricarlo, perché le tablature di Songsterr di solito hanno un’alta qualità.

Andiamo avanti con l’XML: ora c’è un nodo che si chiama tracks che contiene le informazioni sulle varie tracce e un nodo chiamato mostPopularTrack che fa riferimento all’id di una traccia della canzone. Non ho capito ancora se ha scopi pratici.

Tornando al tracks, si nota che c’è un sotto-nodo per ogni traccia, dotato anche di ID. Però non è finita qui: ogni traccia ha una struttura simile, cioè con gli stessi sotto-elementi e cioè:

• capoHeight: un numero che penso faccia riferimento al capo tasto degli strumenti come chitarre ma non ho ancora capito la sua funzione;
• instrument: indica le proprietà dello strumento che suona la traccia. Precisamente indica nome e numero midi;
• position: nella lista delle tracce, il numero della traccia partendo da 0. È a questo valore che fa riferimento il parametro initialTrackIndex;
• title: il nome della traccia;
• tuning: per gli strumenti a corda come chitarre e bassi, indica le note corde a vuoto. I numeri sono i numeri midi della nota e le corde sono separate dal trattino. Il primo numero indica la prima corda (quella più acuta)
• withLyrics: indica se bisogna scrivere le parole. È un valore boolean (true o false) e non l’ho mai visto true;
• trackAudios: vedere dopo;
• trackLayoutImages: vedere dopo.

TrackAudios è una sezione in cui sono indicati gli indirizzi dei file MP3 che sono le tracce suonate. In realtà sono mascherati da file dat, ma c’è scritto nel file che sono MP3 e se li scaricate e li aprite con l’HEX editor vedete traccia del LAME encoder. In più se rinominate da DAT a MP3 sentirete la traccia 😊 .

In realtà di tracce audio ce ne sono due: una è per la velocità al 100%, l’altra per la velocità al 50%, infatti questo file è usato sia per la modalità PRO, sia per la modalità Free.

TrackLayoutImages indica degli altri file .dat. In realtà ne accoppia due: uno è un insieme di immagini PNG, mentre l’altro è una mappa di questi file.

Il primo sono riuscito più o meno a capire come funziona: ci sono 4 byte iniziali di cui non ho ancora capito la funzione, dopo ci sono immagini di una stessa superficie. Per trovarli tutti ho usato questo script PHP:

#!/usr/bin/php
<?php

# Il nome del file dat
$file='miofile.dat';

$file=file_get_contents($file);
$file=substr($file, 8);
$file=explode(chr(0x89).'PNG', $file);

foreach($file as $key=>$part) {
	$part=chr(0x89).'PNG'.$part;
	file_put_contents("img-{$key}.png", $part);
}

Della mappa ho invece capito che è un file GZ con all’interno un altro file, tuttavia non ho ancora capito come funziona quest’ultimo.

Questi file dat dovrebbero essere gli ultimi legati al player che perciò, in teoria, non se ne fa niente del file guitar pro. Ho notato che sono tutti all’interno del dominio cloudfront.net, che sembra essere amministrato da Amazon.com.

Se qualcuno riesce a capire dell’altro mi faccia pure sapere 😊

Ovviamente dovete eliminare ogni possibile file usato per sperimentazione, perché i TOS proibiscono di copiare i contenuti di Songsterr.