# Hrám sa hrám — Rock / LRC Performance

Rockový lyric videoklip s presným časovaním **49 veršov a 314 slov** podľa
dodaného Enhanced LRC. Každý nástup, zvýraznenie a typografický úder vychádza
z jeho časovej značky.

- **Dĺžka:** 03:24.600 / 204 600 ms
- **Obraz:** 1920 × 1080, 16:9 na šírku
- **Export:** 60 fps, 12 276 snímok
- **Zvuk:** video sa exportuje bez zvuku; vlastná skladba sa dá pridať do náhľadu
- **Vizuál:** čierna, biela a červená, veľké písmo, ručne písané akcenty,
  poškriabaná tlač a animované rytiny
- **Animácia:** individuálne transformácie slov, živé rozloženie riadkov,
  prelety cez celý obraz, rotácie, časticové údery a 37 väčších ilustračných akcií

## Otvoriť náhľad

Projekt je v **`~/otecrocku/hramsahram`**. Postup tvorby ďalších lyric videí,
architektúra a matematika LRC editora sú v **`~/otecrocku/AGENTS.md`**.

**Živý HTTPS náhľad:**
https://hramsahram.172.160.228.128.nip.io/?v=lines1

**Refrén od jeho presného nástupu:**
https://hramsahram.172.160.228.128.nip.io/?v=lrc3-final&ms=44820&autoplay

**Čistý obraz:**
https://hramsahram.172.160.228.128.nip.io/?v=lrc3-final&clean&autoplay

Priečinok funguje na bežnom statickom webovom serveri. Lokálne stačí:

```sh
npm start
```

Otvor http://localhost:4180/hramsahram/ alebo http://localhost:4180/.
Nie je potrebná inštalácia balíkov ani zostavenie aplikácie. Všetky písma,
skripty, ilustrácie aj muxery sú lokálne. Náhľad čaká na **Prehrať klip**.

### Parametre náhľadu

```text
?paused&ms=12799              1 ms pred slovom „drak“
?paused&ms=12800              presný nástup slova „drak“
?paused&t=15.35               prelet draka za textom
?paused&ms=44820              prvé „Stále!“
?paused&ms=143400             „si!“ v replike „Spadol si!“
?clean&paused&ms=166470       čistý obraz začiatku finálneho refrénu
?autoplay                    prehrávanie po načítaní
?lyrics=off                  ilustračná verzia bez hlavných textov
```

`ms` je čas v milisekundách, `t` v sekundách. Ak sú uvedené oba, používa sa `ms`.
Čas sa obmedzí na rozsah celého klipu. `clean` skryje rozhranie a zachová celý
obraz 16:9. Preferencia obmedzeného pohybu vypína automatické prehrávanie.

## Ako presne funguje LRC

**`lyrics.lrc` je pôvodný zdroj textu a nástupov spievaných slov.** Obsahuje
dodaný LRC vrátane dvoch veršov spojených v prvom fyzickom riadku.
Ak použiješ pravý editor, jeho lokálna verzia LRC má prednosť v náhľade aj exporte.

### Manuálny editor vpravo

Vpravo je zoznam **49 veršov s jednotlivými slovami**. Na čas verša alebo na
slovo prejdi myšou: otvorí sa panel **Korekcia (ms)** s poľom a tlačidlami − / +.
Na dotykovej obrazovke klepni; klávesnicou použi Tab.

- Korekcia **verša** posunie začiatok verša a všetky jeho slová o rovnaký rozdiel.
- Korekcia **slova** posunie toto aj všetky nasledujúce slová iba v danom verši.
- Jednotlivé korekcie sa sčítavajú. Čas slova = východiskový čas + korekcia
  verša + korekcie všetkých slov od začiatku verša po toto slovo vrátane.
- Pole upravuje vlastnú korekciu, nie absolútny čas. Nahradenie +20 hodnotou +30
  pridá len rozdiel 10 ms. Nastavenie 0 zruší vlastnú korekciu.
