Make Tracker Tunes in the Browser

WorldPeas | 129 points

Absolutely awesome! I've long been attracted to tracker software but I could never find one that really makes me want to use it. Although this is browser-based, it might just be the one for me.

Something I would very much like to see in all music software, including this one, is an alternative for keyboard-based note entry and preview that is not based on the piano, but on the guitar/bass. Basically, each keyboard key is a semitone over the one on its left, and keys ZAQ1 are mapped to notes EAGD (when in QWERTY). It's very simple to do and I find it much easier to work that way, because it makes it very easy to play melodies and find note relationships the way you would on a guitar fretboard. No guessing where the black keys lie, most things are transpositionally invariant. I've made this into a macOS app and after more than 6 years using it, I find it vastly superior and much more adapted to the limitations of a computer keyboard. The fact the keyboard lines are staggered is annoying at first, but I've been quickly able to get over it. I guess all guitar players would find that useful as well.

oinj | 2 years ago

It is nice to see that finally this can be done in the web. I worked a bit in web-based sound around 2008 for the music playback in some Flash games[0] i was working on and at the time sound was woefully limited.

I wanted to use MOD music because of their much smaller size (i wanted to keep my games less than 1MB in size because at the time many people had slow connections and really you didn't want people to wait regardless - Flash games were put in places where there were like 289347823 alternatives next to it).

There wasn't any usable MOD player (there was one but used GPL which was impractical for games and had some technical issues in playback) so i made my own and since there wasn't really an audio API beyond "play that sound file" ("sound file" being wav or mp3), what i did was to generate a SWF file in memory with the MOD file converted into a WAV (infinite looping commands weren't supported) and play that (for some reason Flash had an API for doing that, probably to allow for custom SWF encryption).

That was during Flash Player 9 times. Later FP10 added some better audio API but by the time it became as widespread as FP9 i had already lost interest in Flash.

Later when HTML5 got audio APIs i considered porting the player to HTML5 (it was written in HaXe[1] which supported a bunch of target platforms and languages, including JavaScript) but at the time the HTML5 audio APIs were a mess with every browser doing its own (and some weren't that great - e.g. IIRC Chrome didn't had a callback for streaming/generating audio but instead expected you to "race" the playback and put data ahead of the time) and then was the last time i checked audio in a web browser.

[0] http://runtimeterror.com/tech/demo/flashdemos.html

[1] https://haxe.org/

badsectoracula | 2 years ago

Wow, really wasn’t expecting this to work flawlessly on mobile. Seriously good design.

Gigachad | 2 years ago

I have it bookmarked, for when my Amiga is switched off.

Good discussion here from 2019.

https://news.ycombinator.com/item?id=19034690

nickt | 2 years ago

Title made me think of a browser plugin, that plays a sound everytime a tracker is loaded. But this is also cool.

true_repairman | 2 years ago

again, as much as i hate the idea of music creation tools being created for the browser, absolutely outstanding

PaulDavisThe1st | 2 years ago

Huge kudos! Plus great idea to throw "Stardust Memories" and "Space Debris" in there as examples -- they're the best of the best the demoscene has/had to offer!

exogeny | 2 years ago

Interesting to see a completely custom renderer. Look at the page through dev tools inspector - it's just a single canvas inside body. Everything is drawn using the Canvas API. Not even WebGl, just a regular old 2d context, bunch of fillRect's and drawImage's.

panzerklein | 2 years ago

Jeeze, I don't even have anything to add. This is so incredibly cool.

The modern web is thrilling sometimes.

lelandfe | 2 years ago

This is amazing work, especially since the source appears to be completely in plain javascript! Brings back all the memories of slaving away over my Amiga500 in OctoMED trying to find the best place to loop the samples so they wouldn't click.

AndrewStephens | 2 years ago

Brought a tear to my eye

kimi | 2 years ago

Super cool. It's very impressive that the GUI is wrapped in a html canvas object.

chaosprint | 2 years ago

May I ask how something like this is built in the browser? what tech is behind it?

poisonarena | 2 years ago

Amazing! Even has the snake game!

freeCandy | 2 years ago

Beautiful !!!

varispeed | 2 years ago