8 ms·

Make Tracker Tunes in the Browser

129 points by WorldPeas 4y ago

exogeny 4y 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!
- kajic 4y ago
  Where did you find Space Debris? Unlike Stardust Memories, I can’t see Space Debris under File -> Load
  - the-rc 4y ago
    Maybe he meant Jesper Kyd's Space Song, which also happens to be in my top 3 MODs ever? Great tool AND great taste.
- vegai_ 4y ago
  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.
nickt 4y ago
I have it bookmarked, for when my Amiga is switched off. Good discussion here from 2019. https://news.ycombinator.com/item?id=19034690 https://news.ycombinator.com/item?id=19034690
- rob74 4y ago
  It even has the original AmigaOS <= 1.3 mouse pointer :)
PaulDavisThe1st 4y ago
again, as much as i hate the idea of music creation tools being created for the browser, absolutely outstanding
- adzm 4y ago
  Is it really so bad? The portability among machines is a great feature.
  - mdp2021 4y ago
    Good for portability, but what about efficiency, when compared to native?
- irh 4y ago
  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?
- guggle 4y ago
  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.
- jasode 4y ago
  >, 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.)
Gigachad 4y ago
Wow, really wasn’t expecting this to work flawlessly on mobile. Seriously good design.
chaosprint 4y ago
Super cool. It's very impressive that the GUI is wrapped in a html canvas object.
kimi 4y ago
Brought a tear to my eye
- JacobJack 4y ago
  Yes... So many memories of the 90's are coming back to me all of a sudden. I spent months on Soundtracker/Protracker, literally.
true_repairman 4y ago
Title made me think of a browser plugin, that plays a sound everytime a tracker is loaded. But this is also cool.
- ed312 4y ago
  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 ...
poisonarena 4y ago
May I ask how something like this is built in the browser? what tech is behind it?
- scoot 4y ago
  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 https://github.com/steffest/bassoontracker [1] https://github.com/steffest/BassoonTracker/tree/master/script/src/lib https://github.com/steffest/BassoonTracker/tree/master/scrip...
badsectoracula 4y 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 http://runtimeterror.com/tech/demo/flashdemos.html [1] https://haxe.org/ https://haxe.org/
- chillingeffect 4y ago
  > finally this can be done in the web. This is what I had on my 1 MB, 7 MHz Amiga 500 in 1989.
  - badsectoracula 4y ago
    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 https://youtu.be/IMeMbfQfnl0?t=117 [1] https://youtu.be/f6IrkpX13a0 https://youtu.be/f6IrkpX13a0
varispeed 4y ago
Beautiful !!!
lelandfe 4y ago
Jeeze, I don't even have anything to add. This is so incredibly cool. The modern web is thrilling sometimes.
freeCandy 4y ago
Amazing! Even has the snake game!
oinj 4y ago
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.
- yowlingcat 4y ago
  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.
- Minor49er 4y ago
  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
AndrewStephens 4y 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.
panzerklein 4y 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.

129 points by WorldPeas 4y 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!

kajic 4y ago
Where did you find Space Debris? Unlike Stardust Memories, I can’t see Space Debris under File -> Load
- the-rc 4y ago
  Maybe he meant Jesper Kyd's Space Song, which also happens to be in my top 3 MODs ever? Great tool AND great taste.
vegai_ 4y ago
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.

nickt 4y ago

I have it bookmarked, for when my Amiga is switched off. Good discussion here from 2019. https://news.ycombinator.com/item?id=19034690 https://news.ycombinator.com/item?id=19034690

rob74 4y ago
It even has the original AmigaOS <= 1.3 mouse pointer :)

PaulDavisThe1st 4y ago

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

adzm 4y ago
Is it really so bad? The portability among machines is a great feature.
- mdp2021 4y ago
  Good for portability, but what about efficiency, when compared to native?
irh 4y ago
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?
guggle 4y ago
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.
jasode 4y ago
>, 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.)

Gigachad 4y ago

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

chaosprint 4y ago

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

kimi 4y ago

Brought a tear to my eye

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

true_repairman 4y ago

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

ed312 4y ago
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 ...

poisonarena 4y ago

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

scoot 4y ago
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 https://github.com/steffest/bassoontracker [1] https://github.com/steffest/BassoonTracker/tree/master/script/src/lib https://github.com/steffest/BassoonTracker/tree/master/scrip...

badsectoracula 4y 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 http://runtimeterror.com/tech/demo/flashdemos.html [1] https://haxe.org/ https://haxe.org/

chillingeffect 4y ago
> finally this can be done in the web. This is what I had on my 1 MB, 7 MHz Amiga 500 in 1989.
- badsectoracula 4y ago
  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 https://youtu.be/IMeMbfQfnl0?t=117 [1] https://youtu.be/f6IrkpX13a0 https://youtu.be/f6IrkpX13a0

varispeed 4y ago

Beautiful !!!

lelandfe 4y ago

Jeeze, I don't even have anything to add. This is so incredibly cool. The modern web is thrilling sometimes.

freeCandy 4y ago

Amazing! Even has the snake game!

oinj 4y ago

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.

yowlingcat 4y ago
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.
Minor49er 4y ago
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

AndrewStephens 4y 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.

panzerklein 4y 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.