Hacker News new | past | comments | ask | show | jobs | submit login
Make Tracker Tunes in the Browser (stef.be)
129 points by WorldPeas on May 25, 2022 | hide | past | favorite | 33 comments



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.


Very cool; I must say, I've never thought of, or seen this mapping used but looking at it, it does totally match a guitar fretboard and if you go horizontally it maps very closely.

I imagine part of this comes from the fact the fact that QWERTY midi maps to the piano rather than guitar comes from the fact that most MIDI controllers are piano based rather than guitar based (with a couple exceptions), so generally speaking if you're composing music at the computer (whether with a tracker or conventional DAW), you're going to generally bite the bullet and just learn how to hack it on a keyboard. I've adapted to this just because it makes it easier to use the existing ecosystem of equipment and software, but I always wondered what it would be like for things to be more guitar based.


This is a really cool idea. I used to be big into tracking and grew to get used to ModPlug Tracker's "diamond" layout where each row represented an octave, then would continue up semitones as you moved to the right.

So for example, Q, A, and Z would be C-3, C-4, and C-5. W, S, and X would be C#3, C#4, C#5. E, D, and C would be D-3, D-4, D-5, and so on.

I'm going to have to try the guitar mapping. It would be fun to make a little program for this, then strap a keyboard over my shoulder and maybe use the spacebar to strum


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/


> finally this can be done in the web.

This is what I had on my 1 MB, 7 MHz Amiga 500 in 1989.


Sure, and it is possible even on a ZX Spectrum and clones[0] (especially with the General Sound board[1]), the point is that it wasn't possible on the web due to API limitations, not that there weren't the hardware resources available.

[0] https://youtu.be/IMeMbfQfnl0?t=117

[1] https://youtu.be/f6IrkpX13a0


Back when the Web Audio API's were still very fresh I had similar goals and ideas. I wasn't overly impressed at the usability of the web audio API's, especially for things like beat-accurate triggering for music playback, so I wrote my own multi-channel mixer/sampled synth library, and a MOD/S3M player on top of it. [0] (It's since been basically abandoned). It was both a proof of concept as well as a journey back through time for me, and at the time I remember being amazed at how unreasonably well it all worked. It felt wrong that an interpreted language like JS could be fast enough to real-time mix multiple audio streams.

As an aside, the MOD format is one of those things that's surprisingly easy to describe, but surprisingly difficult to get all of the edge cases to behave the same as the original trackers, and I quite enjoyed the process of critically listening to things and going back and fixing issues as they came up.

I had also written a MOD player much earlier in my life, targeting my first PC, an old 10MHz 286 with a sound blaster card. At the time I had to hand optimise things in assembler to get to the point where I could play 8-channel MOD's reliably. And that was pushing it. Nowadays an interpreted language running in a browser on a low-spec PC is more than enough to do a ton more channels without even breaking a sweat. Progress is amazing.

Kudos to the authors of this tool. It looks amazing!

[0] https://github.com/gundy/jssynth


> Nowadays an interpreted language running in a browser on a low-spec PC is more than enough to do a ton more channels without even breaking a sweat. Progress is amazing.

Well, technically modern JS engines do compile JavaScript to native code and they tend to be among the most advanced on the topic, so it does kinda make sense - it isn't like, e.g. QBasic that -IIRC- had such a simple interpreter that assigning commonly accessed variables at the top of the program would make it run faster :-P.


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


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

Good discussion here from 2019.

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


It even has the original AmigaOS <= 1.3 mouse pointer :)


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


I was hoping for exactly this! Something like the "radar lock" and "missile launch warning" sounds in military aircraft. Maybe its time to dig into the plugin API world ...


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


Agreed, outstanding!

I'm less conflicted about having music tools in the browser. Yes, it's less efficient, and there's more risk of dropouts, and there's less control over I/O, and there's generally less you can _do_... But what's emerging is widespread access to increasingly sophisticated music making tools, and I don't see a reason to want to slow that down?


Is it really so bad? The portability among machines is a great feature.


Good for portability, but what about efficiency, when compared to native?


>, as much as i hate the idea of music creation tools being created for the browser,

I just tried it on desktop (Windows with Google Chrome) and then on iPad and iPhone. Seems to work.

No downloads or app installs. Instant gratification compared to downloading Apple Logic Pro from the App Store. And Logic doesn't work cross platform on Windows. I also notice your Ardour is cross-platform -- but doesn't run on iOS.

If a programmer wants zero-install + cross-platform, what are the alternatives other than the web browser runtime being the target? (Other than programmer learning and writing 5 different native versions which lowers velocity of adding product features.)


You have said it many times here, but I can't remember what were your reasons.

I think it has its place and will just add to the existing tools. After all, even free (and good) vst plugins didn't replace real synths.


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!


The guy who composed Space Debris is the keyboardist/producer of the pop/altrock band Poets of the Fall, and also composed for Alan Wake and Max Payne 2.


Where did you find Space Debris? Unlike Stardust Memories, I can’t see Space Debris under File -> Load


Maybe he meant Jesper Kyd's Space Song, which also happens to be in my top 3 MODs ever? Great tool AND great taste.


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.


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

The modern web is thrilling sometimes.


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.


Brought a tear to my eye


Yes... So many memories of the 90's are coming back to me all of a sudden. I spent months on Soundtracker/Protracker, literally.


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


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


There's the GitHub repo you can dig into. [0]

From `package.json` it appears to have zero dependencies other than `grunt` and plugins as a build tool, so other than a handful of libs [1], it appears to be 100% organic JS.

[0] https://github.com/steffest/bassoontracker

[1] https://github.com/steffest/BassoonTracker/tree/master/scrip...


Amazing! Even has the snake game!


Beautiful !!!




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: