Noch keine Playlist-Datei geladen.
Lädt alle Playlists als eine JSON-Datei herunter, die du hier wieder laden oder am PC weiterbearbeiten kannst.
Bedienungsanleitung für Fitness Prompter: eine im Browser laufende App, die Playlists mit zeitgesteuerten Übungs-Cues über lokal gespeicherte Audiodateien abspielt.
Die App spielt Playlists ab und zeigt dabei passend zur Musik an, welche Übung als Nächstes dran ist – wie ein Teleprompter, nur für dein Training. Drei Begriffe tauchen überall in der App auf:
Audiodateien werden lokal im Browser gespeichert. Fehlt eine Datei, kann sie entweder manuell ausgewählt oder – wenn eingerichtet – automatisch von deinem eigenen Server nachgeladen werden (siehe Abschnitt "Automatisches Nachladen").
Die Startseite zeigt deine Playlists ganz oben, direkt erreichbar ohne Scrollen – Einrichtung (Playlist-Datei laden, Audiodateien, Editor) folgt weiter unten, da sie normalerweise nur einmalig nötig ist.
Wichtig: Der Dateiname im Feld "Audiodatei" einer Playlist muss exakt dem Namen der ausgewählten Audiodatei entsprechen (Groß-/Kleinschreibung inklusive), damit die App sie wiederfindet.
| Element | Wirkung |
|---|---|
| Große Textanzeige (Mitte) | Zeigt den aktuellen Cue bzw. den Track-Titel, solange kein Cue aktiv ist |
| Banner "Nächste Cue" | Zeigt die kommende Cue und einen Countdown bis dahin |
| Zeitleiste unter der Anzeige | Verstrichene / verbleibende Zeit des aktuellen Tracks; per Klick oder Ziehen (Scrubben) springst du an eine beliebige Stelle im Track |
| Leiste oben | Fortschritt über die gesamte Playlist, plus Playlist-Name und Position ("3/8") |
| / | Springt zum vorherigen bzw. nächsten Punkt der Playlist (Track, Pause oder Stopper) |
| / (Mitte) | Wiedergabe starten/pausieren – bei einer Pause wird stattdessen der Countdown angehalten/fortgesetzt |
| (oben links) | Beendet den Player und kehrt zur Playlist-Übersicht zurück |
| (oben rechts) | Schaltet den Vollbildmodus um – dieses Symbol gibt es auf jedem Screen der App, nicht nur im Player |
Bei einer Pause läuft der Countdown automatisch ab und die App springt danach von selbst zum nächsten Punkt. Bei einem Stopper hält die App an und zeigt einen "Weiter"-Button – erst ein Tap darauf setzt die Playlist fort. Während der Wiedergabe verhindert die App zudem, dass der Bildschirm einschläft (Wake Lock).
Pausierst du während eines Tracks manuell (), zeigt die App zusätzlich an, wie lange die Pause bereits läuft (Timer zählt hoch, nicht runter). Darunter erscheint der Button "Zum Anfang springen" – er setzt den Track auf 0:00 zurück und startet die Wiedergabe direkt neu, als Alternative zum einfachen Fortsetzen über den Play-Button.
Über das Stift-Symbol oben rechts auf der Startseite lassen sich Playlists direkt in der App anlegen und bearbeiten, ohne JSON von Hand zu schreiben.
Playlists verwalten – In der Editor-Übersicht: "Neue Playlist" legt eine leere Playlist an (Cursor springt direkt ins Namensfeld), das Papierkorb-Symbol löscht eine bestehende (mit Rückfrage, Audiodateien bleiben dabei erhalten). Ein Tippen auf eine Playlist öffnet die Detailansicht mit einem Namensfeld ganz oben.
Punkte bearbeiten – Unten in der Detailansicht fügen "+ Track", "+ Pause" und "+ Stopper" neue Punkte hinzu (Cursor springt automatisch ins jeweils erste passende Feld). Jeder Punkt hat:
Track aus anderer Playlist kopieren – Der Button "Track kopieren" öffnet eine Auswahl (erst Playlist, dann Track daraus) und fügt eine vollständige, unabhängige Kopie (Datei, Titel, alle Cues) am Ende der aktuellen Playlist ein. Es handelt sich um eine echte Kopie, keine Referenz – spätere Änderungen an der Kopie wirken sich nicht auf das Original aus und umgekehrt.
Cues bearbeiten – Innerhalb eines Track-Punkts: "+ Cue" fügt eine normale Cue hinzu (Zeit im Format MM:SS, Beschreibung, optionaler Abschnitts-Name), "+ Wiederholung" fügt eine Wiederholungs-Zeile hinzu (siehe unten). Eine neue Cue wird zunächst ans Ende der Liste gehängt; erst wenn du das Zeitfeld verlässt oder die Playlist neu geöffnet wird, springt sie an ihre zeitlich richtige Position.
Signalfarben – Jede Cue kann optional eine von fünf vordefinierten Farben (Rot, Orange, Gelb, Blau, Lila) über das kleine Auswahlfeld neben Abschnitt bekommen – praktisch, um wichtige Übergänge farblich anzukündigen. Die Farbe erscheint sowohl bei der großen Cue-Anzeige im Player (farbiger Rahmen + dezenter Hintergrundton, Text bleibt in normaler Lesefarbe) als auch im Banner "Nächste Cue", sobald diese Cue ansteht. Bei Wiederholungen (siehe unten) wird die Farbe automatisch mitkopiert.
Abschnitte und Wiederholungen – Cues können einen "Abschnitt" (z. B. "A") tragen, um sie als zusammengehörige Gruppe zu markieren. Eine Wiederholungs-Zeile ("ab MM:SS", Abschnitte z. B. "A, B, C") lässt die App diese Gruppe automatisch an der angegebenen späteren Stelle erneut einblenden – ohne dass du die Cues ein zweites Mal eintippen oder die Zeiten manuell verschieben musst. Voraussetzung: Der referenzierte Abschnitt muss in der Cue-Liste vor der Wiederholungs-Zeile stehen.
Playlist löschen – Unten in der Detailansicht, abgesetzt von den übrigen Aktionen, stehen zwei Varianten: "Playlist löschen" entfernt nur die Playlist, Audiodateien bleiben erhalten. "Playlist mit Audiodateien löschen" prüft vorher, welche ihrer Audiodateien in keiner anderen Playlist mehr verwendet werden, listet diese in der Bestätigung auf und löscht nur die verwaisten Dateien mit.
Speichern & Export – Änderungen werden automatisch im Browser-Speicher abgelegt, ein separater Speichern-Button ist nicht nötig. "Diese Playlist exportieren" unten in der Detailansicht (neben den Löschen-Buttons) exportiert nur die aktuell geöffnete Playlist; "Als JSON exportieren" in der Editor-Übersicht exportiert den kompletten Playlist-Bestand. Beide erzeugen das gleiche, kompatible Dateiformat.
Import-Verhalten – "Playlist-JSON laden" im Editor ersetzt nichts: Playlists mit neuem Namen werden zu deinem Bestand hinzugefügt, eine Playlist mit bereits vorhandenem Namen wird überschrieben (an gleicher Position). So lassen sich einzeln exportierte Playlists gefahrlos wieder einspielen, ohne den Rest zu verlieren.
Über das Festplatten-Symbol oben rechts auf der Startseite ("Audiodateien verwalten") erreichst du alle Audiodatei-Aktionen an einem Ort:
action=list-Endpunkt) und zeigt sie mit Checkboxen an. Bereits lokal vorhandene Dateien sind grau hinterlegt und nicht anwählbar. Ausgewählte Dateien lädst du über "Ausgewählte laden" nacheinander herunter, mit Fortschrittsanzeige direkt in der jeweiligen Zeile.Darunter zeigt die Liste "Geladene Audiodateien" jede lokal gespeicherte Datei mit einer Zeile, in welcher Playlist(s) bzw. welchem Track sie verwendet wird – oder "wird in keiner Playlist verwendet", falls sie verwaist ist. Der Papierkorb löscht eine Datei einzeln aus dem Browser-Speicher; wird sie noch irgendwo verwendet, listet die Bestätigung vorher auf, wo genau.
Wenn du einen eigenen Server betreibst, kann die App fehlende Audiodateien selbstständig nachladen, sobald du eine Playlist öffnest – praktisch, wenn du ein Gerät neu einrichtest oder Playlists teilst, ohne jede Audiodatei einzeln übertragen zu müssen.
Einrichtung – Im Quellcode stehen ganz oben im Skript zwei Konstanten:
const AUDIO_FETCH_URL = ''; // z.B. 'https://dein-server.de/audio.php' – leer lassen deaktiviert das Nachladen
const AUDIO_FETCH_REQUIRES_PASSWORD = true; // false, wenn dein Endpunkt kein Passwort brauchtAblauf – Fehlt beim Öffnen einer Playlist eine referenzierte Datei, sendet die App einen klassischen POST-Request an AUDIO_FETCH_URL mit den Feldern file (Dateiname) und pw (Passwort, falls gefordert). Verlangt dein Server ein Passwort, fragt die App es beim ersten Mal über ein kleines Dialogfenster ab () und merkt es sich danach unverschlüsselt im Browser-Speicher – keine erneute Eingabe bei künftigen Aufrufen.
Verfügbare Dateien auflisten – Der Button "Vom Server laden" unter "Audiodateien verwalten" nutzt denselben Endpunkt mit einem zusätzlichen Feld action=list und erwartet als Antwort ein einfaches JSON-Array mit Dateinamen, z. B. ["track1.mp3", "track2.mp3"]. So lassen sich gezielt einzelne Dateien vom Server nachladen, ohne vorher zu wissen, welche Playlist sie referenziert.
Falsches oder geändertes Passwort – Antwortet dein Server mit HTTP-Status 401, verwirft die App das gespeicherte Passwort automatisch und fragt sofort erneut danach – praktisch, wenn du das Server-Passwort änderst, denn du musst nirgends in der App manuell etwas zurücksetzen. Schlägt auch die neue Eingabe fehl (wieder 401), bricht die App das Nachladen für die restlichen Dateien dieser Playlist ab, statt den Server mit einem falschen Passwort weiter zu bombardieren.
Fortschritt – Fehlende Dateien werden nacheinander geladen; pro Track-Zeile in der Playlist-Übersicht erscheint statt "fehlt" ein Fortschrittsbalken mit Prozentzahl, sofern dein Server die Dateigröße im Content-Length-Header mitschickt (sonst nur "lädt…" ohne Prozentwert). Schlägt ein Download fehl, zeigt die Zeile "Nachladen fehlgeschlagen".
Wichtige Einschränkung – Das Nachladen funktioniert nur, wenn die App über deinen eigenen Server aufgerufen wird (siehe Abschnitt "Als App installieren"). Über einen von Claude gehosteten Vorschau-Link ist es aus Sicherheitsgründen blockiert.
Eine geladene Datei ist ein Array von Playlists (auch bei einer einzeln exportierten Playlist – dann mit nur einem Element). Jede Playlist hat einen Namen und eine Liste von Punkten (items):
[
{
"name": "Ganzkörper-Workout A",
"items": [
{ "type": "track", "file": "track1.mp3", "title": "Warm-up", "cues": [
{ "t": "0:00", "text": "Aufwärmen", "section": "A" },
{ "t": "0:45", "text": "Kniebeugen", "section": "A", "color": "red" }
]},
{ "type": "pause", "duration": 30, "label": "Trinkpause" },
{ "type": "track", "file": "track2.mp3", "cues": [
{ "t": "0:20", "text": "Liegestütze" },
{ "repeat": ["A"], "at": "2:30" }
]},
{ "type": "stopper", "label": "Equipment wechseln" }
]
}
]Felder je Typ:
track: file (Pflicht, exakter Dateiname), title (optional), cues (Liste)pause: duration (Sekunden), label (optional)stopper: label (optional)Cue-Einträge:
t (Zeitpunkt als MM:SS, reine Sekundenzahl oder Ausdruck wie "2:30+45"), text, optional section, optional color (eine der vordefinierten Signalfarben, siehe unten)repeat (Liste von Abschnitts-Namen), at (Zielzeitpunkt, gleiche Schreibweisen wie t) – blendet die referenzierten Cues erneut ein, verschoben auf die neue ZeitGültige Werte für color: red, orange, yellow, blue, purple – oder das Feld ganz weglassen für keine Farbe.
Die App speichert alles direkt im Browser, nicht auf einem Server:
localStorage des Browsers.IndexedDB des Browsers.localStorage, unverschlüsselt.Alles bleibt erhalten, solange du die Website-Daten des Browsers nicht löschst – auch über einen Neustart des Geräts oder der App hinweg.
Zurücksetzen – Der Link "Alle gespeicherten Daten löschen" unten auf der Startseite entfernt Playlists und Audiodateien vollständig und unwiderruflich aus dem Browser-Speicher. Vor dem Zurücksetzen lohnt sich ein Export über den Editor, falls du die Playlists später wiederverwenden willst.
Backup – Da die Playlists nur lokal im Browser liegen, empfiehlt sich ein regelmäßiger Export ("Als JSON exportieren" oder pro Playlist einzeln) im Editor, um eine Sicherungskopie auf dem PC zu behalten.
Fitness Prompter lässt sich als installierbare App einrichten, die nach der ersten Installation komplett ohne Internetverbindung läuft. Dafür brauchst du einen eigenen Webserver (kein spezielles Hosting nötig – reicht schon simpler Webspace).
Dateien – Lade den kompletten Ordner unverändert (Struktur beibehalten) auf deinen Server:
index.html – die App selbstmanifest.json – Name, Theme-Farbe, Icon-Verweise für die Installationservice-worker.js – cached die App-Shell beim ersten Aufruf, danach läuft alles offlinefavicon.svg sowie icons/icon-192.png, icon-512.png, icon-192-maskable.png, icon-512-maskable.pngInstallation auf dem Gerät – index.html deines Servers im Browser öffnen, danach über das Browser-Menü "Zum Startbildschirm hinzufügen" – die App bekommt ein eigenes Icon und startet danach im Vollbild, ganz ohne Browser-Leiste.
Updates einspielen – Änderst du später index.html oder eine der anderen Dateien, musst du in service-worker.js die Zeile CACHE_VERSION hochzählen (z. B. 'teleprompter-shell-v2') – sonst bekommen bereits installierte Geräte die neue Version nicht zu sehen, da sie weiter aus dem alten Cache bedient werden.
| Problem | Lösung |
|---|---|
| Playlist zeigt "fehlt" bzw. Track lässt sich nicht abspielen | Dateiname in der Playlist stimmt nicht exakt mit dem Namen der geladenen Audiodatei überein (Groß-/Kleinschreibung prüfen) – im Editor über die Auswahlliste neu zuordnen, oder über "Audiodateien verwalten" prüfen, ob die Datei überhaupt geladen ist |
| Nachladen bleibt bei "lädt…" hängen oder zeigt "Nachladen fehlgeschlagen" | Prüfen, ob AUDIO_FETCH_URL gesetzt ist und der Server erreichbar ist. Ein falsches oder geändertes Passwort löst die App selbst auf (Server antwortet mit 401, App fragt automatisch neu) – bleibt der Fehler trotzdem bestehen, in "Audiodateien verwalten" prüfen bzw. die Datei dort manuell nachtragen |
| Bildschirm schaltet sich während des Trainings ab | Wake Lock wird nur unterstützt, solange die App im Vordergrund ist; nach Rückkehr aus dem Hintergrund wird er automatisch neu angefordert |
| Nach einem Import fehlen erwartete Playlists | Import ergänzt nur – prüfen, ob eine Playlist mit gleichem Namen versehentlich eine andere überschrieben hat |
| App zeigt nach einem Update nicht die neue Version | Bei selbst gehosteter Offline-Installation: CACHE_VERSION in service-worker.js hochgezählt? Sonst hilft auch ein manuelles Entfernen der installierten App und Neuinstallation |
| Cue erscheint zur falschen Zeit nach einer Wiederholung | Prüfen, ob der referenzierte Abschnitt (section) in der Cue-Liste vor der Wiederholungs-Zeile steht – nur dann kann die App die Ausgangszeit berechnen |
Noch keine Audiodateien geladen.