Trackordie`94 ▀ React Web Application To Play Classic Tracker Music
UPDATED ON: 2026-08-08
Sequential playback of playlist is finally fixed
▀ INTRO RANT
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].
▀ LIST OF CURRENT 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
▀ ESSENTIAL THINGS TODO
► full playlist support
► off load some functions to components
► implement hotkeys for all required functions
► mobile version [360-480px width of viewport]
► …. stuff …. stuff …. stufff
► TBD
▀ CURRENT BUGS
► Sequencial playlist queue is not working
► Track position seeking is not working [implemented!]
► Music player is not working after deployment
► 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
► Webpack 5.98
► Node.Js v23.7
► React Framework
► VS Codium v1.101
► RedFox v153
▀ PROJECT LINKS
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.
If someone would like to assist in my findings, [contact me here] .
