MoreRSS

site icon1A23 Studio修改

由 Eana Hufwe 创建的个人工作室。
请复制 RSS 到你的阅读器,或快速订阅到 :

Inoreader Feedly Follow Feedbin Local Reader

1A23 Studio的 RSS 预览

Project Lyricova as a Yūruka Vtuber

2024-04-23 12:25:29

Here’s me jumping onto the bandwagon. Inspired by Aikoyori, さわらつき, Aisu Asai, and others. Usually Vtuber logos are more abundant in variations, but this batch of making Vtuber logos for non-Vtubers seemed to have a significant fondness of Yūruka Std UB.

Learn more about Project Lyricova.

SVG:

Project Lyricova as a Yūruka Vtuber appeared first on 1A23 Studio.

Shift-JIS / UTF-8 文字化け解読:実はもうちょっと読めるかも

2024-04-01 12:49:43

文字化け、それは一昔前のパソコンにおいて情報交換でよく起こる不具合である。近年になってからは Unicode(だいたい UTF-8)がネット上の文字コードの事実上の標準になっており、意図しないで発生する文字化けはほとんどみられなくなった。今では、よくみられる文字化けはほぼ創作でホラー要素、謎解き、あるいは隠しメッセージとして登場している。その中に、最もよく使われている文字化けの種類は「Shift-JiS / UTF-8」による文字化けで、いわゆる「繝繧」とか糸へんの漢字がいっぱい入ってるのやつ。この記事は、「Shift-JiS / UTF-8」による文字化けを既存ツールよりはもうちょっと解読できる方法を解説します。

どれくらい解読できる?

まず実際の解読例を見てみましょう。

CodePen Embed Fallback
元の文章 文字化けした日本語のテキストの例
化けた文字列 譁�蟄怜喧縺代@縺滓律譛ャ隱槭�ョ繝�繧ュ繧ケ繝医�ョ萓�
既存のツールで解読 �字化けした日本語���キスト���
今回のツールで解読
(JIS 第一水準漢字限定)
(文斉斌斎斐斑斗料斜)字化けした日本語(の)(ダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミム)キスト(の)(侃例侍供依侠)

この例の通り、既存のツールで解読した「?」の部分に入りそうな文字の候補を提示してくれるのが今回のツールです。では、いったいどうやって候補を検出できるのかを解説していこう。

文字コードの前提知識

細かい仕組みに踏み入る前に、まずは今回扱う2種類の文字コード、Shift-JIS と UTF-8 の構造を少し見てみよう。

Shift-JIS は相対的に単純で、一文字は1バイトもしくは2バイトで構成して、それぞれで使える値の範囲が限られている。次の表の通り、1ビットは必ず 0x00–0x1F0x20–0x270xA1–0xDF のどれかで、2バイトの場合は、1バイト目は 0x81–0x9F0xE0–0xFC で、2バイト目は 0x40–0x9E0x9F–0xFC に入ることになる。

