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
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 management ⸻ Jukebox 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 enrolment ⸻ Jukebox 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.