Page Designer, Next Generation APEX, MIDI und das LAUNCHPAD Andreas Wismann WHEN OTHERS Entwicklung Coaching Projektplanung wismann@when-others.com
warum? 2
Andreas Wismann Dipl.-Informatiker (FH) wismann@when-others.com 41564 Kaarst (bei Düsseldorf) Klavier seit 1968 (im Alter von 4) Programmierung seit 1978 Datenbanken seit 1983 Web seit 1995 Oracle seit 1997 3
Mein Proberaum 4
2014: Was ist "Web Audio API"? Web Audio API im Browser Sounddateien abspielen Audio erzeugen Effekte hinzufügen Audio streamen auf das Mikrofon zugreifen 5
Was benötige ich für Web Audio? Web Audio API im Browser Sounddateien abspielen Audio erzeugen Effekte hinzufügen Audio streamen auf das Mikrofon zugreifen Einen modernen Browser ( siehe http://caniuse.com ) Einen Lautsprecher, der mit dem Computer verbunden ist :-) 6
Was benötige ich für Web Audio? try { window.audiocontext = window.audiocontext window.webkitaudiocontext; audiocontext = new AudioContext(); oscillator = audiocontext.createoscillator(); } catch (e) { console.log( No support for Web Audio ); } siehe http://www.html5rocks.com/en/tutorials/webaudio/intro/ 7
Früher war alles besser... if keycode = 13 then beep() 8
Oder doch nicht? Loop beep() until length(input) > 0 9
APEX demo: beep 10
Wofür beep()? Ungültige Benutzereingaben Wichtige Fehlermeldungen Rückkehr von lang laufenden SQL-Abfragen 11
Zwei neue Browser APIs Web Audio API im Browser Web MIDI API Sounddateien abspielen Audio erzeugen Effekte hinzufügen Audio streamen auf das Mikrofon zugreifen MIDI empfangen MIDI senden 12
Welche Browser? Google Chrome / PC (mindestens Version 38) Eingeschaltetes Flag #enable-web-midi (standardmäßig true) In anderen Browsern hilft WebMIDIAPIShim Ein MIDI-fähiges Gerät über USB 13
Loslegen mit Web MIDI try { navigator.requestmidiaccess().then ( onmidisuccess, onmidifailure ); } catch (e) { console.log( No support for Web MIDI ); } siehe https://www.keithmcmillen.com/blog/making-music-in-the-browser-web-midi-api/ 14
MIDI-Daten empfangen requestmidiaccess for all midiaccess.inputs.values() listener onmidimessage schreiben message.data auslesen und coole Sachen machen :-) 15
MIDI-Daten senden requestmidiaccess midiaccess.outputs auslesen angeschlossene USB-Geräte an jedem port finden port.send <Befehle, Daten> 16
Was ist MIDI? Musical Instrument Digital Interface Serielle 8-bit-Schnittstelle kabelgebunden, 31250 bit/s Jede Nachricht hat 4 Bytes für "welcher Kanal" (0-15 => MIDI Channel 1-16 ) In den Demos wird nur MIDI Channel 1 benutzt 17
Mein erster programmierbarer Synthesizer mit MIDI (1983)
Mein erster ATARI (1985)
und endlich mit MIDI
21
MIDI DIN Stecker
MIDI DIN Stecker 23
Typisch: 3 MIDI-Buchsen 24
MIDI Häufige Nachrichtentypen: Note on (Key 0-127, Attack Velocity 0-127) Note off (Key, Release Velocity) Controller Data (Nr, Value 0-127) Program Change (Nr, Value 0-127) Aftertouch Pitch Bend 25
alle Bedienelemente senden MIDI 26
MIDI Das Status Byte ist das einzige mit gesetztem höchsten Bit und besteht aus... 4 bits = MIDI command (like Note On ) 4 bits = MIDI Channel (0-15) Alle Data Bytes können die Werte [0 127] abbilden 27
das Instrument lauscht Hier kommt ein Befehl! 1 0 0 1 0 0 0 0 0 0 1 1 1 0 0 0 0 1 1 0 0 0 1 1 Note On Channel 0 Key = 56 Velocity = 99 28
MIDI Controller 29
MIDI und USB (2005) 30
Instrument links steuert Instrument rechts (1 DIN-Kabel) MIDI Out MIDI In 31
beide gekoppelt (2 DIN-Kabel) MIDI In MIDI Out MIDI Out MIDI In 32
33
Wireless MIDI (100 m) 34
APEX Demo: Behringer Foot Pedal Controller 35
Anwendungsfälle? HTML-Seiten hoch/runterscrollen Bookmarks öffnen Enter-Taste simulieren Industrielle Umgebungen, Messen 36
MIDI über USB 37
AKAI APCmini
AKAI APCmini "Launchpad" 39
Tampermonkey
Chrome? Tampermonkey. 41
AKAI Launchpad im Page Designer 42
[ Quellen ] midi.org stackoverflow.com w3schools.com caniuse.com creativejs.com webaudiodemos.com webaudioapi.com/samples 43
Web MIDI API Keine Probleme. Immer stabil. 44
Stolperfallen Setzen oder Auslesen von Report-Attributen? => After Refresh Dynamic Actions verwenden Brauchen Sie pause or delay in Ihrem JavaScript-Programm? => settimeout (function, nnnn) Viele Ideen, aber keine Ahnung "wie"? => ein gutes Buch über jquery und CSS lesen 45
Wohin mit dem JavaScript? Region Source (conditional oder mit Build Options): => EXPERIMENTELLE Skripte Page JavaScript, Global Page (Page 0): => GETESTETE Skripte Webserver, Shared Components: => PRODUKTIVE Skripte 46
Buchempehlung David Sawyer McFarland 3. Auflage 2014 683 Seiten 41,00 47
Vielen Dank! 48