Re.corder
Begleit-App für ein über Kickstarter finanziertes elektronisches Blasinstrument: Kopplung, Grifflektionen, Songs zum Mitspielen, Duette.
- Rolle
- Flutter-Entwickler in einem kleinen Team: Oberfläche, Lektionen, Duette, Profile und der Griffeditor
- Auftraggeber
- Artinoise
- Zeitraum
- 2020–2024
- Plattformen
- iOS und Android aus einer Flutter-Codebasis
Das Produkt
Der Re.corder ist eine Blockflöte voller Sensoren: Touchflächen auf den Löchern, ein Atemdrucksensor und ein Beschleunigungssensor. Über Bluetooth arbeitet er als MIDI-Controller, hörbar wird er auf dem Smartphone: Die App verwandelt, was man greift und bläst, mit ihrem eigenen Synthesizer in Musik, in jedem von 38 Instrumentenklängen.
In der App lernt man das Instrument auch. Ein erster Start prüft Finger und Atem; Songs laufen als Begleitung mit, während die Noten scrollen und jeder Ton geprüft wird; zwei Instrumente können sich für Duette ein Smartphone teilen; Erfahrungspunkte und Abzeichen zählen mit. Die Einstellungen überschreiben die Grifftabelle, die das Instrument selbst verwendet.
- 34%
- der Commits der App stammen von mir (398 von 1.155)
- 37k
- Zeilen Dart in der App, ohne ihr Bluetooth- und Synthesizer-Plugin
- 7
- Sprachen in der Benutzeroberfläche
- 38
- Instrumentenklänge, die der Re.corder spielen kann
Rundgang
Die App in Aktion
Wählen Sie eine Aufnahme oder springen Sie direkt zu einem Kapitel.
Aufgezeichnet aus dem Code der App in Smartphone-Größe, im Querformat, während ein virtuelles Instrument spielt. Der Ton wird nachträglich aus den Tönen erzeugt, die die App an ihren Synthesizer geschickt hat, mit dem freien Soundfont, auf dem ihre eigene Soundbank basiert.
Funktionen
Ein Instrument, das mit dem Smartphone spricht
01
Kopplung, dann eine erste Lektion
Der Re.corder erscheint als Bluetooth-MIDI-Gerät. Der Schnellstart koppelt ihn und liest dann seine Sensoren aus, während man mitmacht: Jede Note zweier Tonleitern wird grün, sobald die richtigen Löcher abgedeckt sind, und eine Anzeige folgt dem Atemdruck.
02
Songs zum Mitspielen
Man wählt einen Klang und einen Song. Die Begleitung läuft ohne die eigene Stimme, die Noten folgen der Musik, und der gespielte Ton wird mit der Note unter dem Cursor verglichen: grün oder rot auf dem Notennamen und auf dem Fortschrittsbalken, während die Zeichnung der Blockflöte den Griff für den nächsten Ton zeigt. Am Ende des Songs gibt es Erfahrungspunkte und Abzeichen.
03
Zwei Spieler, ein Smartphone
Zwei Instrumente verbinden sich mit demselben Smartphone. Jeder Spieler wählt einen Klang und eine Stimme (gegeneinander auf derselben Melodie oder gemeinsam mit Melodie und Harmonie), und die App bewertet beide.
04
Griffweisen, die sich umschreiben lassen
Welchen Ton das Instrument spielt, entscheidet es anhand einer Grifftabelle, die ihm die App schickt. Standard ist die barocke Griffweise; in den Einstellungen liegen Tabellen für andere Instrumente und eigene Tabellen, die Loch für Loch auf der Zeichnung der Blockflöte bearbeitet werden, die die App überall verwendet; im Schnellstart zeigt dieselbe Zeichnung, welche Löcher die Sensoren als abgedeckt erkennen.
05
Zwei Designs, für Kinder und Erwachsene
Ein Design in Creme und Orange für Kinder und ein dunkles für erwachsene Spieler, gewählt beim ersten Start und später umschaltbar. Die Übungen im Bereich „Learn“ werden freigeschaltet, sobald der Spieler ein Level aufsteigt.
Unter der Haube
So wurde es entwickelt
Bluetooth-MIDI und das Protokoll des Instruments
Die App hält pro Instrument eine Bluetooth-LE-Verbindung und parst das BLE-MIDI, das es per Notification sendet: Noten, den Atem als Control Changes, Program Changes. Alles andere (das Abfragen der Sensoren, das Senden von Grifftabellen und Einstellungen) läuft über ein SysEx-Protokoll mit Bestätigungen über dieselbe Characteristic.
Klang und Noten auf dem Smartphone
Die Töne erzeugt FluidSynth, in den Android-Build kompiliert, mit der freien Soundbank FluidR3 GM, ergänzt um einen eigenen Blockflötenklang; die Begleitung ist ein zweiter Synthesizer, der eine MIDI-Datei ohne die Stimmen der Spieler abspielt. Die Noten liegen als MusicXML vor und werden von OpenSheetMusicDisplay in einer Web-View gezeichnet; die App fragt die Wiedergabeposition ab, um ihren Cursor zu bewegen, und prüft jeden gespielten Ton gegen die Note unter dem Cursor.
Mein Anteil
Der Großteil der Oberfläche in beiden Designs; die Zeichnung der Blockflöte und der Griffeditor; der Schnellstart; der Duett-Modus und die Freundesprofile; Erfahrung, Level und Abzeichen; mit Firebase synchronisierte Konten und Profile; über Firebase verwaltete Neuigkeiten und Video-Tutorials; die Datenschutzeinwilligung, der Datenexport und die Kontolöschung, die europäischen Nutzern zustehen; die Internationalisierung und die Beschriftungen für die Barrierefreiheit. Die Bluetooth-, SysEx- und Synthesizer-Schichten hat der Rest des Teams gebaut.
Eine Live-App aufzeichnen
Eine virtuelle Blockflöte und der nachträglich wieder eingesetzte Ton
Ohne das Instrument kann die App wenig, und ihr Klang stammt aus nativem Code, den ein Browser nicht ausführen kann. Deshalb verwenden die Aufnahmen eine Kopie des App-Codes, in der das Instrument simuliert und der Ton nach jeder Aufnahme erzeugt wird.
- 1
Die App, gebaut für den Browser
Ein Flutter-Web-Build des App-Codes in Smartphone-Größe, im Querformat, der glaubt, auf Android zu laufen. Firebase wird durch die In-Memory-Fakes aus seinen Testbibliotheken ersetzt; ein Schalter in der URL lädt einen ersten Start oder einen wiederkehrenden Spieler.
- 2
Ein virtueller Re.corder
Das Bluetooth-Plugin bekommt eine Web-Hälfte, die wie das Instrument antwortet: Sie gibt sich zu erkennen, lässt sich koppeln, stellt den MIDI-Dienst bereit, beantwortet die Sensorabfragen und sendet BLE-MIDI, wenn sie spielt. Während eines Songs spielt sie ihre Stimme im Takt, mit Atem und ein wenig menschlichem Timing; in den Lektionen bekommt sie gesagt, was sie spielen soll.
- 3
Für die Demo arrangierte Songs
Die Arrangements des Unternehmens bleiben außen vor. Ein Skript erstellt eine kleine Bibliothek gemeinfreier Melodien (die Melodie, eine zweite Stimme für Duette, eine Begleitung), sowohl als MIDI, das die App abspielt, als auch als MusicXML, das sie zeichnet.
- 4
Der Ton, nach der Aufnahme erzeugt
Der Browser-Build ist stumm: Er protokolliert jeden Ton, den die beiden Synthesizer der App gespielt hätten, mit seinem Zeitpunkt. Nach jeder Aufnahme rendert das Aufnahmeskript dieses Protokoll mit FluidSynth und dem freien Soundfont FluidR3 GM (demselben, auf dem die Soundbank der App aufbaut) und legt den Ton bildgenau synchron unter das Video.
Logo, Oberfläche und Illustrationen stammen aus der App. Die Songs, die Spieler und ihre Profile sind Beispielinhalte, die für dieses Portfolio erstellt wurden, und der Ton ist der Standard-Soundfont FluidR3 GM, ohne die angepasste Blockflöte der App.
Hier gibt es keine Demo zum Ausprobieren: Re.corder ist ein Live-Produkt, deshalb zeigt diese Seite Aufnahmen mit Beispielinhalten.
Alle Bildschirme
Alle Screenshots im Überblick
WillkommenErster Start: Der Schnellstart beginnt mit der Kopplung. KopplungDer Re.corder gibt sich als Bluetooth-MIDI-Gerät zu erkennen. GrifflektionDie Löcher leuchten über die Touchsensoren auf; jede Note der Tonleiter wird grün, sobald sie gegriffen ist. AtemlektionDer Drucksensor, live ausgelesen, während der Spieler bläst. StartseiteMit Übungen lernen, Songs spielen oder zu zweit spielen. InstrumentenklängeDer Re.corder spielt jeden Klang des Synthesizers, von der Blockflöte bis zum Cello. SongsSongs nach Genre und Schwierigkeit (Beispielbibliothek in der Demo). NotenDie Noten, mit dem Griff für den nächsten Ton. MitspielenRichtige Töne werden grün, auf der Note und auf dem Fortschrittsbalken. ErgebnisErfahrungspunkte und Abzeichen am Ende eines Songs. Ein zweites InstrumentFür den Duo-Modus müssen zwei Re.corder mit demselben Smartphone verbunden sein. Duo-ModiGegeneinander, miteinander oder frei. Je ein KlangJeder Spieler wählt einen Klang. Ein DuettBeide Stimmen auf einem Notenblatt, jede wird mit dem Spiel ihres Spielers abgeglichen. ErgebnisBeide Spieler sammeln Erfahrung. GriffweisenStandardmäßig barock; eigene Tabellen und die Griffweisen anderer Instrumente werden an den Re.corder gesendet. EinstellungenDesigns, Schnellstart und die MIDI-Einstellungen des Instruments. LernenÜbungen werden mit dem Level des Spielers freigeschaltet. Pro-DesignEin dunkles Design für erwachsene Spieler, gewählt beim ersten Start. Pro-Design: NotenDieselben Bildschirme, neu gestaltet.
Nächste Fallstudie
Indennizzo Diretto →