Gestire la musica dal browser usando comandi testuali
Aggiornamento 18 Novembre 2009: Questo articolo è stato pubblicato sul numero di Novembre/Dicembre della rivista DEV Magazine edita da Infomedia.
Se c’è qualcuno che non adora navigare per il web con un piacevole sottofondo musicale alzi la mano. Poche mani vedo. Beh, in effetti è un comfort da cui non vorremo mai separarci e quando lo facciamo, a malincuore, è solo perché, magari, dobbiamo anche studiare quello che stiamo visualizzando a video. Assodato che non stiamo studiando e vogliamo solo ascoltare musica, la scocciatura maggiore è dover passare ogni volta che vogliamo cambiare canzone dal browser, al player e poi nuovamente al browser. Se non abbiamo una tastiera in grado di controllare i comandi del nostro player audio non abbiamo tante scelte e la noiosa operazione di passare da una finestra all’altra sembrerebbe inevitabile. Da un po’ di tempo, però, abbiamo la possibilità di aggiungere i comandi di esecuzione (play, pause, next …) direttamente nella barra di stato del nostro browser, ma, ammesso che la barra di stato non sia nascosta, si tratta di centrare col puntatore del mouse dei bottoni non più larghi di 10 pixel. Scomodo, non trovate? Useremo queste, seppur irrisorie, scusanti per implementare un meccanismo che ci permetta di gestire il nostro player usando soltanto dei comandi testuali (evitando di conseguenza di utilizzare il mouse).
FoxyTunes
FoxyTunes è un plugin che permette di controllare la nostra libreria musicale direttamente dal nostro browser preferito. E’ disponibile sia per Internet Explorer che per Mozilla FireFox. Per quest’ultimo l’installazione è semplicissima ed immediata e basta cliccare qui per avviarla. Una volta comlpetata l’installazione, dobbiamo riavviare il browser, alla riapertura, potremo notare che nella barra di stato sono stati aggiunti i comandi per gestire il player (qui troviamo una lista di tutti i player supportati). Abbiamo anche un tasto molto utile che ci condurrà a FoxyTunes Planet, un progetto FoxyTunes acquisito poi da Yahoo. Cliccando sul tasto Planet nel nostro browser verremo portati ad una pagina dove otterremo informazioni riguardo la canzone, l’artista, l’album in cui è presente quella canzone, video e tanto, tanto altro. Questa è la pagina che otterremmo se cliccassimo il tasto FoxyTunes Planet mentre ascoltiamo Rock the Casbah dei Clash. Durante la stesura di questo articolo è stata utilizziata la versione 3.0.4.1 su browser Mozilla FireFox versione 3.0.1.
La barra dei comandi di FoxyTunes.
Ubiquity
Aza Raskin, figlio del più noto Jef Raskin, non è soddisfatto di come al giorno d’oggi si condividono le informazioni nel web. Se qualcuno di noi volesse invitare un amico a pranzo in un ristorante, premurandosi di spiegare come raggiungere il locale allegando anche una recensione per tranquillizzarlo sulla qualità del cibo dovrebbe (nel proprio browser): aprire una tab per l’account mail, aprire una tab per cercare la mappa per le indicazioni, aprire una tab per trovare la recensione del ristorante e infine assemblare i link ottenuti nella stessa mail e inviarla. Abbastanza dispersivo, non ha tutti i torti. Per non parlare se ci trovassimo a compiere tale operazione su dispositivi palmari. Più naturale sarebbe spiegare in linguaggio umano quello che c’è da fare e lasciar compiere a qualcun’altro il lavoro noioso per noi. Questo qualcun’altro, potrebbe essere proprio Ubiquity (installa estensione). Supponiamo che, ad esempio, il ristorante si trovi a Roma, in Via dei Fori Imperiali 34. In gMail (o qualunque altra webMail con una Rich Text Area) creiamo una nuova mail, puntiamo il cursore nell’area dove va scritto il testo, a questo punto premiamo ALT+SPAZIO sulla tastiera, nella finestra che si aprirà scriveremo map Rome Via dei fori imperiali 34 una nuova mappa apparirà, ci basterà cliccare “Insert map in page” ed il gioco è fatto. Quello che segue è un video dimostrativo, in inglese, realizzato dallo stesso Aza Raskin:
Sfruttiamo i due plugin
Ora che abbiamo accennato ai due strumenti principali è venuto il momento di spiegare come farli comunicare tra loro. L’idea di base è stata quella di creare un comando Ubiquity che accetti un parametro, l’esecuzione di tale comando, combinata al parametro, esegue una specifica funzione di FoxyTunes. I comandi vanno scritti in Javascript/JQuery rispettando le convenzioni stabilite da Ubiquity e sono molto semplici da realizzare. Il plugin Ubiquity ci fornisce una pagina molto utile, raggiungibile scrivendo nella barra degli indirizzi del browser about:ubiquity. Tramite questa pagina possiamo vedere varie informazioni, come la versione, verificare la presenza di aggiornamenti, cambiare la combinazione di accesso (ovvero l’ALT+INVIO citato prima), oppure, la cosa che a noi interessa di più, accedere all’editor dei comandi, dove finalmente possiamo iniziare la programmazione del comando.
// version: 0.1
// released: 13/09/2008
CmdUtils.CreateCommand({
name: "foxy-tunes",
takes: {"play|pause|stop|next|prev": noun_arb_text},
description: "",
homepage: "http://mariano.altervista.org/wordpress",
author: { name: "Mariano Calandra", email: "mariano.calandra@altervista.org"},
help: "foxy-tunes command must be followed from one of these actions: play, pause, stop, next, prev.",
preview: function( pblock, param ) {
if (param.text == "play")
pblock.innerHTML = "Play song";
else if (param.text == "pause")
pblock.innerHTML = "Pause song";
else if (param.text == "stop")
pblock.innerHTML = "Stop music";
else if (param.text == "next")
pblock.innerHTML = "Play the next song";
else if (param.text == "prev")
pblock.innerHTML = "Play the previous song";
else
pblock.innerHTML = "Uncorrect or empty action! Choice between: play, pause, stop, next, prev.";
},
execute: function(param) {
if (param.text == "play")
window.foxytunesDispatchPlayerCommand('Play', true);
else if (param.text == "pause")
window.foxytunesDispatchPlayerCommand('Pause')
else if (param.text == "stop")
window.foxytunesDispatchPlayerCommand('Stop')
else if (param.text == "next")
window.foxytunesDispatchPlayerCommand('Next', true)
else if (param.text == "prev")
window.foxytunesDispatchPlayerCommand('Previous', true)
else
displayMessage( "Uncorrect or empty action! Choice between: play, pause, stop, next, prev.");
}
})
Il nostro codice Ubiquity è stato racchiuso tra CmdUtils.CreateCommand({ codice }), per questo non ci sono molte spiegazioni in quanto è l’unico modo per creare comandi degni di esser chiamati tali. Segue una lista di attributi abbastanza autoesplicativi circa le informazioni da dare all’utente finale. Degne di attenzione sono invece la funzione di preview e di execute. La prima, preview, gestisce il comportamento che deve avere Ubiquity man mano che digitiamo i nostri comandi. La funzione accetta due parametri, pblock e param, il primo rappresenta la parte inferiore del nostro pannello dei comandi Ubiquity (ovvero la parte viola nella figura in basso), il secondo rappresenta quello che scriviamo dopo il comando (il nostro parametro). Se ad esempio scrivessi foxy-tunes ciao allora param varrebbe ciao. All’interno della funzione preview una serie di if controllano i parametri che vengono inseriti, se il parametro esiste spiega in pblock cosa fa quel comando, altrimenti, mostra l’errore e comunica quali sono i parametri accettati. Chi è abituato alla programmazione web dinamica non può non aver notato la presenza del metodo innerHTML associato all’elemento pblock, chi non conosce questo metodo trova una breve spiegazione qui.
Il prompt dei comandi
Premessa: Ubiquity è un progetto sperimentale e nei prossimi tempi potrebbe subire migliorie sostanziali che comporteranno notevoli cambiamenti, il listato di codice precedente è etichettato con versione e data, in modo da render noti quanto più possibile i cambiamenti.La funzione execute invece si occupa di gestire il comportamento del comando immediatamente dopo la pressione del tasto Invio. Prende in ingresso un parametro, param, che rappresenta il parametro passato al comando al momento dell’invio. Una serie di if controllano il parametro fornito, se il parametro è corretto allora viene eseguita la relativa funzione del plugin foxy-tunes. Ad esempio, se il parametro è play, verrà eseguita la funzione foxytunesDispatchPlayerCommand('Play', true). Se viene inviato un parametro non corretto, una popup avvertirà la non correttezza del parametro. Gli utenti Windows visualizzeranno tale avviso vicino l’orologio, in Mac OS X bisogna installare il gestore di richieste Growl.
Rendilo disponibile a tutti
Ora che il nostro comando è funzionante e (si spera) funzionale possiamo pensare di condividerlo con tutto il resto del mondo, e permettere di installarlo senza troppe complicazioni. La prima cosa da fare è salvare il comando in un file Javascript, mioComando.js per esempio. Bisognerà creare poi una pagina HTML e tra i tag head aggiungeremo:
<link rel="commands" href="http://percorso" name="Titolo" />
L’attributo rel non va modificato. Quando un utente con Ubiquity visualizzerà questa pagina gli verrà chiesto se vuole effettuare la sottoscrizione del comando. Se l’utente accetta, il comando farà parte della sua lista comandi Ubiquity. Non mi resta quindi che augurarvi buon divertimento e segnalarvi la wiki di Ubiquity.
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Comments
Non c’è ancora nessun commento.
Lascia un commento