midi sequencer webapp

midi.grid Sequencer app

Meine erste „HTML-Seite“ (Webapp), die mit einer externen Hardware kommuniziert, geht nun online. Ich hatte im ersten Schritt schon einen Step-Sequencer entwickelt, der einen eigenen Sound (sprich den der internen Hardware des Smart Phones) verwendete.

Der neue Sequencer steuert nun über Midi einen externen Klangerzeuger an. 2015 erfuhr ich zum ersten mal davon, dass der Chrome Browser ab Version 43 nun Midi unterstützen wird. Ich war hellauf begeistert und wollte unbedingt ein Midi Projekt – natürlich mobile als Webapp 😉 , ausprobieren. Einen Javascript Synthesizer zu erstellen, der von einem Midi Keyboard (Controller) angesprochen wird, interessiert mich in dem Falle weniger, weil es die schon in Hülle und Fülle gibt. Es sei denn mir würde eine neue Art der Soundbearbeitung einfallen. Somit war klar, einen Javascript Controller erstellen zu wollen. Mobil natürlich sehr praktisch, wenn man sein Smartphone gleich auf sein Keyboard als Steuereinheit legen kann – man also ungebunden von einem sperrigen Desktop Computer ist.

Die App spielt die eingeben Noten in einem Raster entweder von links nach rechts ab oder chaotisch. Man kann die Oktaven verändern, die Geschwindigkeit und Sustain – also die Dauer eines Tons. Über den Midi Button werden Informationen über die verbundene Hardware aufgerufen.

Zur Entwicklung

Meine Arbeitsweise ist agil. Teilweise gestalte ich eine Vorabskizze – bei privaten Projekten habe ich das Layout aber auch oft im Kopf und programmiere meine Vorstellung direkt in CSS. Die App passt sich skalierend an die jeweilige Größe im 16:9 Verhältnis (horizontal oder vertikal) an. Das heißt bei einem 4:3 Tablet passt sich die App mittig ein. Grund ist das quadratische Raster, dass zu wenig Platz für Bedienelemente bei einem 4:3 Format lässt.

Das komplette Raster wird mittels Javascript generiert und anhand der abgefragten Bildschirmgröße prozentual berechnet. Die APP ist in Verwendung der jQuery Javascript Library programmiert worden – inkl. einem Plugin zur Visualisierung der Drehregler, die normalerweise in Statistiken-Auswertungen angewendet werden.

Sequencer unter: mobileworlds.eu

Empfohlen für mobile Android-Geräte.
Über eine spezielle Midi Browser App auch unter iOS verwendbar.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

*