Uno step sequencer Lezione 18 Programmazione MIDI (Prof. Luca A. Ludovico)

Obiettivo Realizzare un semplice step sequencer utilizzando la Web MIDI API Programmazione MIDI (Prof. Luca A. Ludovico) 18. Uno step sequencer

Passaggio 1 Disegnare in modo procedurale lo schema via JavaScript utilizzando dei <div> parametrizzando la dimensione orizzontale e verticale attraverso costanti Possibilità migliorativa: rendere modificabili in tempo reale attraverso interfaccia grafica le dimensioni (in tal caso, non andranno usate costanti ma variabili) http://www.ludovico.net/download/materiale_didattico/midi/18_step_sequencer_step1.html Programmazione MIDI (Prof. Luca A. Ludovico) 18. Uno step sequencer

Passaggio 2 Gestire il clic sui singoli div per abilitarli/disabilitarli cambiandone il colore di sfondo (nell’esempio si usano rispettivamente DarkMagenta e Orange) mantenendo allineata una struttura dati (si suggerisce un array bidimensionale) http://www.ludovico.net/download/materiale_didattico/midi/18_step_sequencer_step2.html Programmazione MIDI (Prof. Luca A. Ludovico) 18. Uno step sequencer

Passaggio 3 Gestire dal punto di vista grafico l’avanzamento passo passo, nelle due direzioni Il punto di esecuzione corrente deve essere evidenziato colorando la colonna corrispettiva, mantenendo la differenziazione tra celle evidenziate e non evidenziate Si suggerisce di tenere traccia dello step corrente attraverso un’opportuna variabile http://www.ludovico.net/download/materiale_didattico/midi/18_step_sequencer_step3.html Programmazione MIDI (Prof. Luca A. Ludovico) 18. Uno step sequencer

Passaggio 4 Facendo uso della Web MIDI API, far suonare le celle evidenziate nella colonna corrente nell’esecuzione passo passo Gestire la scelta dell’outport, l’invio dei messaggi di NoteOn e NoteOff, e il Program Change per caricare un timbro (nell’esempio, il Music Box = 10) Scegliere un’associazione tra gli indici di riga e i pitch MIDI (nell’esempio, si è scelta per comodità una scala esatonale discendente con pitch massimo, corrispondente alla riga di indice 0, pari a 72) http://www.ludovico.net/download/materiale_didattico/midi/18_step_sequencer_step4.html Programmazione MIDI (Prof. Luca A. Ludovico) 18. Uno step sequencer

Passaggio 5 Gestire l’avanzamento automatico temporizzato (stile Play / Pause) attraverso le primitive: var myTimer = setInterval(function(){ … }, timeinterval); clearInterval(myTimer); Suggerimento: appoggiarsi alla funzione precedentemente scritta per far suonare la colonna corrente Programmazione MIDI (Prof. Luca A. Ludovico) 18. Uno step sequencer

Possibili migliorie Parametrizzazione delle dimensioni dello schema Miglioramento dell’interfaccia grafica tramite pulsanti, icone, ecc. Possibilità di scelta tra diversi timbri, di associazione tra diverse scale, di variazione del metronomo, ecc. Possibilità di congiungere due note adiacenti (in senso orizzontale) prolungando l’emissione dei suoni. Es.: cella tri-stato (spenta, accesa, accesa e legata con quella accesa precedente, ammesso che esista) Programmazione MIDI (Prof. Luca A. Ludovico) 18. Uno step sequencer