birdulon
/
KaraokeTestudaiBackend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add some fades and animated blur to make subtitles less jarring

This commit is contained in:
Luke Hubmayer-Werner 2024-12-20 02:43:31 +10:30
parent 01e2397594
commit ece3fab18e
1 changed files with 11 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
lyrics/static/lyrics/subtitle_generator.js
View File

@ -68,16 +68,15 @@ Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
const t1s = timecode(t1);
const duration_seconds = t1-t0;
const duration_ms = Math.floor(duration_seconds * 1000);
const fade_duration_ms = data.title_fade_duration_ms ?? 1000;
const fade = `{\\fade(255,0,255,0,${fade_duration_ms},${duration_ms-fade_duration_ms},${duration_ms})}`;
const title_fade_duration_ms = data.title_fade_duration_ms ?? 1000;
const lyric_fade_duration_ms = data.lyric_fade_duration_ms ?? 180;
// const fade = `{\\fade(255,0,255,0,${title_fade_duration_ms},${duration_ms-title_fade_duration_ms},${duration_ms})}`;
const title_fade = `{\\fad(${title_fade_duration_ms},${title_fade_duration_ms})\\blur10\\t(0,${title_fade_duration_ms},\\blur0)\\t(${duration_ms-title_fade_duration_ms},${duration_ms},\\blur10)}`;
const lyric_fade = `{\\fad(${lyric_fade_duration_ms},${lyric_fade_duration_ms})}`;
s += `
Comment: 0,${t0s},${t1s},,,,,,,Title Card
Dialogue: 0,${t0s},${t1s},TitleJP,,,,,,${fade}作曲　${data.song_composer}
Dialogue: 0,${t0s},${t1s},TitleJP,,,,,,${fade}作詞　${data.song_lyricist}
Dialogue: 0,${t0s},${t1s},TitleJP,,,,,,${fade}曲名　${data.song_title}
Dialogue: 0,${t0s},${t1s},Title,,,,,,${fade}Music: ${data.song_composer_en}
Dialogue: 0,${t0s},${t1s},Title,,,,,,${fade}Lyrics: ${data.song_lyricist_en}
Dialogue: 0,${t0s},${t1s},Title,,,,,,${fade}${data.song_title_en}
Dialogue: 0,${t0s},${t1s},TitleJP,,,,,,${title_fade}曲名　${data.song_title}\\N作曲　${data.song_composer}\\N作詞　${data.song_lyricist}
Dialogue: 0,${t0s},${t1s},Title,,,,,,${title_fade}${data.song_title_en}\\NMusic: ${data.song_composer_en}\\NLyrics: ${data.song_lyricist_en}
`;
// Kanji Furigana layout stuff
@ -103,10 +102,10 @@ Dialogue: 0,${t0s},${t1s},Title,,,,,,${fade}${data.song_title_en}
const furi_preamble = `Dialogue: 1,${t0s},${t1s}`; // Different layer to avoid kanji collision detection
// Translation line is easy and static
s += `${sub_preamble},Translation,,,,,,${line.translated_line}\n`;
s += `${sub_preamble},Translation,,,,,,${lyric_fade}${line.translated_line}\n`;
// Romaji line is also easy, just intersperse durations
let romaji_line = `{\\k${centiseconds[0]}}`;
let romaji_line = `${lyric_fade}{\\k${centiseconds[0]}}`;
let i = 0; // syllable counter
for (const syl of line.romaji_syllables) {
if (syl.trim()){ // not whtespace
@ -121,7 +120,7 @@ Dialogue: 0,${t0s},${t1s},Title,,,,,,${fade}${data.song_title_en}
// Now for the kanji and furi lines...
const kanji_plain_str = line.furi_blocks.map(b => b[0]).join('');
const full_kanji_width = kanji_plain_str.length * size_kanji_x;
let kanji_line = `{\\k${centiseconds[0]}}`;
let kanji_line = `${lyric_fade}{\\k${centiseconds[0]}}`;
let kanji_line_progress = 0; // increment as we go, to track furi position
let furi_lines = [];
i = 0; // syllable counter
@ -141,7 +140,7 @@ Dialogue: 0,${t0s},${t1s},Title,,,,,,${fade}${data.song_title_en}
} else { // Kanji block
const i0 = i; // Store this to later calculate block time for the kanji
let syls = kana_to_syllable_list(furi_block[1]);
let furi_line = `{\\k${centiseconds[i]}}`;
let furi_line = `${lyric_fade}{\\k${centiseconds[i]}}`;
let furi_chars = 0;
for (const syl of syls) {
furi_line += `{\\K${centiseconds[i+1]-centiseconds[i]}}${syl}`;