5 ms·

Playing Fasttracker2 .XM files in JavaScript

138 points by JoachimS 11y ago

themodelplumber 11y ago
Oh man. Huge flashback to downloading FastTracker 2 back in '93, excitedly hitting "play" on e.g. Chillzone.xm by Norfair (edit, actually that tune wasn't released yet in '93, but there were so many great tunes) and seeing 32 waveforms going at the same time, sending amazing sounds through the Pro Audio Spectrum 16 I had gently installed in my ZEOS 486 DX/2 66 MHz. Amazing to see it all there in JS today...wow. Thanks for sharing the article. (Wait...where is Nibbles?)
- onyxraven 11y ago
  Makes me wonder if ScreamTracker3 is doable too.
  - themodelplumber 11y ago
    I always wished I knew how to work ST3. I ended up instead mailing away for a copy of Modedit shortly before the really user-friendly FT2 was released.
  - a1k0n 11y ago
    Of course it is. It's actually a lot easier, as there are no envelopes and just one sample per instrument. Firehawk/TDA wrote this excellent player a while back: http://mod.haxor.fi/Purple_Motion/2nd_pm.s3m http://mod.haxor.fi/Purple_Motion/2nd_pm.s3m
    - camperman 11y ago
      Damn, that playback is as good as I used to get on the old GUS.
- a1k0n 11y ago
  Hmm, I appear to have a sample loading overflow bug somewhere... http://www.a1k0n.net/code/jsxm/#nf-chill.xm http://www.a1k0n.net/code/jsxm/#nf-chill.xm Edit: pushed a fix... something is goofy with the sample data in instrument 4.
  - themodelplumber 11y ago
    Whoaaa! Thanks, worked great here. That is terrific to see it running like that. :)
rzzzt 11y ago
Works great in Chrome without underruns. (Is ScriptProcessorNode here to stay, though? Mozilla's documentation marked the feature as deprecated for quite some time now [1], suggesting the use of Audio Workers instead; in turn, the same documentation states that these are not yet implemented in any browser. At some point I got very confused about the one true way of generating audio using Javascript.) [1] https://developer.mozilla.org/en-US/docs/Web/API/ScriptProcessorNode https://developer.mozilla.org/en-US/docs/Web/API/ScriptProce...
- a1k0n 11y ago
  It got renamed from JavaScriptNode to ScriptProcessor when it switched from webkitAudioContext to AudioContext, and it seems to be the best-supported way to do it. I don't see why not. But of course IE doesn't support it at all and I don't think iOS Safari does either (it's a big question mark on mozilla.org anyway)
  - a1k0n 11y ago
    On second thought you're probably right; this API will probably break in a couple years and my player won't work anymore, just like everything else that tried to use createJavaScriptNode in the past is now broken. Hopefully the web workers transition is the last...
  - greggman 11y ago
    iOS safari supports it just fine and has since it first came out. http://games.greggman.com/game/html5-bytebeat/ http://games.greggman.com/game/html5-bytebeat/ The issue on mobile is you can only start playback of sounds in a user gesture event and I think on iOS the first sound can't be a ScriptProcessorNode (maybe that bug was fixed). I just play an oscillator for a moment to get things started. Once the first note is played it just all works. I'd be surprised if they removed it at this point. Many many pages use it. Many many native->emscripten apps use it. I think just no one has updated MDN in a while. Unity->HTML5 uses it. Unreal->HTML5 uses it. Pico8->HTML5 uses it. Voxatron->HTML5 uses it.
    - 11y ago
abrkn 11y ago
So... Nibbles?
- a1k0n 11y ago
  Sorry, haven't worked that in yet...
0x4a42 11y ago
Fasttracker was the program that made me understand I have not talent at all to compose music. :)
sjs382 11y ago
This is awesome. I'm going to incorporate this into http://Artpacks.org http://Artpacks.org soon, if you don't mind! Now, only if there was a reliable JavaScript RIPScript interpreter. :)
- a1k0n 11y ago
  Haha, sure, let me push some fixes to the github repo. RIP script, OMG. I remember that. With HTML canvas, shouldn't be too hard, though it would be weirdly high-resolution.
  - sjs382 11y ago
    I definitely won't be implementing the tracker code anytime in the immediate future. Maybe in a month? Andy Herbert started a ripscrip interpreter that renders to canvas, but it isn't finished and definitely isn' reliable for artscene files. He doesn't intend to finish it, last I heard. https://github.com/andyherbert/ripscript.js https://github.com/andyherbert/ripscript.js
  - carl8 11y ago
    I tried writing a RIPscript generator in javascript a few years ago. I thought it would be easy, but it's surprisingly not. It's unfinished, but here it is if you'd like to try it out: http://carl.gorringe.org/pub/code/javascript/RIPview/ripview.html http://carl.gorringe.org/pub/code/javascript/RIPview/ripview...
    - deleted 11y ago
      [deleted]
