Announcement: JavaScript/HTML5 IT/MPTM parser library

[bvanoudtshoorn]

Hi all,

As you might know, one of my pet projects is an HTML5 "demo"-building system, based on the concept of "performers" (zero or more performers per instrument), at https://github.com/barryvan/trackPerformer. Whilst I'm pretty happy with the concept, the difficulty in its use lies in transforming the IT/MPTM file into a format that trackPerformer understands.

Well, I've been working on filling that gap, and to that end, I've started work on a system for parsing IT/MPTM files in JavaScript -- entirely in the browser. It's up on GitHub at https://github.com/barryvan/modReader. It requires a fairly recent and decent browser -- Firefox and Chrome should work fine. (My main development environment is Firefox's Aurora channel.) You can grab a copy of the entire repo, unzip it somewhere on your hard drive, and open up "index.html" in your browser to start playing.

What does it do? Well, it'll load up the file you specify (locally -- nothing is sent to the server, ever), and parse it, extracting out information like basic header information (title, tempo, measure length), instrument information, and pattern data -- in short, just about everything you need to then go and build a performance with TrackPerformer. It provides convenience methods (toPerformanceData and printPerformanceData) to make building performances easier.

To build this, I spent some time looking through what little data I could find describing the IT format. Much more useful was a small utility that Jojo kindly sent me a little while ago.

The system is very far from complete, and I'm sure that there are bugs a-plenty. I'd really love to fill out its capabilities -- particularly anyone who is intimately familiar with the MPTM format.

To give some context, the ultimate goal of all this is to provide a studio, such that composers can grab their latest track, and dynamically build a performance which they can embed on their website, record and put on YouTube, post to Google+, and so on. In other words, demos for the masses.

I'm more than happy to help out anyone who'd like to take a shot at building a performance using these tools. As an example, my latest effort is up on Mozilla's Demo Studio (https://developer.mozilla.org/en-US/demos/detail/trackperformer-contrast) -- I'm sure that most of the contributors on MPC can do better than that!

[LPChip]

Is there an example video somewhere to see how its being used and what you can do with this?

[bvanoudtshoorn]

No example video yet (I'll try to do one next week when I'm back at my Linux box).

In the interim, all you need to see what it does is a recent and decent browser. Grab a copy of Firefox 9 or above (in other words, stable, beta, or aurora), load up https://developer.mozilla.org/en-US/demos/detail/trackperformer-contrast/launch, and, when prompted, "click to start"!

To largely quote from what I wrote on the MozDemos site:

TrackPerformer provides a stage for the visualisation of music. Rather than analysing the audio content of the music, though, TrackPerformer uses the notation -- the abstract representation of the music -- and allows one or more performers to “play” each instrument visually.

There are a number of unique performers, as well as various pre- and post-filters that can be applied. TrackPerformer uses HTML5 Audio, and employs requestAnimationFrame (where available!) to keep things ticking along quickly and in time. Unfortunately, some of the filters require pixel-by-pixel manipulation of the canvas, and can be slow in some browsers and on older hardware. In testing, Firefox provides the best performance, followed by Chrome and Opera.

If you are struggling with performance issues, then you can try a simpler demo, like the first one, http://barryvan.github.com/trackPerformer/colony.html, which doesn't use the processor-intensive filters (because I hadn't written them yet!). There are also more demos on the project's GitHub homepage: http://barryvan.github.com/trackPerformer/.

Essentially, I want to make it possible for artists to create compelling visualisations for their music that do more than just analyse the sound. I want artists to be able to craft the visualisations like the craft the music itself. Just as non-programmers can use OpenMPT to create great music, so too should they be able to create visual representations of that music without having to get a degree in Computer Science. That's the ultimate goal; we're not there yet. But I'm going to keep pushing towards it -- if only so that I can enjoy seeing mods made visible.

[LPChip]

Niiiiiiice!

I mean: Niiiiiiiiiiiice!

Played using Opera. Performance in my browser is better, but the recording program caused a little bit of lag. Nothing serious though.

[bvanoudtshoorn]

Brilliant -- thanks! I really appreciate your taking the time to record it and put it up on YouTube.

[LPChip]

It was a quick action, really. I fired up the program, let it record while playing the song (I first made sure it worked, and then I actually listened for myself during the recording). Then from Camtasia, I just said: Produce and chose youtube. Entered some text, and 10 minutes later it was up and running. Took me maybe 30 minutes total. Certainly worth the trouble for what we get in return.

I'd love to see a tutorial video though, that shows how you make such page. I'd like to make one for my chiptunes.

[bvanoudtshoorn]

Well, it's not a video, but http://www.barryvan.com.au/2012/01/trackperformer-step-by-step/ is a freshly-written guide to creating a performance using TrackPerformer and ModReader. It should get you going.

Bear in mind that at present, TrackPerformer expects (and requires) your mod to be exported using the Modern tempo mode, as it's the most accurate. The other tempos will unfortunately drift over time.

If you have *any* questions, let me know. I'm more than happy to help you produce something!

[LPChip]

I see.

I'll play with this when I have some time.