Playing Fasttracker2 .XM files in JavaScript | Hacker News Reader

Playing Fasttracker2 .XM files in JavaScript

a1k0n.net

138 pointsJoachimS26 comments

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?)

Makes me wonder if ScreamTracker3 is doable too.

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.

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

Damn, that playback is as good as I used to get on the old GUS.

Hmm, I appear to have a sample loading overflow bug somewhere... http://www.a1k0n.net/code/jsxm/#nf-chill.xm

Edit: pushed a fix... something is goofy with the sample data in instrument 4.

Whoaaa! Thanks, worked great here. That is terrific to see it running like that. :)

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/ScriptProce...

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)

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...

iOS safari supports it just fine and has since it first came out.

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.

edit: THANK YOU! That was the issue; I had to make a dummy oscillator. And, separately, there was a CSS issue which made the buttons black on black. Now it works on iOS.

This is awesome. I'm going to incorporate this into http://Artpacks.org soon, if you don't mind!

Now, only if there was a reliable JavaScript RIPScript interpreter. :)

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.

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

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...

Oh awesome! I love artpacks and the app. Quick question, what did you use to render the ANSI art to images?

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/

[1] https://github.com/ansilove/ansilove

[2] https://github.com/ansilove/AnsiLove-C

[3] https://github.com/textmodes/piece

[4] https://github.com/cwensley/Pablo.Gallery

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

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.

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

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

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

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.

So... Nibbles?

Sorry, haven't worked that in yet...

Reply on news.ycombinator.com