feat(synced-lyrics): romanization

[ArjixWasTaken]

Started working on romaji support!

TODO:

• Languages:
• • Japanese
• • Mandarin
• • Korean
• UI
• • synced lyrics
• • plain lyrics (e.g. lyrics genius)

Preview:

---

Related discussion #2382
Blocked by #2788

[ArjixWasTaken]

This brings an issue to the surface, should I run only one romanizer and not all of them?
Like, Japanese has many chinese characters, that are often pronounced in different ways, like the example above, where de became teki

If I run the pinyin romanization first, it will affect japanese lyrics, but if I run the japanese romanization first, it will affect chinese lyrics.....

I'll decide what to do about this later, for now I'll ignore this issue

[ArjixWasTaken]

Ok, for now I ended up with the following solution to the problem described earlier:

• if a line contains hiragana or katakana, it is japanese, if it only contains kanji and doesn't use hiragana/katakana at all, it is chinese

That fixed the issues I encountered in chinese and japanese lyrics, unfortunately, if the lyrics are entirely in kanji, I can't do much about it 😔

More creative solutions are always welcome!

[JellyBrick]

Ok, for now I ended up with the following solution to the problem described earlier:

• if a line contains hiragana or katakana, it is japanese, if it only contains kanji and doesn't use hiragana/katakana at all, it is chinese

That fixed the issues I encountered in chinese and japanese lyrics, unfortunately, if the lyrics are entirely in kanji, I can't do much about it 😔

More creative solutions are always welcome!

You can use lingua for language detection

https://github.com/pemistahl/lingua-js

or
https://github.com/dachev/node-cld
https://github.com/nitotm/efficient-language-detector-js

[ArjixWasTaken]

That sounds a little bit overkill, and honestly, I doubt it would work unless it knows the difference between Chinese and Japanese grammar, because a lot of kanji characters are 1:1 the same as Chinese characters

[JellyBrick]

If a sentence contains shinjitai (新字体), it can be considered Japanese (although there are cases where it uses kanji (旧字体), but in those cases I think it's mostly distinguishable by the presence of hiragana and katakana)

• Enhance Kanji Recognition in Japanese Language Detection pemistahl/lingua-rs#381
• Strange results for Chinese with Japanese pemistahl/lingua-go#38

[JellyBrick]

Also, if a sentence contains Korean hanja (한자), it can be considered Korean.

• https://namu.wiki/w/%EA%B5%AD%EC%9E%90(%ED%95%9C%EC%9E%90)#s-2
  • (Korean)

[ArjixWasTaken]

Hmm, I think it should be safe to assume that if at least one line contains katakana/hiragana, then we are dealing with japanese for all lines.

If no japanese/korean is detected anywhere, that's when I should use the pinyin library, I think that should work fine for most cases?

I really don't want to add more dependencies than needed

[ArjixWasTaken]

It should be much more reliable now, I doubt there are many japanese songs that are exclusively in kanji, if at least one line contains one character that is hiragana/katagana, then all lines are treated as japanese

otherwise, it is treated as chinese

[ArjixWasTaken]

@JellyBrick es-hangul doesn't have a method to test if a given text contains hangul, so I found some regex to do the job
the regex doesn't have to be perfect, don't overthink it, we just want to know if at least one line contains a hangul character or not, to determine what romanizer to use, I know korean unicode is complex, but this really should be enough

---

[kimjammer]

Got an edge case for you, some songs are in 3 languages. Currently it looks like only one romanizer can be active for a song. In this particular song, Japanese and Korean don't appear on lines together so you could just pick the romanizer line by line, but I'm not sure if there are songs out there that do.

We love CJK 😃😃😃.
Anyhow, looking forward to this feature.
(I'm also going to assume you've noticed that the fancy font size isn't being applied correctly)

[ArjixWasTaken]

Got an edge case for you, some songs are in 3 languages. Currently it looks like only one romanizer can be active for a song. In this particular song, Japanese and Korean don't appear on lines together so you could just pick the romanizer line by line, but I'm not sure if there are songs out there that do. We love CJK 😃😃😃. Anyhow, looking forward to this feature. (I'm also going to assume you've noticed that the fancy font size isn't being applied correctly)

detecting line-by-line for korean+japanese should be fine, but add chinese to the mix and (╯°□°）╯︵ ┻━┻

[ArjixWasTaken]

@kimjammer could you send a list of 2-3 songs that have lyrics and contain chinese+korean+japanese?

[kimjammer]

By 3 languages I meant Japanese + English + Korean, but I think it would be good to have a list of mixed language songs for testing so:
JE, KE = Japanese and English on same line, Korean and English on same line, Japanese and Korean NOT in same line

J, K, JE, KE: LIT - STAYC
J, K, JE, KE, JK, JKE: Bad Girl for You - EXID
K, C, KE: HIGHLIGHT - SEVENTEEN
C, CK, CE: HWAA (Chinese Ver.) - (G)I-DLE
C, J, K, CE, KE: From Home - NCT U

I don't think any song has Chinese and Japanese on the same line
Good luck!

I totally understand if you just draw the line somewhere, there's probably not too many of these super multilingual songs.

[ArjixWasTaken]

@kimjammer can you confirm if this is correct?

https://music.youtube.com/watch?v=WRWg4EA_dwQ&t=161

[kimjammer]

I pulled the pr to test it and I can confirm that the top 4 songs look right to me.

[ArjixWasTaken]

I've implemented everything I planned to, so I am now ready to accept code reviews!
PS: I won't be resolving the pnpm-lock.yaml conflict, it should be resolved when it is time to merge.

[ArjixWasTaken]

(I'm also going to assume you've noticed that the fancy font size isn't being applied correctly)

@kimjammer can you elaborate on that? does that still happen with the latest commit?

[kimjammer]

The "!important" on this line seems to prevent this variable from being set correctly in the code. In the last commit, the fancy mode follows the clamp(1.4rem, 1.1vmax, 3rem) font-size even though it should be 3rem. Removing !important seems to fix the problem.

[kimjammer]

This also makes the romanization the full 3rem, it might be worth considering making the romanization smaller than 3rem so the lyrics page isn't too cramped.

[kimjammer]

One more thing, are you planning to have a menu toggle for romanization?