Pavan-makwana/My-Agentic-Skills

Lyric Word Sync Engine (Lyrik-Wort-Synchronisations-Engine)

Löst das häufige Problem von Lyrik-Videos, bei denen die Anzeige ganzer Zeilen träge wirkt oder hinter dem Gesang des Sängers zurückbleibt, indem jedes einzelne Wort mit seinem akustischen Einsatz synchronisiert wird.

flowchart TD
    A[Audiodatei MP3/WAV] --> B[Akustische Hüllkurven-Analyse RMS]
    B --> C[Spracherkennung / Stimm-Checkpoints]
    C --> D[Wort-Silben-Gewichtung]
    D --> E[Sub-Sekunden-Wort-Zeitstempel JSON]
    E --> F[Progressive Wort-Einblendung HTML/CSS]

Problem & Lösung

• Das Problem: Wenn ein Sänger das Tempo erhöht (z.B. schnelle Charanams oder staccato-ähnliche Zeilen), bleibt eine statische, ganze Zeile zu lange auf dem Bildschirm oder erscheint, nachdem der Sänger bereits fertig ist.
• Die Lösung:
  1. Jede Zeile wird in einzelne Wörter tokenisiert: ["Kanmani", "anbodu", "kaadhalan"].
  2. Die aktive Gesangsdauer wird gemäß der Silbengewichte und lokalen RMS-Energieanstiegen verteilt.
  3. Alle Wörter einer Zeile werden gleichzeitig im Layout gerendert, sodass Schriftgröße und Zeilenumbruch nie springen.
  4. Bevorstehende Wörter werden mit einer blassen Geistertinte dargestellt (opacity: 0.12).
  5. Sobald der Sänger ein Wort ausspricht, geht dieses bestimmte Wort mit einem Übergang zu einem kräftigen Karmesinrot über (opacity: 1, color: #8c1226).

Skript zur Zeitextraktion

import wave, numpy as np

def compute_word_timings(audio, words, t_start, t_end, sr=16000):
    dur = t_end - t_start
    active_dur = max(0.4, dur * 0.88)
    weights = [max(2, len(w)) for w in words]
    total_w = sum(weights)
    
    word_events = []
    cur_t = t_start
    for i, w in enumerate(words):
        w_dur = (weights[i] / total_w) * active_dur
        word_events.append({
            'word': w,
            't_rel': round(cur_t, 3)
        })
        cur_t += w_dur
    return word_events

CSS Progressive Wort-Hervorhebung

.native .word {
  display: inline-block;
  opacity: 0.12;
  transition: opacity .12s ease-out;
  padding: 0 .25cqw;
}
.native .word.revealed {
  opacity: 1;
}