TRACKorDIE`94 ▀ REACT WEB APPLICATION TO PLAY CLASSIC TRACKER MUSIC
UPDATED ON: 2025-11-01
Some updates from the development fields.
▀ 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
▀ PLAYLIST QUEUE IS NOT WORKING [NEED YOUR HELP]
I am in the middle of creating web based React player and struggling in implementing continuous playback of playlist queue.
Current logic: user clicks any playlist, randomly selected track begins to play and then rest of selected playlist tracks should be played, but this is not happening, after first track there is dead silence. I also trying to take into account settings of shuffle and loop buttons.
Code related to this part is a mess now, i tried almost everyhing i've managed to find, even tried to use ai but this not led me to a practical solution.
Playlists are defined as an array of objects, each containing a name and a list of tracks with name and url, resolved by using PUBLIC_URL so files are visible in dev and prod environments.
The setSelectedPlaylist(pl) triggers automatic playback of a random track from the selected playlist.
The UseEffect hook initializes the ChiptuneJsPlayer once, when the component starts. It sets up an endHandler that triggers the onTrackEnd function when a track finishes.
The playTrack(index) validates the track index and playlist, loads the new track via player.current.load(), with a fallback to fetch() and ArrayBuffer.
The onTrackEnd callback should automatically play the next track based on Shuffle mode / Loop mode.
The currentTrackIndexRef and selectedPlaylistRef should keep track of the current position.
Hope that this flow of thoughts clears things up a bit.
Maybe someone with more experience and knowledge have an easy solution for the problem.
▀ CURRENT BUGS
► Sequencial playlist queue is not working
► 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
► Webpack 5.98
► Node.Js v23.7
► React Framework
► VS Codium v1.101
► RedFox v143
▀ 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] .