TRACKorDIE`94 ▀ REACT WEB APPLICATION TO PLAY CLASSIC TRACKER MUSIC

Just want to take a break from mindlessly trimming trailing spaces and fixing indentation “issues”
in my “learning” projects at overpriced online courses.

If i have spare time i’ll surely drop that neat story on you,
where i share lessons learned about reality of web development and avoiding costly mistakes
when it comes to paid education (or in reality: self-learning).

To escape total boredom caused by pointless tasks, I decided to explore the world of React,
popular JavaScript library and its ecosystem.

Currently, I’m building an online player for retro-style [tracker music]

THAT SUPPORTS STYLE PLAYLISTS AND LOOKS F#CKING AWESOME! 

This type of obscure by modern standards music exists in a plethora of file formats.
In most cases this music is called as [modules or mods] .

Audio player is relying on [chiptune3.js] and [openMPT] libraries
to handle such a large task to support so many music formats.
And it looks like that such software which has been a long-held ambition turned into reality [finally].

ESSENTIAL FEATURES

► the most raddest tracker music on the entire interwebs
► convenient playlist support [loop & shuffle]
► highly ergonomic, no-nonsense in terms of GUI
► shortcut support for better ergo
► the browser’s title shows the author and track name
► stylish startup screen and sound of lovely HDD seeking tracks
► in application kick-butt graphics and audio matching 90s aesthetics
[featuring incredible Dangerous Dave]
► four cool backdrops: Pro Tracker, Milky Tracker, Impulse tracker & hacker keyboard
[set randomly upon app startup 25% chance]
► animated vintage red computer switch to close the page, if you got bored

THINGS TODO

► full playlist support
► off load some functions to components
► implement hotkeys for exit
► mobile version [360-480px width of viewport]
► …. stuff …. stuff …. stufff
► TBD

CURRENT BUGS

► Track position seeking is not working
► Music player is not working after deployment
[see below for the explanation]
► Some bugs here and there
► So here it is, in it’s beta stage glory

GUI WEB PLAYER ALPHA

MOBILE TEMPLATE SKETCH

DEVELOPMENT ENVIRONMENT
Windows 7 x64 ESU
VS Codium v1.101
Node.Js v23.7
RedFox v143

PROJECT LINKS
It could be deleted or down,
because currently i am figuring out
how to correctly deploy React project.
[GITHUB REPO]
[LIVE DEMO]

While experimenting with React deployment, I discovered the usefulness
of the process.env.PUBLIC_URL environment variable.
This helped me achieve consistent file paths that work for both required fields:
local development and deployed to Github.

Although I’ve successfully resolved issues related to image and MP3 audio effect resource loading,
I’m still facing significant challenges with playing back tracker music files in my deployed project.
It should be worth to note that locally everything works like it should.
I suspect that it issue is somehow related to audio worklet visibility, when project is in the deployed state.

So for now, I’ll drop the code to GitHub in its current state.
At least you can observe complete graphical and audio design with proper graphics and UI sounds.

I’ll report back when everything will be done!

To materialize project in it’s full blown potential in reality i have to get
~2.5Gb of fast hosting space to store all these [numerous mod files] .
Note that it is an old collection dated back to 2021.