- + = neskôr, − = skôr. Tlačidlá menia po 1 ms; **Shift + klik** po 10 ms.
- V paneli vidíš výsledný čas aj súčet vlastnej a zdedených korekcií.

**Použiť časy** aktualizuje zvýraznenie, verše, kapitoly a ilustračné akcie
bez obnovenia stránky. Korekcie po použití zostávajú zobrazené; opakované použitie
ich nepripočíta znovu. **Export LRC** použije platné rozpracované korekcie a
stiahne celý `hram-sa-hram-upravene.lrc` s výslednými časmi.

Použité časy, východiskové časy a korekcie sa ukladajú v tomto prehliadači.
Staršie použité úpravy sa prevezmú ako nový východiskový LRC. Platný rozpracovaný
starší LRC sa obnoví ako rozpracovaný; neplatný starý text zostáva uložený v
pôvodnom úložisku. Náhľad aj export používajú použité časy. Neplatné poradie časov
zobrazí chybu a zachová poslednú platnú verziu klipu. Napríklad pri posune prvého
slova pred začiatok verša je potrebné posunúť aj začiatok verša.

Editor je mimo samotného obrazu; pri `clean` alebo celej obrazovke sa nenahráva.

- `[MM:SS.xx]` určuje okamih objavenia celého verša.
- `<MM:SS.xx>` určuje okamih zvýraznenia konkrétneho slova.
- Časy sa prevádzajú na **celé milisekundy**, bez zaokrúhľovania na snímky.
- Slovo sa nezvýrazní pred svojou značkou; pri nástupe má plnú nepriehľadnosť.
- Budúce slová sú už čitateľné, spievané slovo má kontrastnú tlačovú plochu,
  zväčšenie, rotáciu a pohyb. Okolie textu reaguje na tie isté nástupy.
- Text, poradie slov, interpunkcia a diakritika sa preberajú priamo z LRC,
  vrátane zápisu „hrabe“ v dodanom súbore.
- Skok dopredu aj dozadu obnoví presne rovnaký stav obrazu.

### Milisekundy a snímková frekvencia

Zdrojové časovanie má milisekundovú presnosť. Náhľad vykresľuje stav pri každom
obnovení obrazovky; pri načítanej hudbe používa jej aktuálny čas.

Export má **60 fps**, teda jednu snímku približne každých **16,667 ms**. Značka
sa vo videu zobrazí v prvej snímke **na jej čase alebo po ňom**, nikdy predčasne.
Napríklad značka 44 820 ms sa pri 60 fps objaví v snímke s časom 44 833,333 ms.
Samotná značka sa v zdrojových dátach nemení.

### Konce slov a inštrumentálne časti

LRC určuje nástupy, nie konce spievaných slov. Bežne trvá zvýraznenie do
nasledujúceho slova a posledné slovo verša do ďalšieho verša.

Pred vybranými medzihrou a nástupmi je v `score.js` redakčné podržanie posledného
slova 1 600 ms; posledné „hrabe!“ má 1 800 ms. Tieto konce sú rozhodnutím strihu,
nie ďalšími časmi spevu prevzatými z LRC.

| Čas | Časť |
| --- | --- |
| 00:00.000 | Titul |
| 00:00.670 | Prvý verš |
| 00:41.350 | Nástup / build |
| 00:44.820 | Refrén 01 |
| 01:07.250 | Gitarová medzihra |
| 01:14.300 | Sloha 02 |
| 01:44.100 | Nástup / build |
| 01:48.350 | Refrén 02 |
| 02:10.770 | Groove |
| 02:17.300 | Hovorený dialóg |
| 02:26.500 | „Oci poď sa hrať!“ a odpovede |
| 02:46.470 | Finálny refrén |
| 03:09.150 | Prvé záverečné opakovanie |
| 03:13.900 | Druhé záverečné opakovanie |
| 03:16.800 | Inštrumentálne outro a titul |
| 03:24.130–03:24.500 | Stmavenie |
| 03:24.600 | Koniec |

## Náhľad s vlastnou skladbou

Tlačidlo **Pridať skladbu** otvorí lokálny zvukový súbor. Nikam sa nenahráva.

