Embed Size (px)
Citation preview
UNIVERSITA DEGLI STUDI DI MILANOFACOLTA DI SCIENZE E TECNOLOGIE
CORSO DI LAUREA TRIENNALE IN INFORMATICA MUSICALE
SINCRONIZZAZIONE TRA IEEE 1599 E YOUTUBE
Relatore: Prof. Luca Andrea LudovicoCorrelatore: Prof. Adriano Barate
Tesi di Laurea di:Daniel AndreaMatr. Nr. 858306
anno accademico 2017-2018
Prefazione
La tesi tratta un sistema implementato per il sito emipiu.dico.unimi.it. Questo siste-ma e caratterizzato da un player capace di gestire la sincronizzazione fra il formatoIEEE 1599 e dei file audio/video o dei video di YouTube.
Organizzazione della tesi
La tesi e organizzata come segue:
• nel Capitolo 1 vengono introdotte le caratteristiche del sistema trattato edelencate le funzionalita;
• nel Capitolo 2 viene mostrato lo stato attuale dell’arte;
• nel Capitolo 3 vengono elencate le tecnologie utilizzate per realizzazione delprogetto;
• nel Capitolo 4 viene descritto il funzionamento del sistema;
• nel Capitolo 5 vengono esposte le conclusioni e gli eventuali sviluppi futuri.
Ringraziamenti
Indice
Prefazione
Ringraziamenti
1 Introduzione 11.1 YouTube . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11.2 Rappresentazione multistrato dell’informazione musicale . . . . . . . 21.3 IEEE 1599 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.3.1 General . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51.3.2 Logic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51.3.3 Structural . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51.3.4 Notational . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51.3.5 Performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51.3.6 Audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.4 Sincronizzazione con YouTube . . . . . . . . . . . . . . . . . . . . . . 6
2 Stato dell’arte 72.1 MEI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.2 MNX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.3 IEEE 1599 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.3.1 Player IEEE 1599 . . . . . . . . . . . . . . . . . . . . . . . . . 8
3 Tecnologie utilizzate 113.1 IEEE 1599 Framework . . . . . . . . . . . . . . . . . . . . . . . . . . 113.2 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.2.1 Novita di HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . 123.2.2 Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.3 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133.3.1 AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143.3.2 IFrame Player API . . . . . . . . . . . . . . . . . . . . . . . . 14
3.4 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
INDICE
3.5 PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
4 Descrizione del sistema 184.1 Creazione delle mappature . . . . . . . . . . . . . . . . . . . . . . . . 184.2 Incorporamento del player di YouTube . . . . . . . . . . . . . . . . . 19
4.2.1 Creazione del player . . . . . . . . . . . . . . . . . . . . . . . 194.3 Interattivita del player di YouTube . . . . . . . . . . . . . . . . . . . 20
5 Conclusioni 215.1 Sviluppi futuri . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
A Codice 23
Bibliografia 28
Capitolo 1
Introduzione
1.1 YouTube
YouTube rappresenta la piu grande piattaforma di video sharing del pianeta, attual-mente possiede versioni locali per piu di 88 paesi e la navigazione per gli utenti edisponibile in ben 76 lingue diverse. La situazione dipinge un servizio usato da piu diun miliardo di utenti, che a loro volta rappresentano la strabiliante cifra di quasi unterzo di tutti gli utenti di Internet. Negli Stati Uniti, una delle zone dove YouTubeha piu pubblico, il suo servizio raggiunge piu adulti fra i 18 ed i 49 anni di qualsiasialtra rete via cavo.
Figura 1: Evoluzione di YouTube in 5 anni
1
CAPITOLO 1. INTRODUZIONE 2
La storia di Youtube inizia nel febbraio del 2005, quando Chad Hurley, Steve Chen eJawed Karim che erano stati tutti dipendenti di PayPal, decidono di creare un sito chepermette la facile visualizzazione di video su internet, ed esattamente il 15 Febbraio2005 registrano l’ormai famoso nome di dominio YouTube.
Il primo video caricato su YouTube e stato Me at the zoo realizzato da uno deitre fondatori, Jawed Karim, girato di fronte alla gabbia degli elefanti dello zoo di SanDiego, il video ha una durata complessiva di 19 secondi ed e stato caricato un sabatoalle 20:27 del 23 aprile 2005. Sempre allo stesso Jawed Karim appartengono la primaregistrazione e il primo account di YouTube.
Nel giugno del 2006 l’azienda ha comunicato che quotidianamente venivano vi-sualizzati circa 100 milioni di video, e nell’agosto dello stesso anno Google Inc. haacquisito YouTube per 1,65 miliardi di dollari.[1]
Questa piattaforma ha rivoluzionato anche il panorama musicale, attribuendoal video un’importanza, quasi, primaria per gli utenti che hanno la possibilita diriprodurre gratuitamente qualsiasi contenuto con un PC, un tablet o uno smartphone.
La sconfinata disponibilita di video musicali apre molti scenari a tutti coloro chestudiano e lavorano con l’informazione musicale, degli esempi possono essere delleesecuzioni live di un determinato brano oppure la riproduzione di una canzone con lospartito mostrato a video staticamente o dinamicamente.
1.2 Rappresentazione multistrato dell’informazio-
ne musicale
Un unico dato musicale e costituito da tante informazioni di diverso tipo, come l’au-dio, i metadati, le parole della canzone, le note sul pentagramma, a volte anche unvideo associato. Ognuna di queste informazioni puo essere disponibile in piu versioni,per esempio due interpretazioni diverse dello stesso brano; inoltre ciascuna possie-de caratteristiche particolari a seconda della tipologia di appartenenza e necessitadunque di una rappresentazione idonea alle sue particolarita.
Nonostante le grandi diversita tra i vari tipi di informazione, e possibile descrivereunivocamente tutto cio che riguarda un brano attraverso l’approccio multistrato. Lastruttura del multistrato integra ed omogenizza i diversi tipi di ordinamento dell’in-formazione musicale, mettendo in corrispondenza le diverse granularita delle varieforme di rappresentazione tra loro connesse. Cio significa che l’audio, le parole, lospartito e le altre informazioni vengono collegate da un’unica linea logica, che associaverticalmente tutto cio che e contemporaneo a livello temporale e connesso a livellologico.
La funzione multistrato produce connessioni sia intralayer, ovvero tra informa-zioni dello stesso tipo (ad esempio due interpretazioni audio dello stesso brano), sia
CAPITOLO 1. INTRODUZIONE 3
interlayer, ovvero tra informazioni appartenenti a strati diversi (ad esempio audio espartito).
1.3 IEEE 1599
Per sopperire alla mancanza di uno standard riconosciuto e condiviso a livello inter-nazionale, IEEE (Institute of Electrical and Electronic Engineers) all’inizio dell’anno2000 aprı la proposta no.1599 intitolata Recommended Practice for Definition of aCommonly Acceptable Musical Application Using the XML Language. XML, acroni-mo di eXtensible Markup Language, a cui IEEE fa esplicitamente riferimento nellaproposta, e un linguaggio di marcatura estensibile, ovvero basato su un meccanismosintattico che consente di definire e controllare il significato degli elementi creati.Una peculiarita di questo linguaggio e la struttura gerarchica ed annidata, che ben siconforma alla natura multistrato dell’informazione musicale.
Alla luce di questa proposta da parte di IEEE, il Laboratorio di InformaticaMusicale dell’Universita degli Studi di Milano (LIM) ha avviato il progetto MX dacui e nato lo standard.
Lo standard IEEE 1599 e un formato basato su XML, volto a descrivere in modocompleto l’informazione musicale attraverso un approccio multistrato. L’obiettivo equello di creare uno standard per la rappresentazione dell’informazione musicale ingrado di descrivere, collegare e sincronizzare i diversi livelli di informazione attra-verso un ambiente multistrato. Piu che uno standard vero e proprio, l’IEEE 1599 euna “recommended practice”, ovvero una regolamentazione non da rispettare obbli-gatoriamente, ma che consiglia di adottare certe specifiche per facilitare il lavoro dasvolgere e per renderlo compatibile con altri lavori.[2]
L’IEEE 1599 individua principalmente sei strati riguardanti un dato musicale,chiamati layer :
• General
• Logic
• Structural
• Notational
• Performance
• Audio
Lo spine e la struttura dati principale in un documento IEEE 1599. E un sotto-elemento del livello logico che mira ad elencare gli eventi musicali e identificandoli in
CAPITOLO 1. INTRODUZIONE 4
modo univoco assegnando etichette uniche. Il concetto di “evento musicale” e lasciatointenzionalmente vago, dal momento che il formato deve essere flessibile e adatto adiversi scopi e applicazioni. Un evento musicale puo essere definito come il verificarsidi qualcosa che viene considerato importante dall’autore della codifica. Ad esempio,in un caso normale, tutte le note e le pause all’interno di una partitura possono essereinterpretati come eventi musicali: ciascun simbolo sara identificato in modo univocoe inserito in un elenco ordinato di eventi.
Lo spine e una sorta di colla necessaria in una struttura multistrato come IEEE1599. In questo approccio, descrizioni eterogenee dello stesso brano musicale non sonosemplicemente raggruppate insieme, ma vengono forniti ulteriori relazioni: laddovepossibile, le informazioni strutturali e multimediali sono correlate ai singoli eventimusicali, qualunque sia il significato adottato per questa locuzione.
Questa struttura dati e chiamata spine (colonna vertebrale) perche funge da dor-sale per il contenuto musicale; questo concetto fu usato per la prima volta nel 1975 daD.A. Gomberg, che ha basato un sistema per la pubblicazione di musica elettronicasu una struttura simile.[3]
Figura 2: Struttura multistrato del formato IEEE 1599
CAPITOLO 1. INTRODUZIONE 5
1.3.1 General
Contiene le informazioni che riguardano l’opera musicale a prescindere dalle sue istan-ze realizzative. I metadati qui memorizzati comprendono, ad esempio, il titolo, l’au-tore e l’anno di composizione. Il livello generale e obbligatorio nella sua parte didescription.
1.3.2 Logic
E il cuore di IEEE 1599 e descrive l’informazione ad un livello simbolico. Contiene lospine, la principale struttura di sincronizzazione temporale e spaziale (elenco di eventscon id, timing e hpos in unita virtuali e relative), i los (Logically Organized Symbols,descrizioni simboliche degli eventi musicali) e il layout, ovvero informazioni su unagenerica implementazione grafica del contenuto simbolico. E obbligatorio solo lo spine.
1.3.3 Structural
Descrive esplicitamente gli oggetti musicali come aggregazione di eventi e le loro re-lazioni causali, dal punto di vista compositivo e musicologico. Al proprio interno, illivello non localizza spazialmente o temporalmente gli eventi, ma si serve di riferi-menti allo spine. Il livello structural e diviso in quattro sezioni: chord grid (grigliaarmonica), analysis (che descrive la segmentazione del brano e le relazioni fra seg-menti), petri nets (modelli per reti di Petri del brano), e mir (modelli per il musicinfromation retrieval). Il livello e facoltativo.
1.3.4 Notational
Contiene la descrizione e i collegamenti spaziali per la rappresentazione notazionaledella musica. Le rappresentazioni possono essere in formato grafico (PNG, JPEG,PDF) o notazionale (NIFF, ENIGMA). Il livello e interamente facoltativo.
1.3.5 Performance
Puo contenere la rappresentazione dell’esecuzione del brano nei formati MIDI, CSounde MPEG-4 Structured Audio (SASL/SAOL). Il livello e interamente facoltativo.
1.3.6 Audio
Descrive e codifica l’informazione multimediale audio e video. Possono essere inclusi,anche congiuntamente, diversi file sia audio che video. I collegamenti allo spine sono
CAPITOLO 1. INTRODUZIONE 6
generalmente implementati tramite la temporizzazione assoluta dei file. Il livello einteramente facoltativo.
1.4 Sincronizzazione con YouTube
Con sincronizzazione tra il formato IEEE 1599 e YouTube si intende la possibilita diintegrare un player YouTube nella pagina web presa in considerazione e, sfruttando ilformato IEEE 1599, creare un sistema che permette di evidenziare la nota corrente di-rettamente sul player e di rendere interattivo il video aggiungendo, cosı, la possibilitadi premere sulle note per gestire la riproduzione di esso.
Il video preso in considerazione potra, quindi, essere un brano con relativa partitu-ra; essa dovra essere composta da una o piu immagini statiche che possono succedersicome in un volta-pagina.
Di conseguenza, si sfrutta il video come una semplice sequenza di immagini cheandranno mappate in un unico gruppo di istanze grafiche e si utilizza l’audio comeriferimento per la creazione della mappatura audio/temporale.
Questo sistema offre, cosı, un vantaggio secondario che e quello di non dover man-tenere in memoria nessun file audio e nessuna immagine per la partitura, infatti tuttoviene recuperato dal file XML di riferimento da cui si ricavera il codice identificativodel video da riprodurre.
Capitolo 2
Stato dell’arte
Attualmente, sono presenti diverse iniziative per la codifica delle informazioni musicalie per il collegamento con la notazione musicale. In seguito vengono introdotte leprincipali proposte.
2.1 MEI
MEI, acronimo di Music Encoding Initiative, e un progetto open-source nata percreare un sistema per la rappresentazione di documenti musicali in una strutturadigitale.[4] Lo schema MEI e sviluppato utilizzando il formato One-Document-Does-it-all (ODD), un formato XML di programmazione sviluppato dalla Text EncodingInitiative (TEI). E un mezzo molto generico ed espressivo per codificare documentimusicali arbitrari, con particolare attenzione ai bisogni degli studiosi. A causa dellasua estrema plasticita, MEI e forse meglio descritto come un potente frameworkper la creazione di applicazioni e documenti personalizzati, piuttosto che come unsingolo metodo di codifica. Pertanto, l’interoperabilita non e stata finora un obiettivoprincipale di questa comunita.
2.2 MNX
MNX, acronimo di Music Notation X, e uno standard di markup di notazione musi-cale, che mira a fornire un elevato grado di interoperabilita e scambio tra diverse ap-plicazioni che funzionano con la notazione musicale. Questo standard puo supportarepiu tipi di notazioni, in particolare, due codifiche:
• CWMNX, che codifica la notazione musicale occidentale convenzionale (CWMN)utilizzando i markup definiti nello standard HTML5, consentendo alle applica-zioni di presentare le stesse informazioni in modo coerente in diversi contesti.
7
CAPITOLO 2. STATO DELL’ARTE 8
Esso eredita molte idee e concetti da MusicXML. Tuttavia, sacrifica alcunefunzionalita e flessibilita di MusicXML in favore di una piu aderente interope-rabilita e semplifica notevolmente la struttura degli elementi. CWMNX spostaanche tutte le informazioni non semantiche in proprieta CSS.
• GMNX, General MNX, serve come una sorta di codifica universale per partiturecon contenuti grafici e audio arbitari. Di conseguenza, e relativamente privo disemantica.
2.3 IEEE 1599
IEEE 1599 e una specifica che ha prestato un’attenzione unica alle relazioni tra diversilivelli di informazioni musicali. Il suo livello Logic e simile nel contenuto a CWMNX,mentre i suoi livelli Notational, Performance e Audio rispondono ad alcuni degliinteressi di GMNX. Anche se, GMNX adotta un approccio diverso per connetterequesti strati e non tenta di unificare completamente le informazioni semantiche condati visivi e prestazionali.[5]
2.3.1 Player IEEE 1599
Il sistema implementato fino ad ora e una pagina web creata per gestire la riproduzionedi piu tracce audio/video e monitorare lo scorrimento dinamico su vari spartiti e sudiverse reti di Petri.
L’intera pagina e basata su delle informazioni relative ad un brano ricavate da undocumento XML codificato nel formato IEEE 1599. L’intestazione presenta, infatti,l’autore ed il titolo del brano che viene seguita da una barra e dei bottoni per gestirela riproduzione e la scelta delle tracce.
Figura 3: Intestazione del sito
La parte sottostante mostra due moduli:
• Il modulo con la rappresentazione e la scelta delle partiture che permette diosservare quale nota, o quali note, sono in esecuzione durante la riproduzionedella traccia.
CAPITOLO 2. STATO DELL’ARTE 9
Figura 4: Partitura interattiva
• Il modulo con le analisi strutturali illustrate attraverso le reti di Petri, anch’esseilluminate dinamicamente a seconda di quale nodo della rete e in esecuzione.
Figura 5: Rete di Petri interattiva
Una caratteristica fondamentale di questo sistema e l’interattivita dei due moduliche predispongono, per l’utente, la possibilita di selezionare una determinata nota oun determinato nodo per gestire la riproduzione del brano spostandosi da un puntoall’altro della traccia.
CAPITOLO 2. STATO DELL’ARTE 10
Questo livello interattivo e garantito dall’utilizzo dell’elemento HTML <canvas> chepermette di evidenziare graficamente l’elemento in esecuzione e l’elemento seleziona-bile dall’utente. Inoltre, questa tela, facilita il passaggio da un’immagine all’altrapermettendo il volta-pagina per le partiture e l’apertura delle sotto-reti nel modulodelle analisi.
Capitolo 3
Tecnologie utilizzate
3.1 IEEE 1599 Framework
IEEE 1599 Framework e un software progettato dal LIM e sviluppato in C# perMicrosoft Windows, che viene utilizzato per l’analisi e il confronto di diverse esibizionistrumentali allo scopo di riportare graficamente gli aspetti interpretativi temporali diogni professionista che esegue il brano.
E, quindi, un insieme di strumenti che consentono di svolgere diverse operazionisu documenti codificati nel formato IEEE 1599 e i due strumenti principali sono ilGraphic Mapper e l’Audio Mapper; questi plugin agiscono rispettivamente sul livellonotational e sul livello audio.
Il lavoro di modifica del documento XML codificato nel formato IEEE 1599comincia con l’importazione del documento con o senza validazione.
Il Graphic Mapper permette, nello specifico, di creare le mappature grafiche ca-ricando delle immagini in vari formati ed evidenziando gli eventi dello strato logicdirettamente sull’immagine appena selezionata. Questo procedimento consente dicreare delle istanze riferite a dei particolari eventi musicali, che possono essere una opiu note.
L’Audio Mapper viene utilizzato per creare le mappature audio caricando un fi-le audio o video in vari formati ed effettuando un tapping di un pulsante appositoche effettua la mappatura con gli eventi musicali. Il tapping consiste nella pressionea tempo del pulsante TAP dopo aver impostato il parametro dei VTU/Beat (1024di default per battere i quarti, 512 per battere gli ottavi, ecc...). Durante questaoperazione verra riprodotto il brano selezionato mediante i comandi di Play/Pau-se. Il plugin permette, successivamente, di effettuare una revisione manuale dellamappatura, quindi del timing, prima di salvare il lavoro e modificare il documentoXML.
11
CAPITOLO 3. TECNOLOGIE UTILIZZATE 12
3.2 HTML
L’HyperText Markup Language e un linguaggio di markup utile all’impaginazione ealla formattazione di documenti ipertestuali per il web, che fu sviluppato nei primianni Novanta al CERN di Ginevra da Tim Berners-Lee per la creazione del WorldWide Web.
HTML ha due caratteristiche fondamentali: l’ipertesto e l’universalita. L’ipertestoconsente di creare un collegamento (o link) in una pagina web che conduce il visitatoread un’altra pagina o ad un’altra risorsa presente su Internet, e implica la possibilita diaccedere alle informazioni presenti sul web da piu punti diversi. L’universalita derivadal fatto che i documenti HTML sono dei semplici file di testo, e quindi una paginaweb e leggibile praticamente da qualsiasi computer. Non importa se l’utente ha unamacchina Macintosh, Windows o Unix, o addirittura un dispositivo palmare.
Nel 1995 il W3C definı la versione 2.0 di HTML, a cui seguı la versione 3.0 e, poi,3.2 nel 1997 e infine arrivarono nel 1998 le prime specifiche di HTML4.
La versione 4.01, pubblicata il 24 dicembre 1999 e penultima versione ufficiale,costituisce il frutto di diversi miglioramenti, in particolare nella separazione dellaformattazione, cioe quella che descrive gli aspetti grafici del documento, grazie ai foglidi stile (CSS). Questa distinzione permette di alleggerire il carico di lavoro del browser,di rappresentare i contenuti adattati alle diverse capacita grafiche e, soprattutto, alladiffusione del web evitando che esso diventasse uno strumento di elite.
Questo non viene descritto come linguaggio di programmazione perche definiscela struttura principale del documento e si limita a modificare dei dati testuali, algiorno d’oggi viene affiancato da altri linguaggi per esigenze estetiche e funzionali,aggiungendo possibilita di interazioni dinamiche, animazioni e contenuti multimediali.
La sintassi e stabilita dal World Wide Web Consortium (W3C) ed e caratteriz-zata dalla creazione di elementi che possono essere oggetti testuali e non, attraversol’utilizzo delle marcature (tag).
Il documento HTML inizia sempre con la dichiarazione del Doctype che specificala versione del linguaggio che viene utilizzata, successivamente si introduce il tag<html> che si chiudera alla fine del documento. Generalmente viene composto daun tag <head> con le informazioni generali e i collegamenti ad altri file, e da un tag<body> con i contenuti della pagina web che possono essere dati testuali o altri tag.
3.2.1 Novita di HTML5
Nel 2014 il W3C pubblica la quinta revisione delle specifiche (HTML5) che ha dueobiettivi principali, il primo di fornire direttamente alcune funzioni che preceden-temente erano fruibili soltanto tramite estensioni esterne al browser e il secondo di
CAPITOLO 3. TECNOLOGIE UTILIZZATE 13
aumentare la compatibilita fra i vari browser con particolare riguardo ai dispositivimobili.
Due delle novita fondamentali per questo progetto sono l’introduzione di elemen-ti specifici per il controllo di contenuti multimediali (tag <audio> e <video>) e lastandardizzazione dell’elemento Canvas.
3.2.2 Canvas
L’elemento Canvas e una tela che permette di creare immagini bitmap gestibili conlinguaggio di scripting; consiste, quindi, in rettangolo di pixel che vengono controllatidinamicamente con la possibilita di creare o importare immagini. Concettualmenterisulta utile la sovrapposizione di piu immagini in un unico contesto che permette lacomparsa di una pagina di uno spartito, il volta-pagina e l’evidenziazione di una notasulla partitura.
In particolare le funzioni fillRect e fillStyle permettono di creare rettangoli coloratiutilizzando dei codici RGBA, acronimo di Red Green Blue Alpha, che rappresentaun modello di colori, solitamente, basato su una scala da 0 a 255 per il rosso, verde,blu e una scala da 0.0 a 1.0 per il livello di trasparenza; questa particolare tavolozzapermette di, come detto in precedenza, creare un effetto “evidenziatore” con unaleggera trasparenza.[6]
3.3 JavaScript
JavaScript e un linguaggio di scripting orientato agli oggetti e agli eventi, principal-mente utilizzato per la programmazione web lato client, che fu sviluppato nel 1997da Brendan Eich della Netscape Communications.
Il World Wide Web si e sviluppato grazie alla possibilita di poter visualizzarela grafica e la multimedialita in rete. Mosaic, il primo browser, venne rilasciatonel 1992 e permetteva di visualizzare la grafica oltre al testo; nel 1994 parte deglisviluppatori di Mosaic fondarono la Netscape Communications Corporation e il lorobrowser si rivelo ben presto di qualita superiore, tanto che svilupparono JavaScript chevenne implementato per la prima volta sulla versione beta di Netscape Navigator 2.0.Tale linguaggio apporto un notevole cambiamento alle pagine HTML, per cui alcunieffetti, che erano realizzabili soltanto con l’interfaccia CGI, diventarono piu facili daeffettuarsi e la stessa dinamicita non resto piu limitata alle sole gif animate.[7]
Inizialmente si chiamava LiveScript, ma nel periodo in cui Netscape stava inclu-dendo il supporto per la tecnologia Java cambio nome in JavaScript. Questa sceltacreo grande confusione e, di fatto, non c’e una vera relazione con il linguaggio Java,le somiglianze sono soltanto nella sintassi (entrambe derivanti dal linguaggio C) ma iloro object model risultano ampiamente incompatibili.
CAPITOLO 3. TECNOLOGIE UTILIZZATE 14
Questo linguaggio non viene compilato, ma interpretato, e solitamente viene in-tegrato all’interno di un programma ospite; l’esempio tipico di programma ospite equello del browser che contiene un interprete JavaScript che eseguira gli script pre-senti nella pagina web e questo permette un comportamento dinamico e interattivo.Inoltre, garantisce che il web server non venga sovraccaricato perche l’esecuzione e acarico del client.
Cio che permette l’interazione con il browser e l’interfaccia chiamata DOM (Do-cument Object Model) che e un modello di rappresentazione di un documento strut-turato che viene utilizzato da molte applicazioni; in particolare nella programmazioneweb si utilizza la rappresentazione ad albero del DOM per un documento HTML.
Una tipica modifica del DOM utilizzata nell’applicativo e quella del contestodell’elemento Canvas che permette di “disegnare” immagini in modo dinamico.
JavaScript presenta le caratteristiche di linguaggio di programmazione ad altolivello (strutture di controllo, cicli, vettori, ecc.), e debolmente tipizzato e consentel’utilizzo del paradigma object oriented. Nelle pagine web i comandi vengono inseriticon l’apposito tag <script> con l’attributo type di valore “text/javascript” (internal),tramite un link ad un file .js separato (external), oppure direttamente nei tag HTMLper la programmazione ad eventi.
3.3.1 AJAX
AJAX, acronimo di “Asynchronous JavaScript and XML”, e una tecnica di svilupposoftware per la realizzazione di applicazioni web interattive.
Questa tecnica consente l’aggiornamento dinamico di una pagina web grazie aduno scambio di dati in background fra browser e server che risulta invisibile all’utente.
AJAX combina elementi di HTML, CSS, JavaScript o JScript e XML o JSON,permettendo la manipolazione del DOM e dell’oggetto XMLHttpRequest o iFrame.
Gli ultimi due oggetti citati, forniti da API (Application Programming Interface)utilizzate da JavaScript, consentono il vero e proprio passaggio di dati in modo asin-crono tramite delle richieste HTTP, quindi aggiornando dinamicamente una paginasenza ricaricarla per intero.[8]
3.3.2 IFrame Player API
L’IFrame (inline frame) e un elemento HTML che consiste in un frame ancoratoall’interno della pagina. Viene, comunemente, utilizzato per mostrare il contenuto diuna pagina web all’interno di un riquadro nella pagina principale.
L’IFrame Player API, in particolare, permette di incorporare un video playerdi YouTube in un sito web e di controllarlo tramite JavaScript. Rispetto ad unaPlayer API Flash, offre il vantaggio di caricare i contenuti all’interno di un tag
CAPITOLO 3. TECNOLOGIE UTILIZZATE 15
<iframe> consentendo a YouTube di fornire un player HTML5 anziche un playerFlash per i dispositivi mobili con non lo supportano.
Per usufruire dell’API, l’utente finale deve utilizzare un browser che supporti lafunzione postMessage di HTML5 e la pagina web deve implementare la funzioneonYouTubeIframeAPIReady di JavaScript. Questa funzione viene chiamata quandola pagina termina il download di JavaScript per la Player API, che consente di usarel’API sulla pagina; in questo modo la funzione puo creare gli oggetti player che devonoessere visualizzati al caricamento della pagina.[9]
Con dei comandi JavaScript si puo, quindi, gestire l’aspetto e lo stato del player,cio risulta fondamentale per gestire la riproduzione e la sincronizzazione con i varielementi del sito. I comandi piu importanti per il progetto sono:
• new YT.Player che crea il player da inviare all’IFrame, contiene i parametriestetici e l’identificativo del video di YouTube da caricare
• playVideo, pauseVideo e stopVideo che gestiscono la riproduzione del player
• seekTo che consente di passare ad un punto specifico del video
• getPlayerState che restituisce lo stato attuale del player con un numero da -1 a5 (unstarted, ended, playing, paused, buffering, video cued)
• getCurrentTime e getDuration che restituiscono il tempo trascorso e la duratadel video in secondi
3.4 CSS
CSS, acronimo di “Cascading Style Sheet”, e un linguaggio usato per definire laformattazione di documenti HTML, XHTML e XML ad esempio i siti web e relativepagine web. Le regole per comporre il CSS sono contenute in un insieme di direttive(Recommendations) emanate a partire dal 1996 dal W3C.[10]
L’introduzione del CSS si e resa necessaria per separare i contenuti delle pagineHTML dalla loro formattazione e permettere una programmazione piu chiara e fa-cile da utilizzare, sia per gli autori delle pagine stesse sia per gli utenti, garantendocontemporaneamente anche il riutilizzo di codice ed una sua piu facile manutenzione.
L’obiettivo principale e quello di plasmare l’aspetto delle pagine web e di separarela gestione dei contenuti dalla gestione della formattazione; prima dell’introduzionedi questo linguaggio erano tre le problematiche:
• Il primo problema e costituito dalla lunghezza dei tag proprietari, ovvero nonaderenti agli standard ma di proprieta di Netscape Navigator, Internet Explorer,o altri browser utilizzati in quel periodo. Questi tag rendevano la pagina piupesante.
CAPITOLO 3. TECNOLOGIE UTILIZZATE 16
• Il secondo problema risiede nella mancanza di logica del codice HTML checomporta anche del lavoro aggiuntivo da parte del browser.
• Il terzo problema, con il passare degli anni, diventa la mancanza di compatibilitacon i nuovi computer palmari e gli smartphone.
Nel 1996 il W3C emano le specifiche CSS 1 che permise di separare il contenuto dallaformattazione attraverso un codice separato utilizzando gli attributi class e id. Eranoun’efficace soluzione al primo problema perche riducevano notevolmente le dimensionidelle pagine, risolvevano parzialmente il secondo problema perche presentavano ancoraqualche mancanza che costringeva a ricorrere ai tag HTML, ma, naturalmente, nonprendevano in considerazione il terzo problema.
Nel 1998 il W3C pubblico le specifiche CSS 2 e nel 2004 le specifiche CSS 2.1 perrisolvere principalmente il terzo problema e definitivamente il secondo.
Nel 2014, le specifiche CSS 3 che sono costituite da 5 sezioni separate, dette moduli.I CSS 3 dovrebbero presentare soluzioni per la correzione di bug riguardanti InternetExplorer e alcune migliorie estetiche per gli sfondi e per i bordi arrotondati.[?]
Il codice CSS nelle pagine web puo essere inserito in diversi modi:
• External, viene associato un link di un file CSS nel tag <head> del documento.
• Internal, vengono inserite le dichiarazioni CSS in un tag <style> nel <head> deldocumento.
• Inline, vengono inserite le dichiarazioni CSS direttamente nel tag di cui si vuolecambiare la formattazione.
Una proprieta fondamentale di questo linguaggio, da cui deriva la denominazione“Cascading”, e la risoluzione dei conflitti in caso di inserimento di dichiarazioni indiversi stili, viene data la precedenza a cascata allo stile inline, internal, external e,per ultimo, il default del browser.
Un foglio di stile viene strutturato come una sequenza di regole composte da unselettore e un blocco di dichiarazioni; un selettore e un predicato che permette diselezionare uno o piu elementi del documento HTML, una dichiarazione e una coppiaproprieta/valore.
3.5 PHP
PHP, acronimo di “PHP: Hypertext Preprocessor” (originariamente “Personal HomePage”), e un linguaggio di scripting interpretato, concepito per la programmazionedi pagine web dinamiche. Attualmente e principalmente utilizzato per sviluppare
CAPITOLO 3. TECNOLOGIE UTILIZZATE 17
applicazioni web lato server, ma puo essere usato anche per scrivere script a riga dicomando o applicazioni stand-alone con interfaccia grafica.
Fu creato nel 1994 ad opera di Rasmus Lerdorf, ma solo dalla seconda versione,riscritta in C, poteva essere integrata nelle pagine HTML. Nel 1998 fu sviluppatala terza versione (PHP 3.0) con una straordinaria estensibilita, la connettivita aidatabase e il supporto iniziale per il paradigma a oggetti. L’ultima versione in corsodi sviluppo e la settima.[11]
Gli script PHP possono essere inseriti nelle pagine HTML per produrre i lorooutput, infatti e definito HTML-embedded. Il web server riconosce le pagine PHP,distinguendole da quelle statiche grazie all’estensione del file .php, e richiama l’inter-prete specifico; mentre il client vede solamente il codice HTML generato dallo script;il codice viene, tipicamente, inserito all’interno di un tag speciale:
<?php ... ?>
La sintassi riprende per molti versi quella del linguaggio C, infatti definisce lefunzionalita tipiche dei linguaggi di programmazione ad alto livello ed e debolmentetipizzato. Il grosso vantaggio risulta la capacita di interfacciarsi con molti DBMS(DataBase Management System) come MySQL e molti web server come Apache.
Capitolo 4
Descrizione del sistema
4.1 Creazione delle mappature
Il sistema originale si serve di un file XML codificato nel formato IEEE 1599 con delletracce audio mappate temporalmente e graficamente.
Per inserire le mappature relative ad un video di YouTube viene scaricato il video,per essere aperto nel Framework di IEEE 1599, che puo essere riprodotto come unasemplice traccia audio a cui si associano i timing con l’utilizzo del plugin AudioMapper. Le mappature grafiche si creano con il Graphic Mapper in cui vengonoaperte le immagini che compaiono sul video, esse vengono ricavate con programmiappositi o con semplici catture dei vari istanti.
Figura 6: Graphic Mapper 2.0
18
CAPITOLO 4. DESCRIZIONE DEL SISTEMA 19
L’unica differenza con le normali mappature e che, nel caso di una mappatura gra-fica di un video, e necessario distinguerla perche per un determinato video deve esister-ne una soltanto; nello specifico, e stata utilizzata una descrizione specifica del gruppodi istanze grafiche (attributo description nell’elemento graphic instance group).
4.2 Incorporamento del player di YouTube
L’elemento che permette la riproduzione del video e l’IFrame e viene caricato tra-mite un codice asincrono utilizzando uno script JavaScript. Questo elemento vienesostituito ad un blocco <div> tramite un altro script in cui vengono, successivamente,impostati i parametri del player. Prima della creazione del player risulta fondamentalerecuperare il codice identificativo dello specifico video di YouTube che viene mostratonell’URL attraverso un’analisi delle stringhe contenute nel file XML: questa opera-zione e garantita se nella mappatura audio del video si utilizza come file name l’URLdel video da caricare.
Tramite un script il sistema riconosce se la traccia “attiva” correntemente e unvideo di YouTube, e in questo caso, modifica i fogli di stile (CSS) mostrando il playero nascondendolo se non e selezionata. Inoltre, allo stesso modo, consente di gestirele varie funzioni associate al player permettendo il controllo, da parte dell’utente, delvideo utilizzando i comandi del sistema originale.
4.2.1 Creazione del player
Nello specifico, la creazione del player avviene seguendo tre fasi:
1. Viene creato un tag <div> per identificare la posizione in cui l’IFrame API inse-rira il video player nella pagina. La funzione che crea l’oggetto player identifica iltag <div> tramite l’id per garantire che l’API collochi l’elemento <iframe> nellaposizione corretta. In particolare, l’IFrame API sostituisce il tag <div> con iltag <iframe>.
2. Un particolare script consente di caricare il codice JavaScript dell’IFrame PlayerAPI. Nel progetto viene utilizzata la modifica DOM per scaricare il codice del-l’API e assicurare che il codice venga recuperato in modo asincrono. L’attributoasync del tag <script>, che consente anche i download asincroni, non e ancorasupportato in tutti i browser moderni.
3. La funzione onYouTubeIframeAPIReady viene eseguita non appena viene sca-ricato il codice della Player API. Questa parte del codice definisce la variabileglobale YTplayer, che fa riferimento al video player che si deve incorporare, ela funzione crea quindi l’oggetto video player.[9]
CAPITOLO 4. DESCRIZIONE DEL SISTEMA 20
Una volta creato l’oggetto vengono gestiti i parametri che riguardano l’aspetto eil funzionamento del player, nel progetto sono di fondamentale importanza i valoridi altezza e larghezza del player, il codice identificativo del video da riprodurre ei playerVars che riguardano la rimozione dei video correlati e la disattivazione deicontrolli standard di YouTube e da tastiera. I controlli vengono disabilitati percheinterferirebbero con i veri controlli del sistema generale.
4.3 Interattivita del player di YouTube
Il sistema, durante la riproduzione del video di YouTube, garantira lo stesso funzio-namento della normale esecuzione di semplici tracce audio, quindi con tutti i processiinterattivi riguardanti le partiture e le reti di Petri.
Figura 7: Player di YouTube interattivo
La funzionalita aggiuntiva del player di YouTube per l’utente e l’interazione diret-ta sul video che sfrutta lo stesso sistema del modulo in cui risiedono le partiture: alplayer viene sovrapposto un elemento <canvas> che permette di evidenziare la nota(o le note) corrente o selezionare una nota a piacimento, se e presente una mappa-tura grafica specifica. Queste funzioni sono sviluppate da uno script apposito che sidifferenzia leggermente da quello originale per il trattamento della tela sulle partiture.
Capitolo 5
Conclusioni
Il prototipo predispone, quindi, i mezzi per l’utente che gestisce il sito (o il databasedi riferimento) e per l’utente che visita il sito.
Per il gestore viene messa a disposizione la possibilita di caricare un video diYouTube a scelta, semplicemente effettuando le mappature grafiche e le mappatureaudio e modificando in maniera adeguata gli elementi del file XML riguardanti il video(come gia citato nel capitolo 4).
Per l’utente visitatore del sito colloca delle tracce audio o video (o YouTube video)che possono essere scelte per la riproduzione e, durante cio, il player puo essere gestitoin modo interattivo attraverso la pressione delle note sul video, delle note sullo spartitoo di un nodo della rete di analisi. Inoltre, l’utente puo, semplicemente, monitorarela mappatura dei vari eventi musicali sul video, sullo spartito o sulla rete durante lariproduzione della traccia scelta.
L’obiettivo a cui punta questo progetto e quello di aumentare le capacita e leinterazioni fra il formato IEEE 1599 e le infrastrutture che circondano l’audio e lamusica, in particolare con YouTube, per portare un utente comune ad un approcciopiu approfondito, quindi multistrato, e soprattutto piu attivo rispetto a cio che si staascoltando.
Grazie al lavoro svolto e stato possibile approfondire le potenzialita e le peculiaritadel formato IEEE 1599, di HTML5 e di conoscere uno dei mezzi creati da Google pergestire i suoi sistemi che in questo caso si tratta dell’IFrame Player API per gestireil player di YouTube all’interno di una propria pagina web.
Attualmente in questa struttura puo essere inserito un solo video riferito alla piat-taforma di YouTube con una sola associazione audio ed un solo gruppo di associazionigrafiche. Nello specifico il video ideale e un video che mostra uno spartito statico conun classico volta-pagina oppure un video di un’esibizione per cui, pero, non puo esserecreata la mappatura grafica, ma solo quella audio/temporale.
21
CAPITOLO 5. CONCLUSIONI 22
5.1 Sviluppi futuri
Uno dei successivi sviluppi di questo progetto potrebbe essere quello di garantire lapresenza di piu di un video di YouTube da poter selezionare per uno stesso brano, inmodo tale da avere elementi di diverso tipo, come un video di un concerto e un videodello spartito. Per fare cio e necessario:
• organizzare una struttura dati che riconosca quale mappatura audio e qualemappatura grafica e riferita ad un determinato video;
• studiare un modo per salvare le informazioni nel file XML nella maniera piuadeguata;
• modificare la creazione del player permettendo il caricamento di una playlistpersonalizzata che rispondera a delle funzioni specifiche, come lo spostamentoda un video ad un altro.
Un ulteriore passo avanti potrebbe essere quello di creare una mappatura ad unspartito dinamico, cioe che scorre continuamente nel video. Ma per creare un sistemasimile bisognerebbe realizzare un’estensione di quella che e la normale memorizzazio-ne delle mappature grafiche e, di conseguenza, un plugin che permetta l’associazionedi queste informazioni aggiuntive. Un approccio differente, potrebbe essere quello diagire soltanto sul codice JavaScript e tentare di sincronizzare graficamente le mappa-ture attraverso un calcolo della velocita dello scorrimento della partitura presente nelvideo.
Appendice A
Codice
Il codice del sito e strutturato da un file principale chiamato index.php che all’internorichiama diversi script JavaScript che hanno dei compiti specifici a seconda dei modulidella pagina da trattare:
index.php
<script type=” text / j a v a s c r i p t ” src=” s c r i p t s / i e e e1599 / u t i l s . j s ”> </ script><script type=” text / j a v a s c r i p t ” src=” s c r i p t s / i e e e1599 /IEEE1599 . j s ”> </ script><script type=” text / j a v a s c r i p t ” src=” s c r i p t s / i e e e1599 /MXMedia . j s ”> </ script><script type=” text / j a v a s c r i p t ” src=” s c r i p t s / i e e e1599 /MXSeekbar . j s ”> </ script><script type=” text / j a v a s c r i p t ” src=” s c r i p t s / i e e e1599 /MXContent . j s ”> </ script><script type=” text / j a v a s c r i p t ” src=” s c r i p t s / i e e e1599 /MXGraphics . j s ”> </ script><script type=” text / j a v a s c r i p t ” src=” s c r i p t s / i e e e1599 /MXGraphicsControls . j s ”> </ script><script type=” text / j a v a s c r i p t ” src=” s c r i p t s / i e e e1599 /MXVideo . j s ”> </ script><script type=” text / j a v a s c r i p t ” src=” s c r i p t s /menu . j s ”> </ script><script type=” text / j a v a s c r i p t ”> <?php inc lude ( ” s c r i p t s / index . j s ” ) ; ?> </ script><script type=” text / j a v a s c r i p t ” src=”MXPetriNets . j s ”> </ script><script type=” text / j a v a s c r i p t ” src=”drawNet . j s ”> </ script><script type=” text / j a v a s c r i p t ” src=” L i b r e r i e / c a n v a s u t i l i t i e s . j s ”> </ script><script type=” text / j a v a s c r i p t ” src=” L i b r e r i e / k iwi . j s ”> </ script><script type=” text / j a v a s c r i p t ” src=” L i b r e r i e / curve . j s ”> </ script><script type=” text / j a v a s c r i p t ” src=” fun z i on i . j s ”> </ script><script type=” text / j a v a s c r i p t ” src=” se tP l a c e s . j s ”> </ script><script type=” text / j a v a s c r i p t ” src=” se tS t a t e . j s ”> </ script><script type=” text / j a v a s c r i p t ” src=”setJump . j s ”> </ script><script type=” text / j a v a s c r i p t ” src=” s c r i p t s / i e e e1599 /MXPlayer . j s ”> </ script>
<script id=” iFrameScr ipt ”>/∗ c a r i c a i l c od i c e as inc rono de l l ’ iFrame API ∗/var tag = document . createElement ( ’ s c r i p t ’ ) ;tag . s r c = ” https : //www. youtube . com/ i f r ame ap i ” ;var f i r s t S c r i p t I d = document . getElementById ( ” iFrameScr ipt ” ) ;f i r s t S c r i p t I d . parentNode . i n s e r tB e f o r e ( tag , f i r s t S c r i p t I d ) ;
</ script>
23
APPENDICE A. CODICE 24
Fondamentale l’aggiunta dell’ultimo script citato che permette il caricamento delcodice asincrono. Sempre nel file principale viene impostata la struttura che ospiterail player di YouTube e la relativa tela:
index.php
<canvas id=”videoCanvas” width=”960” height=”600”> </ canvas><div id=”YTplayer”> </div>
Una volta predisposta la struttura, nello script index.js viene ricavato l’id del videoe viene creato l’oggetto YTplayer da inserire nel blocco <div> appena inizializzato:
index.js
/∗ l e ggo l ’ Id de l v ideo dal f i l e name d e l l a t rack ∗/f o r ( var i = 0 ; i < audioKeys . l ength ; i++) {
i f ( audioKeys [ i ] . s tartsWith (” http ”) ) {var indexVideoId = audioKeys [ i ] . s earch (”v=”) + 2 ;v ideoId = audioKeys [ i ] . s ub s t r i ng ( indexVideoId ) ;
}}var canvasHeight = document . getElementById (” videoCanvas ” ) . he ight ;var canvasWidth = document . getElementById (” videoCanvas ” ) . width ;/∗ crea l ’ iFrame e i l v ideo p laye r dopo avere s c a r i c a t o i l c od i c e ∗/YTplayer = new YT. Player ( ’ YTplayer ’ , {
he ight : canvasHeight ,width : canvasWidth ,p layerVars : {
’ c on t ro l s ’ : 0 ,’ d i sab lekb ’ : 1 ,’ r e l ’ : 0
} ,v ideoId : videoId ,
} ) ;
In MXContent.js vengono modificate le principali funzioni che gestiscono e permet-tono la riproduzione della traccia audio. In questo caso, vengono estesi i compiti diqueste funzioni per permettere al player di gestire anche un video di YouTube, gliesempi principali sono:
MXContent.js
t h i s . i sP l ay i ng = func t i on ( ) {i f ( f i l ename . startsWith (” http ”) )
re turn (YTplayer . g e tP laye rSta t e ( ) != 2 ) ;r e turn ( ! streams [ ” h i ” ] . paused ) | | ( ! streams [ ” l o ” ] . paused ) ;
}
APPENDICE A. CODICE 25
t h i s . g e tPo s i t i on = func t i on ( ) {i f ( f i l ename . startsWith (” http ”) )
re turn YTplayer . getCurrentTime ( ) ;r e turn streams [ qua l i t y ] . currentTime ;
}
t h i s . getDurat ion = func t i on ( ) {i f ( f i l ename . startsWith (” http ”) )
re turn YTplayer . getDurat ion ( ) ;r e turn streams [ ” l o ” ] . durat ion ;
}
t h i s . play = func t i on ( ) {i f ( f i l ename . startsWith (” http ”) )
re turn YTplayer . playVideo ( ) ;streams [ qua l i t y ] . p lay ( ) ;
}
t h i s . pause = func t i on ( ) {i f ( f i l ename . startsWith (” http ”) )
re turn YTplayer . pauseVideo ( ) ;streams [ qua l i t y ] . pause ( ) ;
}
t h i s . seek = func t i on seek ( seekTime ) {i f ( f i l ename . startsWith (” http ”) )
YTplayer . seekTo ( seekTime ) ;e l s e {
i f ( streams [ ” h i ” ] . readyState > 0)streams [ ” h i ” ] . currentTime = seekTime ;
i f ( streams [ ” l o ” ] . readyState > 0)streams [ ” l o ” ] . currentTime = seekTime ;
e l s esetTimeout ( func t i on ( ) { seek ( seekTime ) ; } , 1 000 ) ;
}}
La funzione fondamentale del sistema e la funzione chiamata update presente nel fileMXPlayer.js che ha il compito di controllare e di attivare diversi moduli ad ogniintervallo di tempo (in questo caso, fissato a 10 ms). Cio permette al sistema diapparire sempre in attivita, quindi, di renderlo dinamico:
MXPlayer.js
/∗ chiamata a l l ’ i n i z i o e ad ogni i n t e r v a l l o ( i n t e r v a l ) d i tempo ∗/func t i on update ( ) {
mxMedia . update ( ) ;var events = mxMedia . getCurrentEvents ( ) ;mxSeekbar . update ( ) ;i f ( base . i sP l ay i ng ) {
playeOn = true ;mxPetriNets . update ( events ) ;mxGraphics . update ( events ) ;i f ( typeo f mxVideo . update !== ”undef ined ”) {
mxVideo . update ( events ) ;
APPENDICE A. CODICE 26
}} e l s e {
playeOn = f a l s e ;mxPetriNets . update ( events ) ;mxGraphics . update ( nu l l ) ;i f ( typeo f mxVideo . update !== ”undef ined ”) {
mxVideo . update ( nu l l ) ;}
}i f ( ! base . i sP l ay i ng )
base . stop ( ) ;timeoutID = setTimeout ( update , i n t e r v a l ) ;
}
All’interno di questa funzione vengono richiamate altre update che sono specifiche diMXMedia.js,MXSeekbar.js, MXGraphics.js e MXVideo.js.In particolare in MXMedia.js viene, soltanto, aggiunto un controllo per mostrareo nascondere il player YouTube a seconda della traccia selezionata; invece, i fileMXGraphics.js e MXVideo.js hanno il compito di “disegnare” sulla tela i rettangoliche evidenziano le note, con la differenza che il primo file e riferito al modulo dellapartitura, mentre il secondo e riferito alla tela sovrapposta al player di YouTube:
MXVideo.js
t h i s . update = func t i on ( events ) {var img = imgs . getActiveImage ( ) ;i f ( doc . g r aph i c In s t anc e s [ t h i s . currentScoreName ] . l ength == 0 | | img == nu l l ) {
context . f i l l S t y l e = ”#CCCCCC” ;context . f i l l R e c t (0 , 0 , canvas . width , canvas . he ight ) ;r e turn ;
}context . c l ea rRec t (0 , 0 , canvas . width , canvas . he ight ) ;context . f i l l S t y l e = base . f i l l S t y l e ;context . l ineWidth = base . l ineWidth ;context . s t r o k eS t y l e = base . s t r o k eS ty l e ;var mouseEvents = doc . g raph i c In s t anc e s [ base . currentScoreName ]
[ base . currentPageIndex ] . f indGraphicEvents (mousePos . x , mousePos . y ) ;f o r ( var i in mouseEvents )
drawGlyphs (mouseEvents [ i ] , f a l s e ) ;i f ( events == nu l l )
r e turn ;/∗ trova l a pagina co r r en t e ∗/var evtPage = −1;f o r ( var i = 0 ; i < doc . g r aph i c In s t ance s [ base . currentScoreName ] . l ength ; i++) {
f o r ( var j = 0 ; j < events . l ength ; j++)i f ( doc . g r aph i c In s t anc e s [ base . currentScoreName ] [ i ] .
graphicEvents [ events [ j ] ] ) {evtPage = i ;break ;
}i f ( evtPage != −1)
break ;}i f ( evtPage != −1 && evtPage != base . currentPageIndex )
APPENDICE A. CODICE 27
goToPage ( evtPage , f a l s e ) ;f o r ( var i in events ) {
/∗ per g e s t i r e g l i e v en t i con s u f f i s s o dup l i c a t ed ∗/var o r i g i na lEven t = events [ i ] . r e p l a c e (” dup l i c a t ed ” , ” ” ) ;i f ( doc . a l lHash [ o r i g i na lEven t ] == undef ined )
cont inue ;var vo i c e = doc . a l lHash [ o r i g i na lEven t ] . vo i c e ;i f ( ! vo i c e )
currentEvents [ ” g l o b a l ” ] = events [ i ] ;e l s e
currentEvents [ vo i c e ] = events [ i ] ;}f o r ( var i in doc . v o i c e s )
drawGlyphs ( currentEvents [ doc . v o i c e s [ i ] ] , t rue ) ;} ;
f unc t i on drawGlyphs ( evtName , f i l l ) {var r e c t s = doc . g r aph i c In s t ance s [ base . currentScoreName ]
[ base . currentPageIndex ] . graphicEvents [ evtName ] ;f o r ( var i in r e c t s ) {
var x = r e c t s [ i ] . x0 ∗ r a t i o . x ;var y = r e c t s [ i ] . y0 ∗ r a t i o . y ;var w = r e c t s [ i ] . x1 ∗ r a t i o . x − x ;var h = r e c t s [ i ] . y1 ∗ r a t i o . y − y ;i f ( f i l l ) {
i f ( r e c t s [ i ] . h i gh l i gh tCo l o r ) {var f i l lBa ckup = base . f i l l S t y l e ;context . f i l l S t y l e = r e c t s [ i ] . h i gh l i gh tCo l o r ;context . f i l l R e c t (x , y , w, h ) ;context . f i l l S t y l e = f i l lBa ckup ;
}e l s e
context . f i l l R e c t (x , y , w, h ) ;}e l s e
context . s t rokeRect (x , y , w, h ) ;}
}
Bibliografia
[1] Lucas Matney, YouTube has 1.5 billion logged-in monthly userswatching a ton of mobile video. https://techcrunch.com/2017/06/22/
youtube-has-1-5-billion-logged-in-monthly-users-watching-a-ton-of-mobile-video/,2017.
[2] IEEE P1599 Working Group, IEEE Draft Recommended Practice for Definitionof a Commonly Acceptable Musical Application Using the XML Language. http://ieeexplore.ieee.org/servlet/opac?punumber=4432357, 2008.
[3] Luca A. Ludovico, Encoding Music Information. http://www.ludovico.net/
download/papers/WILEY2012_cap2.pdf, 2012.
[4] https://github.com/music-encoding/, 2018.
[5] Joe Berkovitz, MNX Proposal Overview, Living Document. https://w3c.github.
io/mnx/overview/, 2017.
[6] Emil A. Eklund, Canvas in IE, Emil’s Chronicle. http://me.eae.net/archive/
2005/12/29/canvas-in-ie/, 2005.
[7] Javascript Caracteristicas, Manual Javascript. https://s3.amazonaws.com/
academia.edu.documents/39562117/_ITA__Javascript_manuale.pdf?AWSAccessKeyId=
AKIAIWOWYYGZ2Y53UL3A&Expires=1522236399&Signature=rkeIl55eDjx, 2012.
[8] Introduzione ad AJAX: richieste sincrone ed asincrone. http://www.arcadiaclub.com/progra/introduzione_ajax_xmlhttprequest_sincrono_asincrono.htm, 2013.
[9] Google Developers, YouTube Player API Reference for iframe Embeds. https:
//developers.google.com/youtube/iframe_api_reference?hl=it, 2012, agg. 2016.
[10] Mozilla Developers, Learn to style HTML using CSS. http://www.vor.nu/langlab/bibliog.html, 2017.
[11] Peter Cowburn, History of PHP, PHP Manual. http://php.net/manual/en/
history.php.php, 2018.
28