第1バイト
0 1 2 3 4 5 6 7 8 9 A B C D E F
0
1
2 ! # $ % & ( ) * + , . /
3 0 1 2 3 4 5 6 7 8 9 : ; < = > ?
4 @ A B C D E F G H I J K L M N O
5 P Q R S T U V W X Y Z [ ¥ ] ^ _
6 ` a b c d e f g h i j k l m n o
7 p q r s t u v w x y z { | }
8
9
A
B ソ
C
D
E
F
第2バイト
0 1 2 3 4 5 6 7 8 9 A B C D E F
0
1
2
3
4
5
6
7
8
9
A
B
C
D
E
F
 
ASCII制御文字
ASCIIと同一の文字
ASCIIと異なる文字
半角カナ
2バイト文字の第1バイト
2バイト文字の第2バイト(区番号が奇数の場合)
2バイト文字の第2バイト(区番号が偶数の場合)
未使用
Shift-JIS 拡張の符号表、Wikipedia より

対して、UTF-8 が対応する範囲がかなり広いので、符号化の体系もより複雑になっている。U+0000 から U+10FFFF までの約 111 万の符号位置を表す必要があるため、UTF-8 が使用するバイト幅が1バイトから4バイトまでになる。

符号位置の対応範囲 二進数表記 UTF-8 符号化した二進数表記
U+0000–U+007F 0gfe dcba 0gfe dcba
U+0080–U+7FFF 0000 0kji hgfe dcba 110k jihg 10fe dcba
U+8000–U+FFFF ponmlkji hgfe dcba 1110 ponm 10lk jihg 10fe dcba
U+100000–U+10FFFF 000u tsrq ponmlkji hgfe dcba 1111 0uts 10rq ponm 10lk jihg 10fe dcba

パターン的に、1バイトから4バイトの構成ではそれそれ先頭のビットは確定されている。

実際に解読する

Shift-JIS でエンコードされた文字列を UTF-8 でデコードすると、対応する文字が見つからない場合があり、それが文字化けの原因となる。先の例文を使って実際エンコードするとこうなります。

元の文章
UTF-8 でエンコード E3 83 86 E3 82 AD E3 82 B9 E3 83 88 E3 81 AE E4 BE 8B
Shift-JIS でデコード
  復元できるデータ E3 83 E3 82 AD E3 82 B9 E3 83 88 E3 AE E4 BE

上の表の�の部分は、データを Shift-JIS として解読する時にデータに対応する文字が見つからないため、仮に置かれるプレースホルダーである。元データと照らし合わせると、「テ」「の」「例」に対応するデータの一部が復元できないことがわかる。このため、一般の文字化け解読ツールは「�キスト��」までしか解読できない。

ただし、この場合で失ったデータは1文字ごとに1バイトだけ、残った部分はまだ解読のヒントになれるはず。いくつかの仮定を立てて、この表をより細かく分けてみよう。

仮定その1:元データは有効な UTF-8 データ

元の文章
Unicode 二進数表記 0011000011000110 0011000010101101 0011000010111001 0011000011001000 0011000001101110 0100111110001011
UTF-8 二進数表記 11100011 10000011 10000110 11100011 10000010 10101101 11100011 10000010 10111001 11100011 10000011 10001000 11100011 10000001 10101110 11100100 10111110 10001011
UTF-8 十六進数表記 E3 83 86 E3 82 AD E3 82 B9 E3 83 88 E3 81 AE E4 BE 8B
Shift-JIS でデコード
  復元できるデータ E3 83 E3 82 AD E3 82 B9 E3 83 88 E3 AE E4 BE
復元データ二進数表記 11100011 10000011 11100011 10000010 10101101 11100011 10000010 10111001 11100011 10000011 10001000 11100011 10101110 11100100 10111110
復元 Unicode 二進数表記 0011000011______ 0011000010101101 0011000010111001 0011000011001000 0011______101110 0100111110______

タイトルに書いた通り、当然元データは UTF-8 でなかったり、改変したりすると、そもそも大前提が成り立たない。この仮定のもとに、復元できない部分を UTF-8 の先頭ビット規則に当てはまると、実際に失われたデータはこの場合 8 ビットずつではなく 6 ビットずつになる。

1 ビット、つまり二進数の一桁は 0 か 1 の二通りで構成するから、6 ビットの組み合わせは 26 = 64 通りになる。これで無限にある可能性から一文字分 64 個の候補に絞られます。

この仮定で絞られた候補はこちら:

一文字目・二進数の 0011000011______ に当てはまる Unicode 文字:

ダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヰヱヲンヴヵヶヷヸヹヺ・ーヽヾヿ

二文字目・二進数の 0011______101110 に当てはまる Unicode 文字:

〮のギヮㄮㅮㆮ㇮㈮㉮㊮㋮㌮㍮㎮㏮㐮㑮㒮㓮㔮㕮㖮㗮㘮㙮㚮㛮㜮㝮㞮㟮㠮㡮㢮㣮㤮㥮㦮㧮㨮㩮㪮㫮㬮㭮㮮㯮㰮㱮㲮㳮㴮㵮㶮㷮㸮㹮㺮㻮㼮㽮㾮㿮

三文字目・二進数の 0100111110______ に当てはまる Unicode 文字:

侀侁侂侃侄侅來侇侈侉侊例侌侍侎侏侐侑侒侓侔侕侖侗侘侙侚供侜依侞侟侠価侢侣侤侥侦侧侨侩侪侫侬侭侮侯侰侱侲侳侴侵侶侷侸侹侺侻侼侽侾便

つまり、今のところの解読予想はこうである

ダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヰヱヲンヴヵヶヷヸヹヺ・ーヽヾヿ
〮のギヮㄮㅮㆮ㇮㈮㉮㊮㋮㌮㍮㎮㏮㐮㑮㒮㓮㔮㕮㖮㗮㘮㙮㚮㛮㜮㝮㞮㟮㠮㡮㢮㣮㤮㥮㦮㧮㨮㩮㪮㫮㬮㭮㮮㯮㰮㱮㲮㳮㴮㵮㶮㷮㸮㹮㺮㻮㼮㽮㾮㿮
侀侁侂侃侄侅來侇侈侉侊例侌侍侎侏侐侑侒侓侔侕侖侗侘侙侚供侜依侞侟侠価侢侣侤侥侦侧侨侩侪侫侬侭侮侯侰侱侲侳侴侵侶侷侸侹侺侻侼侽侾便

仮定その2:元の文字列は日本語である

さっきの仮定で 64 個の候補に絞られたが、並べるとまだ多すぎる気がする。ここで2つ目の仮定の登場です。原理的に UTF-8 でエンコードされたデータが Shift-JIS でデコードするだけだから、どんな言語でもできるが、「そもそも日本語じゃないと Shift-JIS で化ける必要なくない」と思っちゃうから、ここで原文が日本語であることを仮定する。

上のリストに「ㅮ」や「侦」など日本語じゃほぼ絶対使わない文字が散見するが、文字単位で十分な言語判定はできないから、ここで大まかに Shift-JIS に符号化できる文字のみを「日本語」とします。

この条件で絞られた候補は以下のとおりである。かなり少なくなったね。

ダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヰヱヲンヴヵヶ・ーヽヾ
のギヮ
侃來侈例侍侏侑侖侘供依侠価侫侭侮侯侵侶便

仮定その3:化け戻すとデータはロストしなければならない

タイトルはちょっと回りくどいが、まず以下の例を見てみよう。一文字目の候補の「ム」と「メ」の2文字に注目して、それぞれが当てはまる場合再び文字化けをする時の結果を求めよう。

「ム」の場合

  • 予想の原文:ムキスト…
  • UTF-8 でエンコード:E3 83 A0 E3 82 AD
  • Shift-JIS でデコード:繝繧ュ…
  • 解読したい文字列:繝�繧ュ…

「メ」の場合

  • 予想の原文:メキスト…
  • UTF-8 でエンコード:E3 83 A1 E3 82 AD
  • Shift-JIS でデコード:繝繧ュ…
  • 解読したい文字列:繝�繧ュ…

一文字目に「ム」を代入して予想の原文を化け直すと最初から解読したい文字列に一致する結果が得られるが、「メ」の場合は化け直す文字列に�が含まれていない。つまり、背理法 (?)によって「メ」は一文字目ではないことが証明できる。この方法で全ての候補を化け直してチェックすると、候補をさらに絞られます。

ダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミム
侃來侈侊例侍侏侑侒侔侖侘侚供依侠

これで5文字目が「の」であることを確定できました。

仮定その4:難しい漢字は使わない(任意)

さっきの候補はすでにかなり絞られたが、中にはまだ「侈」や「侊」など普通じゃ読めない漢字がかなり残っている。解読したい文字列の出自にもよるが、難読漢字は出ない場合は多いだろうと仮定する。ここは上の候補の中にある漢字を JIS 第一水準漢字に絞ると、こうしてさらに候補を減らせる。

ダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミム
侃例侍供依侠

当然、自信があれば常用漢字教育漢字などの文字集合に絞るのもありです。

補足:1バイトと2バイト⸺デコーダ仕様の違い

最後に補足したいのは、文字化けはツール(デコーダ)の仕様によって結果はかならず同じではないこと。私はいろんな文字化けツールを試している中、一つ面白いことが気付いた。それは、ツールによっては同じ文章でも、文字化けにすると違う結果が出て、それぞれデコードできないデータの処理方法が違うことである。ここでデコーダをその仕様で「1バイト類」と「2バイト類」に分ける。

「1バイト類」のデコーダは解読できないデータを見つけたら、1バイト飛ばして次から解読するものである。例えば、「E3 83 86 E3 82 AD」をデコードするときはこういう風になる:

E32バイト文字の第1バイト、次のバイトを見る E3 83 繝 862バイト文字の第1バイト、次のバイトを見る 繝 86 E3対応する文字がない、次のバイトから再開 繝� E32バイト文字の第1バイト、次のバイトを見る 繝� E3 82 繝�繧 AD 繝�繧ュ結果

対して、「2バイト類」のデコーダは解読できないデータを見つけたら、解読できない部分をまとめて飛ばすものである。例えば、同じく「E3 83 86 E3 82 AD」をデコードするときはこういう風になる:

E32バイト文字の第1バイト、次のバイトを見る E3 83 繝 862バイト文字の第1バイト、次のバイトを見る 繝 86 E3対応する文字がない、まとめて飛ばす 繝� 822バイト文字の第1バイト、次のバイトを見る 繝� 82 AD 繝�く結果

このため、デコーダによっては、�が1バイトを意味する時があるし、2バイトを意味する時もある。冒頭にあるツールで「?」は1バイトを意味するため、�を1バイトや2バイトに変換するボタンを用意した。片方が解読できなかったら、もう一方も試してみよう。

これからさらに絞りたいなら、たぶん文脈で頑張るしかないかなと思う。この方法で、最初の無限にある選択肢からかなり限られたオプションに絞られて、文脈で当てる難易度も結構下げたと思う。

もしこの先にまたどこかで文字化けを解読したい時があったら、この記事・ツールが役に立つことができたらとても嬉しいです。ではまた。

Shift-JIS / UTF-8 文字化け解読:実はもうちょっと読めるかも appeared first on 1A23 Blog.

DAM Karaoke in Round1 Tukwila from the View of a Vocaloid Enjoyer

2023-10-17 11:56:19

Finally, after years, I have moved to somewhere where I actually have access to a karaoke with a Japanese system in close proximity. I was really excited to learn that there is a Round1 that I can go to without traveling to somewhere ridiculously far.

This Round1 advertises that it is equipped with the DAM karaoke system, but without many details. I decided to give it a try and see if it could offer the entire set of features of an actual karaoke box in Japan. (Although frankly, I’d actually prefer JoySound over DAM for the better Vocaloid song coverage if I ever have a choice.)

Rate

First of all, the pricing. Round1 Southcenter offers two different systems at the same price, an English machine using Healsonic’s system, and a Japanese one using DAM. Both systems are available in the same room and share the same price.

Day Time 1–3 people 4–6 people 7–15 people 16–30 people
Monday–Thursday Open–16:00 $12 $17 $31 $50
16:00–Close $16 $22 $44 $70
Friday Open–16:00 $12 $17 $31 $50
16:00–Close $24 $29 $51 $82
Saturday Open–16:00 $14 $19 $32 $53
16:00–Close $24 $29 $51 $82
Sunday & Holiday Open–12:00 $14 $19 $32 $53
12:00–19:00 $24 $29 $52 $82
19:00–Close $16 $22 $44 $72
Room price per hour of Round1 Tukwila as of 2023

I chose to visit on a weekday morning for the cheapest rate, and all karaoke rooms were free as expected. The booking process was simple. No prior reservation was required. I just went to the counter, told the person that I wanted to book a Japanese karaoke room, made the payment, and handed over my photo ID. Then she gave me a tray with the DAM remote, two microphones, and an instruction pamphlet.

Setup

Unfortunately, the instruction pamphlet wasn’t really helpful in trying to set up the machine. The instructions seemed to be missing a critical step. Switching the input on the mixer was easy with the instructions, but me and the staff spent almost ten minutes trying to figure out why the TV didn’t show anything from the DAM machine.

It turns out that the Healsonic box has to be turned off first to let DAM output reach the TV, which was rather confusing. The staff might not have been trained on how to use that either. At least it’s good that they extended my booking for 10 more minutes to compensate for the setup time.

Taking a closer look at the machine and remote, the machine is a DAM-XG5000, released in 2010, and the remote is a PM300zB, which seems to be from the same era.

Songs

The remote is seemingly also rather old, only communicating with the karaoke machine through infrared. It has a rather old database, and there are visually zero Vocaloid songs available just by searching on the remote, which is quite disappointing. However, there is an option to request a song by its number in the database, allowing me to bypass the search function on the remote.

It turned out that the actual machine has a much newer database than the remote. By searching on DAM’s website, and making requests by song numbers, I managed to get songs as new as Blue Planet / DECO*27 (2023) to play on the machine. That means the machine itself is actually being updated or connected to the internet although the remote isn’t.

Despite the number request method unlocks many more songs than what’s stored on the remote, it did not work for every single song I requested. Specifically, songs that came with a dedicated video (e.g. songs labeled with 本人映像, アニメ特撮映像, LIVE 本人歌唱) will give errors when requested. Presumably, these songs carry features not supported by the machine. That means other popular songs from the same year like Kyōfū All-Back / Yukopi (2023) can’t be requested on the machine. Only songs that use local stock footage as background would work as expected.

Besides quite a few featured songs being unavailable, the machine is also not set up with the DAM machine in mind. The microphones are only connected to the mixer but not to the DAM machine, rendering the pitch rating feature on the machine unusable. Additionally, being a model from 2010, it doesn’t support song requests over the internet as it lacks the feature to generate a QR code for the connection.

After all, even though it lacks all sorts of stuff mentioned above, this Round1 is still the best option of commercially available karaoke box around the region that offers a decent range of Vocaloid songs. It’s arguably the next best option compared to an in-house DIY karaoke with online videos or the JoySound app on some gaming consoles, and I think I’d definitely visit there again during the end-of-year holidays.

Search keywords: Round1 Tukwila, Westfield Southcenter, Renton, Seattle, Washington, USA.

DAM Karaoke in Round1 Tukwila from the View of a Vocaloid Enjoyer appeared first on 1A23 Blog.

ひとりのボカロファンから見る Round1 Tukwila の DAM カラオケ

2023-10-17 11:56:05

ボカロ曲をちゃんと歌えるカラオケ屋さんを望み続けて数年、最近ようやくそんなところを発見し、行けるようになった。カラオケ屋として経営はしていないけれど、みんなお馴染みのラウンドワンだから、きっと大した差はないだろう。

このラウンドワンは、公式サイトで DAM 機種を利用していると言っていたが、詳しくは書いていない。果たしてすべての機能を使えるかを確かめるため、私は確かめに行くことを決めた。(正直に、もし選べるならボカロ曲収録がより多い JoySound の方がよかった。)

料金

まずは料金設定、ここのラウンドワンは英語向けの Healsonic と日本語向けの DAM の二つのカラオケ機種を用意されていた。同じ部屋に提供されたので、料金は機種に関係なく一緒になっていた。

曜日 時間 1–3 人 4–6 人 7–15 人 16–30 人
月火水木 16:00 まで $12 $17 $31 $50
16:00 から $16 $22 $44 $70
金曜日 16:00 まで $12 $17 $31 $50
16:00 から $24 $29 $51 $82
土曜日 16:00 まで $14 $19 $32 $53
16:00 から $24 $29 $51 $82
日曜日・休日 12:00 まで $14 $19 $32 $53
12:00–19:00 $24 $29 $52 $82
19:00 から $16 $22 $44 $72
Round1 Tukwila 一時間ごとの料金表(2023 年現在)

私は一番安い平日の昼に行くことに決めた。チェックインはかなり順調で、全室空いていたので、事前予約も要らなかった。カウンターに行き、日本語のカラオケボックスを使いたい旨を伝え、料金を支払い、身分証明書を渡したら、デンモクとマイク 2 本と使用説明のパンフレットが渡されました。

設備

残念ながら、説明を渡されたにもかかわらず、あまり役に立てなかった。ミキサー入力の切り替えは簡潔に書かれていたが、大事な点を見落としていたようだ。スタッフと一緒に 10 分近くかけて、テレビに DAM の画面がなぜ表示されないのかを調べてた。

結局なところ、英語の方の Healsound をオフにしないと DAM は使えないようだが、なぜかはわからない。少なくともこれにかかった 10 分間を延長してくれたので、個人的には大したことではなかった。

本体とデンモクを詳しく見ると、本体は 2010 発売の DAM-XG5000 で、デンモクはおそらく同時期の PM300zB だ。

デンモクはかなり古くて、赤外線通信しかできない。内蔵のライブラリもそうで、ボカロ曲はまず見つからなくて、最初はすごくがっかりした。しかし、選曲番号で予約することもできるので、内蔵ライブラリにない曲もこれで予約できるのか試してみた。

幸い、本体の方はネットワークに接続しているようで、DAM の公式サイトで見つけた番号で『ブループラネット / DECO*27』(2023) みたいな新しめな曲も予約することができた。

しかし、ネットに接続してるとしても、すべての新曲が予約できるのではなかった。特に、本人映像・アニメ特撮映像・LIVE 本人歌唱とか映像付きの曲は予約するとエラーが出る始末になった。一般的な背景映像が出るような曲だけは普通に予約ができる。おそらくバージョンが古いので、映像すら対応してないだろう。そのため、同じく 2023 年の『強風オールバック / ゆこぴ』は「本人映像」付いたため予約できなかった。

その他にも、この部屋は全体的に DAM に向けてセットアップされてなかった。マイクはミキサーにだけ接続されてて、DAM 本体には接続されてなかった。精密採点機能はオンにできるものの、入力がないため0点しか出せなかった。さらに古いモデルであるため、アプリで予約しようとしても、QR コードが出せないから諦めるしかなかった。

こちらのラウンドワンはいくら欠点があろうとも、この近所で見つけられるカラオケ屋の中でボカロ曲を一番歌える選択だ。おそらく、お家の DIY カラオケとゲーム機搭載の JoySound アプリ以外の一番のチョイスでもあると考える。年末の休暇になったら、正直もう一度行きたい。

検索キーワード: Round1 Tukwila, Westfield Southcenter, Renton レントン, Seattle シアトル, Washington ワシントン州, USA アメリカ.

ひとりのボカロファンから見る Round1 Tukwila の DAM カラオケ appeared first on 1A23 Blog.

Text Sticker bot v3

2023-10-15 12:33:06

Text Sticker v3 is a rewritten version of the Telegram Text Sticker bot.

Different from the previous two versions where the user can only provide a text input, Text Sticker v3 utilizes the Telegram Web App platform, which allows the bot to have more freedom to interact with the user while keeping the convenience of inline bots.

Since the bot now have access to a full-fledged browser, aside of the providing more design options (color, font, weight, etc.), v3 also managed to shift most of the graphical and computation work to the client thanks to Canvas API (for drawing sticker) and WebAssembly (for WebP encoding) available in all modern browsers. With this, Text Sticker v3 is able to largely trim down dependencies on the server side, and I have managed to migrate it to run on a SaaS platform for a better availability.

Now with a web interface, the bot has the potential to generate all kinds of imagery apart from simple plain text. This would be an area of exploration for further iteration of the bot.

Text Sticker bot v3 appeared first on 1A23 Studio.

Project Lyricova Gen 2

2023-05-20 08:00:00

Project Lyricova Generation 2 is a revamp of the original Project Lyricova, released on its 10th anniversary – 20 May 2022. Expanding from the original scope of a lyrics blog, Generation 2 now includes various new screensavers, music entity management, gallery look-up, and a full-fledged music management system dubbed as Jukebox. Both components are totally redesigned and rewritten from the ground up.

Lyricova

Lyricova as a lyrics blog has been redesigned to have a more modern look, encompassed by modern web features like dynamic Open Graph cover, advanced typography features including variable fonts and hanging punctuations, and various text animations working on plain DOM, SVG and canvas.

Tech Stack ⸻ Contrast to the original version based on PHP and CodeIgniter, Gen 2 is written in TypeScript, supported by Express.js, React, Next.js, MUI, Sequelize, Apollo GraphQL, and Redux.

Layout and Design ⸻ Gen 2 moved forwarded from Bootstrap, and redesigned from the ground up with handcrafted (S)CSS styles. The color scheme has changed into a darker theme with a branding house purple shade dedicated to Lyricova.

Typography ⸻ The new design makes use of GitHub’s 3-axis variable typeface pair: Mona Sans and Hubot Sans. The variable axes are used extensively in both static designs and in user interaction animations. Besides, other pographic features such as Alternative Proportional Width for kana and CJK punctuations, and balanced line wrappings. There’s also a custom implementation of hanging punctuations for short lyrics-like texts.

Animation ⸻ In Gen 2, we have brought the typing animation from the previous screensavers to various aspects of the new design, making full use of the typing sequence. Besides, we also included inter-page transitions, content reveal following cursor, kerning-aware per-letter animation and more.

Screensavers ⸻ Originally, the initial version has an additional screensaver feature, and was then rewritten twice. In Gen 2, we’ve brought them back fully rewritten, and added two new screensavers to the collection. (Unfortunately version 1 of the screensaver was lost in the code base and was thus left over.) The two new features makes use of canvas animation, which is more expressive than plain DOM manipulations. Also, all screensavers now comes with content selection, where the user can select verses to show based on languages, tags and other criteria.

Structure ⸻ After running the original Project Lyricova for years, we now have a much clearer understanding of how it should be organized, with all the new features and requirements in mind. Concepts like tags and multilingual lyrics verses has gained first-class citizenship in Gen 2. In addition, we introduced the concepts of Pulses where an entry can be bumped up while keeping a track of the activity history. Gen 2 also differentiates plain text lyrics, stylized and HTML representations to accommodate different use cases.

API ⸻ Initially, Lyricova only came with a simple and limited JSONP API endpoint to get the content of an entry. The API coverage has been greatly expanded thanks to GraphQL. There is also a JSON API offered to return the content of a random verse, which is also filterable like the screensaver filters. Additionally, there is another endpoint to generate Open Graph covers for social sharing on demand, powered by Vercel OG and Satori.

Screenshots

Open Graph social preview of a post.

Jukebox

Jukebox is a brand new component introduced to Project Lyricova as a full-fledged music management system – again – focused on music of the Vocaloid((Vocaloid and other voice synthesizer. Same below.)) community.

Entity managementJukebox is bundled with an entity manager that ties a music file to its corresponding music, producers, artists, and album entities in the database. Powered by VocaDB, it is easy to import almost all Vocaloid music you can find on the internet. For tracks that falls beyond the scope of VocaDB (human covers and instrumentals), manual enrolment is also supported.

Thanks to the wide variety of properties offered by VocaDB, we can achieve a wide variety of music selection, such as derivation and sub-voicebank lookups. For entries imported from VocaDB, Jukebox also offers a link to view the original entry to learn more.

One issue a vast majority of music management software dealing with Japanese tracks is natural sorting. Unlike most other languages, Japanese has a rather complex association of the writing and their pronunciations. While majority of music file tagging schema has specific fields for sorting, most music library managers don’t recognize the field at all. To accommodate this, Jukebox ships sort order support as first-class feature, with support of automated phonetic sort order generation per-language for ja and zh.

Player ⸻ A fully web-based music player is set as the landing page. The player maintains a “current” playlist, which is persisted across sessions, and can load tracks from the entire list, per producer, vocalist, album, playlists, and search results.

Lyrics animation ⸻ Throughout the time, we has developed various techniques to keep track of the playback progress of the player, and applying them to different lyrics animation based on their natures. Jukebox ships with 17 choices of lyrics effects, from the most plain single-line and scrolling lyrics, to SVG-based text revealing animation, to Nicokara-styled karaoke captions, to realistic typing effects, and an effect imitating Apple Music Sing (which is frankly quite resource hungry). The lyrics animation panel can be expanded into a video-like full screen for limited viewport sizes like on mobile devices. Jukebox also comes with an experimental implementation of always-on-top lyrics powered by picture-in-picture API.

File enrolmentJukebox supports rescanning the the designated music files folder for newly added files, and additional music file retrieval from yt-dlp. When updating file metadata (title, artist, album, sort order, lyrics, song and album entity), these information is also written to the file music file itself. This is to ensure maximum data preservation across platforms, and reducing potential data loss when migrating within Lyricova.

Lyrics editor ⸻ In the file enrolment panel, there is a panel to edit the lyrics associated to the file. Jukebox primarily uses a format called LRCX, which was initially used in LyricsX by ddddxxx, and uses the generic LRC as fallback. The Jukebox Lyrics Editor supports all main features of LRCX, including furigana, translations, and inline time tags. The furigana editor supports automatic population supported by MeCab, the Japanese morphological analysis engine. The simple tagger and inline tagger uses Web Audio API to ensure the best time precision achievable for audio playback in web browsers, with an overhead performance trade-off. In addition, the inline-tagger is heavily inspired by RhythimicaLyrics, which is widely used for lyrics timing for various karaoke caption video production tools. The editor also features a downloader that retrieve lyrics from different sources and converting them into LRCX and LRC.

Playlists ⸻ Last but not least, Jukebox also manages playlists within the system, and can generate M3U8 files for local consumption in other media players.

Screenshots

Appendix

Lyricova Web API

See documentations.

Demo account

A read-only demo account is prepared on both lyricova.1a23.studio and jukebox.1a23.studio. Username: guest; Password: password. The demo account can allow you to try out the dashboard, but nothing can be changed, and some resource-heavy requests are disabled.

Project Lyricova Gen 2 appeared first on 1A23 Studio.