Pri prehrávaní je **čas nahrávky hlavným časom videa**. Obraz sleduje
`audio.currentTime + offset`; nepoužíva oneskorené periodické dorovnávanie.
Ak sa zvuk načítava, obraz počká spolu s ním. Pause, seek a replay zachovávajú
synchronizáciu. Po skončení kratšej nahrávky môže obraz dobehnúť do konca.

Posun začiatku hudby sa dá nastaviť po **0,001 sekundy / 1 ms**:

- `0`: skladba aj video začnú spolu.
- `+0.250`: skladba začne o 250 ms neskôr.
- `-0.125`: video začne pri 125 ms skladby.

**M** alebo tlačidlo reproduktora stíši hudbu. Nahrávka slúži iba pre náhľad;
export je bez zvuku, pripravený na pridanie tvojej finálnej nahrávky v editore.

## Exportovať v prehliadači

1. Otvor **Export videa**.
2. Vyber podporovaný formát.
3. Zvoľ zahrnutie animovaného textu.
4. Klikni **Vykresliť a stiahnuť** a nechaj kartu otvorenú.

Každá snímka vzniká v samostatnom plátne v čase `frameIndex / 60`. Export používa
rovnaký renderer ako náhľad, natívne **WebCodecs** a lokálne muxery.

- **MP4 / H.264:** 1080p60, cieľ 16 Mbps, profil podporujúci Level 4.2,
  kľúčová snímka každé 2 sekundy, fast-start metadáta.
- **WebM / VP9**, prípadne VP8: 1080p60, tiež prijímané YouTube. Prípona je
  skutočne `.webm`; koncová dĺžka súboru je nastavená na 204,6 sekundy.
- Prehliadač overí podporu konkrétneho kodeku, rozlíšenia a 60 fps.
- Natívny export potrebuje aktuálny prehliadač na HTTPS alebo localhost.
- K dispozícii je priebeh, počet snímok, odhad času, zrušenie a odkaz na stiahnutie.
- Výstup obsahuje čistý obraz bez ovládacích prvkov.

Príklad názvu: `hram-sa-hram-lrc-1080p60.mp4`.
Projekt neobsahuje vopred vytvorené MP4 ani WebM. Export sa spustí iba tlačidlom
v prehliadači; nie je tu serverový render ani FFmpeg krok.

## Úpravy

- **`lyrics.lrc`:** všetky verše, slová a ich presné časy. Zmena sa načíta pri
  ďalšom otvorení stránky; nie je potrebné nič kompilovať.
- **`score.js`:** rozdelenie slov do vizuálnych riadkov, veľkosti písma, témy,
  motívy, časti skladby, redakčné podržania pred medzihrou a akcie ilustrácií.
- **`kinetic-film.js`:** zväčšovanie a rotovanie slov, ich živé rozloženie,
  zvýraznenie, častice, prelety a kompozícia obrazu.
- **`illustrations.js`:** pôvodné vektorové kresby a ich artikulované detaily.

Ak meníš počet slov vo verši alebo pridávaš verše, uprav zodpovedajúce rozloženie
`counts` v `score.js`. Súčet musí zodpovedať počtu slov. Pri obyčajnej zmene
časových značiek sa choreografia viazaná na slovo posunie automaticky.

Každý let a úder používa referenciu na konkrétne slovo, napríklad:

```js
event(3, 1, 'dragon-flight', 5100, { route: 'cross', scale: 1.03 });
```

To je drak naviazaný na druhé slovo štvrtého verša, nie nezávislý časovač.

## Ovládanie

| Kláves | Akcia |
| --- | --- |
| Space | Prehrať / pozastaviť |
| ← / → | Posun o −5 / +5 sekúnd |
| Shift + ← / → | Posun o −1 / +1 snímku pri 60 fps |
| Alt + ← / → | Posun o −1 / +1 ms |
| R | Od začiatku |
| C | Zapnúť / vypnúť hlavné texty |
| F | Celá obrazovka |
| M | Stíšiť / zapnúť pridanú skladbu |

