AudioGuides & Hörmi
Was ist ein AudioGuide?
Ein AudioGuide ist eine Audio- oder Videodatei mit Zeitmarken, an denen während der Wiedergabe etwas in der App passieren kann -- ein Symbol leuchtet auf, ein Hinweis-Bubble erscheint, die Ansicht wechselt zur erklärten Welt, eine Aufgabe wird ausgelöst. Der Player zeigt einen schmalen grünen Fortschrittsbalken mit klickbaren Sprung-Markern, jede Marke ein eigenes Lucide-Symbol mit Tooltip.
Die Idee dahinter: jemand erklärt etwas mit ihrer Stimme, und während sie spricht, "tippt" das System für den Hörer auf das, worüber gerade geredet wird. Aus einer Audio-Datei wird dadurch eine geführte Tour -- ohne dass der Hörer mitlesen, mitmachen oder selbst klicken muss.
Drei Anwendungs-Felder, in denen das in Prilog ankommt:
| Feld | Wie es aussieht |
|---|---|
| Hörmi & Mia Audio-Hilfe | Persona-Tour direkt im Header. Kontextuell passend zur aktuellen Seite. |
| Standalone-Tutorials | Eigene AudioGuides pro Bereich -- "So legst du eine Klassenliste an", "So funktioniert der Notfall-Knopf". |
| Lehrgänge | Mehrere AudioGuides als geordnete Sequenz. Ein Onboarding für neue Mitarbeiter, ein Eltern-Einführungskurs, eine Schulungs-Reihe für Schüler. |
TIP
Wer gerade nur "Hörmi" einschalten und Hilfe bekommen will, schaut in Settings → Hilfe & Tipps. Wer eigene AudioGuides bauen will, fängt beim Flows-Hub an, dort gibt's den Knopf "Neuer AudioGuide".
Hörmi & Mia -- die persönliche Audio-Hilfe
Hörmi ist das kleine Kopfhörer-Symbol oben rechts neben dem Avatar. Klick darauf öffnet einen Mini-Player mit einem Dialog zwischen Mia (der Prilog-Adminin) und Hörmi (dem Anfänger), der erklärt, was im gerade sichtbaren Bereich passiert.
Was Hörmi kann
- Erklärt mit einer echten Stimme, nicht mit Text-Boxen.
- Kennt die Welt, in der du gerade bist: auf der Termine-Seite spielt er den Termine-Dialog, im DMS den DMS-Dialog. Welche Audio zu welcher Route gehört, legt der Admin fest (siehe weiter unten).
- Lässt während der Wiedergabe die jeweils erklärte Welt im Sidebar aufleuchten und kann automatisch auf die zugehörige Seite wechseln.
- Pulsiert kurz mit einem grünen Punkt, wenn ein Tutorial verfügbar ist, das du noch nicht gehört hast.
- Kehrt nach dem Audio dorthin zurück, wo du vorher warst.
Wer steuert was
Wer Hörmi nicht möchte, schaltet ihn in Settings → Hilfe & Tipps ab -- das Symbol verschwindet komplett aus dem Header. Die Einstellung ist persönlich: Schüler kann Hörmi behalten, Lehrkraft kann ihn aus haben.
Wer Hörmi-Tutorials für die Schule vorbereitet, ist Admin und kommt ebenfalls über Settings → Hilfe & Tipps: dort gibt es im Admin-Bereich eine Tabelle "Hörmi-Routen" mit der Zuordnung Pfad → AudioGuide. Beispiele:
| Pfad-Pattern | AudioGuide |
|---|---|
/ | Hauptmenü-Tour |
/calendar | Wie funktioniert der Kalender |
/contacts | Kontakte und Familien |
/spaces/* | Wie ein Space funktioniert |
Exakte Pfade gewinnen vor Wildcards. /spaces/abc greift zuerst auf /spaces/* zurück, wenn nichts Genaueres gemappt ist.
INFO
Wenn für eine Route nichts konfiguriert ist, fällt Hörmi auf das Hauptmenü-Tutorial zurück. So fühlt sich der Helfer überall verfügbar an, auch wenn du nur einen Audio-Guide installiert hast.
Eigene AudioGuides bauen
Ein AudioGuide besteht aus zwei Teilen: einer Mediendatei und einer Liste von Cues (Zeitmarken).
Schritt 1: Datei hochladen
Lade eine Audio- oder Videodatei ins DMS hoch -- ins Mein Fach (privat) oder in den Space, in dem das Tutorial leben soll. Unterstützte Formate:
| Audio | Video |
|---|---|
| mp3, m4a, wav, ogg, aac, flac | mp4, webm, mov, m4v |
TIP
Für Tutorials reichen meistens 1-3 Minuten Audio pro Lektion. Längere Aufnahmen ermüden die Hörer, bei kürzeren reicht oft kein Platz für Cue-Marker. Probiere die ersten paar Aufnahmen kurz und unaufgeregt -- zwei Sätze Erklärung, dann Stille zum Schauen.
Schritt 2: AudioGuide öffnen
Klick auf die Datei im DMS -- im Detail-Panel rechts erscheint der primäre Knopf "AudioGuide öffnen" (für Video: "Video-Guide öffnen"). Alternativ findest du alle AudioGuides im Flows-Hub unter "AudioGuides".
Schritt 3: Cues setzen
Auf der Editor-Seite klick "Bearbeiten". Es öffnet sich ein Editor im Audacity-Stil:
- Wellenform der Audiodatei mit der Zeit-Achse.
- Transport: Play/Pause, Stop (zurück zum Anfang), 5s zurück / vor.
- Tempo-Selector 0.75× / 1× / 1.25× / 1.5× -- nützlich beim Cue-Setzen, weil du nicht in Echtzeit hören musst.
- Zoom-Slider -- bei langen Files horizontal streckbar, damit du Marker präzise auf die Sekunde setzen kannst.
Marker erstellst du auf zwei Wegen:
- Per Knopf: spiele die Audio ab, drücke an interessanten Stellen "Cue hinzufügen". Der aktuelle Zeitpunkt wird übernommen, die Dauer ist automatisch die Lücke zur nächsten Cue (max 30 Sekunden).
- Per Drag: Marker in der Wellenform hin- und herziehen verschiebt den Startzeitpunkt; an den Rändern ziehen ändert die Dauer.
Pro Marker bearbeitest du in der Tabelle darunter:
| Feld | Was du einstellst |
|---|---|
| Bei (s) | Sekunde, an der die Cue beginnt. |
| Dauer | Sekunden, in denen die Cue aktiv ist. |
| Icon | Lucide-Symbol für den Marker -- klick öffnet den Picker mit ~45 kuratierten Icons. |
| Label | Tooltip-Text, der beim Hover über dem Marker erscheint. |
| Aktion | Was passiert beim Cue-Start -- siehe Aktions-Typen unten. |
| URL | Action-Ziel -- abhängig vom Aktions-Typ. |
Der orange Punkt am "Speichern"-Knopf zeigt: ungespeicherte Änderungen. Wer die Seite schließt, ohne zu speichern, bekommt eine Browser-Warnung.
Aktions-Typen im Detail
| Typ | Was passiert |
|---|---|
| Nur Highlight | Marker leuchtet grün auf, sonst nichts. |
| Navigieren | Browser geht zur angegebenen URL (intern z. B. /calendar, extern mit https://...). |
| Hinweis-Bubble | Markdown-Text erscheint als Bubble unten rechts mit Schließen-Knopf. |
| Pausieren | Audio pausiert, "Weiter"-Knopf erscheint -- Hörer probiert was aus, klickt dann selbst weiter. |
| Flow starten | Springt in den Flow-Designer-Player mit der angegebenen Flow-ID. |
| Element hervorheben | Ein Element auf der Seite bekommt einen pulsierenden grünen Rahmen. Ziel ist entweder ein CSS-Selektor oder ein data-tour="..."-Attribut. |
WARNING
"Element hervorheben" funktioniert nur, wenn die App-Seite einen passenden Anker bereithält. Aktuell rollen wir das Ankern (data-tour- Attribute) Stück für Stück pro Bereich aus. Wer es jetzt nutzen will: prüf erst, ob das Ziel-Element diese Attribute hat (mit Browser-Inspector).
Lehrgänge -- mehrere AudioGuides als Sequenz
Ein Lehrgang ist eine geordnete Sammlung von AudioGuides. Hörer durchlaufen Lektion 1, dann 2, dann 3, mit Fortschritts-Anzeige und Vollständigkeits-Tracking.
Aufrufen
Der Lehrgangs-Hub liegt unter /audio-guide-courses, im Flows-Hub gibt es den Knopf "Lehrgänge verwalten →".
Anlegen
- Im Lehrgangs-Hub auf "Neuer Lehrgang".
- Titel vergeben.
- In der Lehrgangs-Detail-Seite auf "Bearbeiten", dann "Lektion hinzufügen" -- der AudioGuide-Picker zeigt alle vorhandenen AudioGuides.
- Reihenfolge per Pfeil-hoch / Pfeil-runter ändern.
- Speichern.
Lehrgang spielen
Wer den Lehrgang öffnet, sieht die Liste aller Lektionen mit Numerierung. Erledigte Lektionen tragen ein grünes Häkchen. Klick auf eine Lektion spielt sie -- nach dem Audio-Ende wechselt der Player automatisch nach 1.5 Sekunden zur nächsten Lektion. Wer dazwischen pausieren will, drückt einfach Pause -- der Lehrgang merkt sich beim nächsten Start die zuletzt erreichte Position.
INFO
Im Header steht eine Prozent-Anzeige X% gelernt. Ein Lehrgang gilt als abgeschlossen, wenn alle Lektionen einmal bis zum Ende gehört wurden. Der Fortschritt ist persönlich -- jeder Hörer hat seinen eigenen.
Sichtbarkeit
Beim Anlegen wählt der Ersteller die Sichtbarkeit:
- PUBLIC -- alle Tenant-Mitglieder sehen den Lehrgang.
- SPACE -- nur Mitglieder eines bestimmten Spaces.
AudioGuide-Embed in Texten
Du kannst einen AudioGuide-Player direkt in einen Brief, eine Notiz oder einen Konzept-Baustein einbetten -- der Empfänger sieht den Player inline mit Cue-Markern und kann sofort abspielen.
Einfügen
In Tiptap-Editoren (Konzepte → Baustein "Haltung", Briefe wenn aktiviert) gibt es einen kleinen Kopfhörer-Knopf in der Toolbar. Klick öffnet den AudioGuide-Picker, Auswahl fügt einen Embed-Block an die Cursor-Position.
Wie der Embed aussieht
| Element | Verhalten |
|---|---|
| Header | Titel des AudioGuides + Bleistift-Knopf für Owner zum Standalone-Editor. |
| Play-Knopf + Skip-Cues | Wie der Standalone-Player. |
| Inline-ProgressBar | Schmale Variante mit allen Cue-Markern. |
Der Empfänger kann den Player abspielen, ohne die Seite zu verlassen. Bei Owner-Sicht erscheint ein kleiner Bleistift-Knopf, mit dem du in den Standalone-Editor wechselst.
Public-Share -- AudioGuide nach außen geben
Manchmal soll ein Tutorial auch ohne Login zugänglich sein -- z. B. ein "Erste-Schritte"-Audio für Eltern, die noch nicht in Prilog sind, oder ein Video für die Schul-Webseite.
Share-Link erstellen
Im AudioGuide-Editor (Standalone) auf "Teilen". Der Backend erzeugt einen Slug. Du bekommst eine URL der Form:
https://<dein-tenant>/audio-guide-share/<slug>Optional eine Ablaufzeit setzen -- nach dem Datum funktioniert der Link nicht mehr.
Was der Empfänger sieht
Eine schlanke öffentliche Seite mit:
- Titel des AudioGuides.
- Audio- oder Video-Player.
- ProgressBar mit Markern.
- Liste der Kapitel zum direkten Anspringen.
Kein Prilog-Login, keine Sidebar, kein Hörmi -- nur das Tutorial.
WARNING
Slugs sind das Geheimnis. Wer den Slug hat, kommt rein. Lege keine sensiblen Inhalte als Public-Share an -- für vertrauliche Anleitungen bleibt der AudioGuide im DMS und nutzt die normalen Berechtigungen.
Hit-Counter
Der Backend zählt jeden Aufruf des Slugs. Im Editor siehst du, wie oft ein Public-Link bisher abgerufen wurde -- nützlich, um zu sehen, ob ein Eltern-Tutorial überhaupt geschaut wird.
Video-Guides
Alles, was für AudioGuides gilt, gilt auch für Video. Lade ein mp4/webm/mov ins DMS, klick "Video-Guide öffnen", setze Cue-Marker -- der Player rendert dann ein Video-Element statt nur Audio. Im Editor-Modus zeigt der Wellenform-Editor die Audio-Spur des Videos; Cue-Setzen funktioniert gleich.
INFO
Bei Video-Guides läuft die Auto-Navigation und das Element-Highlight weiter -- wer ein Video-Tutorial ansieht, das auf eine Welt zeigt, wird trotzdem dorthin geführt, sobald die Cue greift.
Datenfluss & Architektur (für Admins / Entwickler)
Wer technisch verstehen möchte, was hinter den Kulissen passiert:
| Schicht | Wo es liegt |
|---|---|
| Audio/Video-Datei | DMS -- normales Document mit audio/* oder video/* mimeType. Storage in S3 / MinIO. |
| Cues | Tabelle audio_guide_cues -- pro Document n Zeitmarken mit at, duration, icon, label, action. |
| Hörmi-Routen | Tabelle audio_guide_routes -- pro Tenant Pfad → Document. |
| Lehrgänge | Tabelle audio_guide_collections + audio_guide_collection_members. |
| Fortschritt | Tabelle audio_guide_play_sessions -- pro User+Document, mit Position und Completed-Datum. |
| Public-Share | Tabelle audio_guide_share_links -- Slug + Document + Expiry + Hit-Counter. |
| Player-Komponente | <AudioGuideProgressBar> -- generisch, nimmt Cues + Marker-Map. Wird vom Header (Hörmi), vom Standalone-Player, vom Tiptap-Embed, vom Lehrgangs-Player und von der Public-Page identisch genutzt. |
Die Cue-Liste ist das einzige, was der User aktiv pflegt. Alle anderen Daten sind Nebenprodukte -- Sessions entstehen automatisch, Routes sind Admin-Configs.
Wer hilft, wenn etwas nicht funktioniert?
Ein paar häufige Punkte:
- Hörmi-Symbol fehlt: in Settings → Hilfe & Tipps prüfen, ob es eingeschaltet ist.
- Hörmi spielt immer das Hauptmenü, auch auf anderen Seiten: Admin hat noch keine Route-Mappings konfiguriert. Settings → Hilfe & Tipps, Bereich "Hörmi-Routen".
- AudioGuide-Knopf erscheint nicht im DMS: Datei wird nicht als Audio/Video erkannt. Erlaubte Erweiterungen: mp3, m4a, wav, ogg, aac, flac, mp4, webm, mov, m4v.
- Wellenform lädt nicht: Browser hat eventuell ein Format-Problem. Stop und neu laden hilft meistens.
- Public-Share-Link funktioniert nicht: prüfe, ob Ablaufdatum abgelaufen ist; sonst wurde der Link evtl. zurückgezogen.
- Element-Highlight zeigt nichts: Ziel-Element hat keinen passenden Anker (
data-tour-Attribut oder CSS-Selektor). Bei eigenen Tutorials muss das Element der App das Attribut tragen.
Wer als Schulkonto Probleme nicht selbst lösen kann, fragt die Schul-Administration; technische Probleme gehen an den prilog-Support.