APEX, MIDI und das LAUNCHPAD

Transkript

1 Page Designer, Next Generation APEX, MIDI und das LAUNCHPAD Andreas Wismann WHEN OTHERS Entwicklung Coaching Projektplanung

2 warum? 2

3 Andreas Wismann Dipl.-Informatiker (FH) Kaarst (bei Düsseldorf) Klavier seit 1968 (im Alter von 4) Programmierung seit 1978 Datenbanken seit 1983 Web seit 1995 Oracle seit

4 Mein Proberaum 4

5 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

6 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 ) Einen Lautsprecher, der mit dem Computer verbunden ist :-) 6

7 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 7

8 Früher war alles besser... if keycode = 13 then beep() 8

9 Oder doch nicht? Loop beep() until length(input) > 0 9

10 APEX demo: beep 10

11 Wofür beep()? Ungültige Benutzereingaben Wichtige Fehlermeldungen Rückkehr von lang laufenden SQL-Abfragen 11

12 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

13 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

14 Loslegen mit Web MIDI try { navigator.requestmidiaccess().then ( onmidisuccess, onmidifailure ); } catch (e) { console.log( No support for Web MIDI ); } siehe 14

15 MIDI-Daten empfangen requestmidiaccess for all midiaccess.inputs.values() listener onmidimessage schreiben message.data auslesen und coole Sachen machen :-) 15

16 MIDI-Daten senden requestmidiaccess midiaccess.outputs auslesen angeschlossene USB-Geräte an jedem port finden port.send <Befehle, Daten> 16

17 Was ist MIDI? Musical Instrument Digital Interface Serielle 8-bit-Schnittstelle kabelgebunden, 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

18 Mein erster programmierbarer Synthesizer mit MIDI (1983)

19 Mein erster ATARI (1985)

20 und endlich mit MIDI

21 21

22 MIDI DIN Stecker

23 MIDI DIN Stecker 23

24 Typisch: 3 MIDI-Buchsen 24

25 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

26 alle Bedienelemente senden MIDI 26

27 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

28 das Instrument lauscht Hier kommt ein Befehl! Note On Channel 0 Key = 56 Velocity = 99 28

29 MIDI Controller 29

30 MIDI und USB (2005) 30

31 Instrument links steuert Instrument rechts (1 DIN-Kabel) MIDI Out MIDI In 31

32 beide gekoppelt (2 DIN-Kabel) MIDI In MIDI Out MIDI Out MIDI In 32

33 33

34 Wireless MIDI (100 m) 34

35 APEX Demo: Behringer Foot Pedal Controller 35

36 Anwendungsfälle? HTML-Seiten hoch/runterscrollen Bookmarks öffnen Enter-Taste simulieren Industrielle Umgebungen, Messen 36

37 MIDI über USB 37

38 AKAI APCmini

39 AKAI APCmini "Launchpad" 39

40 Tampermonkey

41 Chrome? Tampermonkey. 41

42 AKAI Launchpad im Page Designer 42

43 [ Quellen ] midi.org stackoverflow.com w3schools.com caniuse.com creativejs.com webaudiodemos.com webaudioapi.com/samples 43

44 Web MIDI API Keine Probleme. Immer stabil. 44

45 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

46 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

47 Buchempehlung David Sawyer McFarland 3. Auflage Seiten 41,00 47

48 Vielen Dank! 48