Skratky neprepisujú ovládanie aktívnych formulárov. Bežné prehrávanie sa pri
skrytí karty pozastaví. Rozbehnutý export pracuje nezávisle od náhľadu.

## Súbory

```text
hramsahram/
  index.html          Náhľad a dialógy
  style.css           Základné responzívne rozhranie
  rock.css            Rockový vizuál rozhrania a lokálne písma
  lyrics.lrc          Pôvodný dodaný Enhanced LRC
  lrc.js              Parser a presné vyhľadávanie času
  score.js            Načítanie LRC, rozloženie a choreografia
  kinetic-film.js     Deterministický renderer
  illustrations.js    Originálne animované rytiny
  player.js           Prehrávanie, hudobný čas, posun a exportné rozhranie
  corrections.js      Model riadkových a kaskádových slovných korekcií
  line-editor.js      Hover ovládanie, použitie, uloženie a export LRC
  line-editor.css     Riadkový editor a panel korekcie
  export.js           60 fps WebCodecs export v prehliadači
  verify-lrc.mjs      Test časových značiek bez ďalších balíkov
  verify-corrections.mjs Test sčítania a obnovenia korekcií
  server.mjs          Lokálny server
  package.json        Príkazy start, check a test
  assets/             Lokálne písma a licencie
  vendor/             Lokálne MP4/WebM muxery a licencie
  README.md           Tento návod
```

## Overenie

```sh
npm run check
npm test
```

- Parser overuje 49 veršov, 314 slov a časové hranice vrátane ±0,001 ms.
- V prehliadači bolo overené objavenie celého verša a jediné aktívne slovo
  pri všetkých značkách, vrátane −1 ms, nástupu a +1 ms.
- 1 570 kontrolných stavov overilo zvýraznenie, plnú nepriehľadnosť aktívneho
  slova, úplnosť verša a umiestnenie všetkých slov v obraze.
- Všetkých 12 276 snímok bolo vykreslených do kontrolného plátna; objavilo sa
  všetkých 314 zvýraznení a všetkých 37 ilustračných akcií.
- 22 plných 1080p záberov bolo pixelovo totožných po spätnom posune.
- Rozhranie bolo overené pri šírkach 320, 390, 768, 1440 a 1920 px.
- Overený bol posun po 1 ms, scrubber, prehrávanie, presný koniec, celá obrazovka,
  náhľad podľa URL, obmedzený pohyb a zrušenie exportu.
- Hudobný hlavný čas, jeho zastavenie pri načítavaní, posun po 1 ms a offsety
  boli overené simulovaným mediálnym prvkom bez generovania zvuku.
- H.264 a VP9 boli úspešne nakonfigurované na 1080p60 bez kódovania snímok.
  Počas tvorby ani overovania nebolo exportované MP4 alebo WebM.

### Vývojárske rozhranie

```js
await window.filmReady;
window.film.seekMs(12800);
window.renderAt(12.8);                    // pauza a presný stav
window.MusicFilm.stateAtMs(12799).word;   // „že“
window.MusicFilm.stateAtMs(12800).word;   // „drak“
window.MusicFilm.frame;                  // práve vykreslené slová a ich plochy
window.film.timingSource;                // audio alebo performance
await window.BrowserExport.probe();      // iba kontrola podpory
```

`MusicFilm.render(canvas, seconds, { lyrics: true })` funguje nezávisle od histórie
prehrávania. Identifikátor edície je **`rock-lrc-v3`**.

## Písma a knižnice

Anton (Vernon Adams, SIL OFL), Permanent Marker (Font Diner, Apache 2.0),
DM Sans (Colophon Foundry, SIL OFL) a záložný Barlow Condensed (SIL OFL).
Licencie aj fonty sú v `assets/`. Marker sa používa iba pre podporované slová.

mp4-muxer 5.2.2 a webm-muxer 5.1.4 od Vanilagy sú lokálne v `vendor/`
pod licenciou MIT. Ilustrácie sú originálne vektorové kresby projektu;
text piesne zostáva materiálom jej autora.