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.

Project Lyricova is a free and open source suite of web apps for lyrics blogging and music management focused on Vocaloid* contents.

Project Lyricova is currently under the progress of a complete rewrite. The rewrite will consist of 2 parts: a jukebox + music library manager and a lyrics blog. The new tech stack is TypeScript + Node.js + MySQL + Express.js + React + Next.js.

For music manangement, this project relies on VocaDB for its database of Vocaloid songs, and allow manual addition of entries that does not fall under VocaDB’s scope.

For the previous version of Project Lyricova last released in 2015, see the v1 branch.

Learn more.

* The term “Vocaloid” here includes all voice synthesizers, as defined in VocaDB.net.

Packages

• jukebox: Music library manager and public jukebox.
• lyricova: Lyrics blog (similar to version 1).
• common: Common code shared between jukebox and lyricova.
• lyrics-kit: Fetch and parse lyrics from various sources.

Install

• Database

  • Setup a MySQL database and import the schema from lyricova-schema.sql.

  • Create a MySQL user and grant it access to the database.

  • Create a Lyricova user in the database as admin. Put password in the format of a bcrypt hash.

    INSERT INTO Users
      (id, username, displayName, password, email, role, provider, provider_id, creationDate, updatedOn, deletionDate)
    VALUES
      (1, 'admin', 'Administrator', '$2a$10$anT02XU53WKpNV3p30nA2.EZ19ucaWys0MRhMjsCGcIYhdeKyJnfe', 'admin@example.com', 'admin', NULL, NULL, '1970-01-01 00:00:00', '1970-01-01 00:00:00', NULL);

• Music file storage

  • Create a directory for storing music files (defaulted to /var/lyricova/music).

• Environment variables

  • Configure the environment variables in .env file. Refer to .env.sample for examples.

• Node.js

  • Install Node.js and npm.
  • Install dependencies: npm install
  • Build: npm run build --workspace=packages
    • Note, env var DB_URI is required for building.

• Runtime

  • Runtime is supported by Docker.
  • Build the image: docker-compose build
  • Run the container: docker-compose up -d
  • Lyricova blog is listening at port 59742
  • Jukebox is listening at port 58532

Etymology

The name Lyricova is a made up word from “lyrics” and “voca” (taken from Vocaloid) or “nova” (taking the meaning of new), which signifies a new way of working with Vocaloid lyrics. This project was previously known as Project Gy which is taken from its name in Chinese, Gē-yǔ (歌語). 歌 means songs, and 語 means to express, putting together, Gē-yǔ is making a sense of expressing oneself through songs and lyrics.

See also

• Lyricize, a lyrics and quote collection site written in Django by @outloudvi. Heavily inspired by Project Lyricova (v1).

License

Project Lyricova: A lyrics blogging and music management suite for Vocaloid
Copyright (C) 2013–2023 Eana Hufwe

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.