Muzika Gromche — Web Player & Editor

Play your favorite tracks on repeat right in your browser.

Project structure

The look & feel is inspired by a certain popular NLE (Non-Linear video Editor) which incorporates DAW (Digital Audio Workstation) functionality in it.

Library page lists all available audio tracks with some basic information presented in cards. There is a search / filter field on top.
Player page features in-depth information about selected audio track, a dedicated timeline widget lets you play, seek, scrub, zoom into timeline tracks & clips, and manupulate them. Each timeline track represents either a segment of the song (intro, loop), or a specific kind of visual effects (such as flickering, fading out & color palette for powered lights, lyrics, drunkness & condensation).

Development

Adding new tracks

Add track declaration to Plugin.cs and fill in its properties.
Launch the game once, so that it generates a new JSON dump (in the Lethal Company save files directory) of all tracks.
Replace public/MuzikaGromcheTracks.json with the new JSON dump.

Run the following script to generate bare codenames file:

cat ./MuzikaGromcheTracks.json | jq '[.tracks[].Name | {(.): { "Artist": "", "Song": "" }}] | add' > MuzikaGromcheCodenamesBare.json

Add new codenames from the generated file above to public/MuzikaGromcheCodenames.json file.

Run & test

First time setup:

copy audio files from the /Assets/ directory located at repository's root to Frontend/public/MuzikaGromcheAudio/ directory.

Muzika Gromche Web Player & Editor is built with Vue 3 + TypeScript + Vite.

pnpm run dev
pnpm run test

Deploy

pnpm run build

Use scp, rsync or any other tool to upload content of dist/ to root@ratijas.me /var/www/html/muzika-gromche/.

1.8 KiB Raw Permalink Blame History