- bane 11y ago
  Oh awesome! I love artpacks and the app. Quick question, what did you use to render the ANSI art to images?
  - sjs382 11y ago
    There are a lot of libraries to do this. I use ansilove.js[0], which renders to canvas, so I save on the expense of keeping 10G of rendered images online (at the expense of my users compute times). Ansilove.js is a variant of Ansilove, which was originally written in PHP [1], but has been ported to other languages [2], too. There are a bunch of other renderers too like piece [3] and Pablo [4]. [0] http://andyherbert.github.io/ansilove.js/ http://andyherbert.github.io/ansilove.js/ [1] https://github.com/ansilove/ansilove https://github.com/ansilove/ansilove [2] https://github.com/ansilove/AnsiLove-C https://github.com/ansilove/AnsiLove-C [3] https://github.com/textmodes/piece https://github.com/textmodes/piece [4] https://github.com/cwensley/Pablo.Gallery https://github.com/cwensley/Pablo.Gallery
dogprez 11y ago
Awesome, fasttracker 2 and qbasic were the most formative programs of my youth. I'll upvote anything to do with fasttracker 2 all day.
errozero 11y ago
Great work. Nice smooth visuals too. Could you implement a html5 file reader to load any .xm file?
- a1k0n 11y ago
  Yep. Just added drag-and-drop to the player window; drag a local .xm file onto it to load it. Only tested in Chrome.
ryanmarsh 11y ago
OMG spent so many hours late at night in my teens on FastTracker 2. This is incredible. Now I'll have to dust off those floppies.
fapjacks 11y ago
Oh wow I spent so many nights playing and making MODs and chatting with my other nerd friends on BBSes of the day trying to share knowledge. This is truly a much-appreciated work of art! On another note, I think the people commenting in this thread would be really great together in a room somewhere with beer and computers. It's a very specific cross-section of both a skillset and a point in time.

138 points by JoachimS 11y ago

Oh man. Huge flashback to downloading FastTracker 2 back in '93, excitedly hitting "play" on e.g. Chillzone.xm by Norfair (edit, actually that tune wasn't released yet in '93, but there were so many great tunes) and seeing 32 waveforms going at the same time, sending amazing sounds through the Pro Audio Spectrum 16 I had gently installed in my ZEOS 486 DX/2 66 MHz. Amazing to see it all there in JS today...wow. Thanks for sharing the article. (Wait...where is Nibbles?)

onyxraven 11y ago
Makes me wonder if ScreamTracker3 is doable too.
- themodelplumber 11y ago
  I always wished I knew how to work ST3. I ended up instead mailing away for a copy of Modedit shortly before the really user-friendly FT2 was released.
- a1k0n 11y ago
  Of course it is. It's actually a lot easier, as there are no envelopes and just one sample per instrument. Firehawk/TDA wrote this excellent player a while back: http://mod.haxor.fi/Purple_Motion/2nd_pm.s3m http://mod.haxor.fi/Purple_Motion/2nd_pm.s3m
  - camperman 11y ago
    Damn, that playback is as good as I used to get on the old GUS.
a1k0n 11y ago
Hmm, I appear to have a sample loading overflow bug somewhere... http://www.a1k0n.net/code/jsxm/#nf-chill.xm http://www.a1k0n.net/code/jsxm/#nf-chill.xm Edit: pushed a fix... something is goofy with the sample data in instrument 4.
- themodelplumber 11y ago
  Whoaaa! Thanks, worked great here. That is terrific to see it running like that. :)

rzzzt 11y ago

Works great in Chrome without underruns. (Is ScriptProcessorNode here to stay, though? Mozilla's documentation marked the feature as deprecated for quite some time now [1], suggesting the use of Audio Workers instead; in turn, the same documentation states that these are not yet implemented in any browser. At some point I got very confused about the one true way of generating audio using Javascript.) [1] https://developer.mozilla.org/en-US/docs/Web/API/ScriptProcessorNode https://developer.mozilla.org/en-US/docs/Web/API/ScriptProce...

a1k0n 11y ago
It got renamed from JavaScriptNode to ScriptProcessor when it switched from webkitAudioContext to AudioContext, and it seems to be the best-supported way to do it. I don't see why not. But of course IE doesn't support it at all and I don't think iOS Safari does either (it's a big question mark on mozilla.org anyway)
- a1k0n 11y ago
  On second thought you're probably right; this API will probably break in a couple years and my player won't work anymore, just like everything else that tried to use createJavaScriptNode in the past is now broken. Hopefully the web workers transition is the last...
- greggman 11y ago
  iOS safari supports it just fine and has since it first came out. http://games.greggman.com/game/html5-bytebeat/ http://games.greggman.com/game/html5-bytebeat/ The issue on mobile is you can only start playback of sounds in a user gesture event and I think on iOS the first sound can't be a ScriptProcessorNode (maybe that bug was fixed). I just play an oscillator for a moment to get things started. Once the first note is played it just all works. I'd be surprised if they removed it at this point. Many many pages use it. Many many native->emscripten apps use it. I think just no one has updated MDN in a while. Unity->HTML5 uses it. Unreal->HTML5 uses it. Pico8->HTML5 uses it. Voxatron->HTML5 uses it.
  - 11y ago

abrkn 11y ago

So... Nibbles?

a1k0n 11y ago
Sorry, haven't worked that in yet...

0x4a42 11y ago

Fasttracker was the program that made me understand I have not talent at all to compose music. :)

sjs382 11y ago

This is awesome. I'm going to incorporate this into http://Artpacks.org http://Artpacks.org soon, if you don't mind! Now, only if there was a reliable JavaScript RIPScript interpreter. :)

a1k0n 11y ago
Haha, sure, let me push some fixes to the github repo. RIP script, OMG. I remember that. With HTML canvas, shouldn't be too hard, though it would be weirdly high-resolution.
- sjs382 11y ago
  I definitely won't be implementing the tracker code anytime in the immediate future. Maybe in a month? Andy Herbert started a ripscrip interpreter that renders to canvas, but it isn't finished and definitely isn' reliable for artscene files. He doesn't intend to finish it, last I heard. https://github.com/andyherbert/ripscript.js https://github.com/andyherbert/ripscript.js
- carl8 11y ago
  I tried writing a RIPscript generator in javascript a few years ago. I thought it would be easy, but it's surprisingly not. It's unfinished, but here it is if you'd like to try it out: http://carl.gorringe.org/pub/code/javascript/RIPview/ripview.html http://carl.gorringe.org/pub/code/javascript/RIPview/ripview...
  - deleted 11y ago
    [deleted]
bane 11y ago
Oh awesome! I love artpacks and the app. Quick question, what did you use to render the ANSI art to images?
- sjs382 11y ago
  There are a lot of libraries to do this. I use ansilove.js[0], which renders to canvas, so I save on the expense of keeping 10G of rendered images online (at the expense of my users compute times). Ansilove.js is a variant of Ansilove, which was originally written in PHP [1], but has been ported to other languages [2], too. There are a bunch of other renderers too like piece [3] and Pablo [4]. [0] http://andyherbert.github.io/ansilove.js/ http://andyherbert.github.io/ansilove.js/ [1] https://github.com/ansilove/ansilove https://github.com/ansilove/ansilove [2] https://github.com/ansilove/AnsiLove-C https://github.com/ansilove/AnsiLove-C [3] https://github.com/textmodes/piece https://github.com/textmodes/piece [4] https://github.com/cwensley/Pablo.Gallery https://github.com/cwensley/Pablo.Gallery

dogprez 11y ago

Awesome, fasttracker 2 and qbasic were the most formative programs of my youth. I'll upvote anything to do with fasttracker 2 all day.

errozero 11y ago

Great work. Nice smooth visuals too. Could you implement a html5 file reader to load any .xm file?

a1k0n 11y ago
Yep. Just added drag-and-drop to the player window; drag a local .xm file onto it to load it. Only tested in Chrome.

ryanmarsh 11y ago

OMG spent so many hours late at night in my teens on FastTracker 2. This is incredible. Now I'll have to dust off those floppies.

fapjacks 11y ago

Oh wow I spent so many nights playing and making MODs and chatting with my other nerd friends on BBSes of the day trying to share knowledge. This is truly a much-appreciated work of art! On another note, I think the people commenting in this thread would be really great together in a room somewhere with beer and computers. It's a very specific cross-section of both a skillset and a point in time.