innocenat

Note: Somehow it is hard to keep a regular schedule on blogging. Mostly because I have nothing worthwhile to write

Single Page App (SPAs) is the rage nowadays. Everyone seems to do SPAs left and right, whether it fits their application or not. As with anything concerning web development, there are billions of tools, helpers and frameworks to choose from. Most popular one are Angularjs (¹⁄₂), Emberjs, React and Vuejs.

There are older one like backbone, etc. but we won’t be discussing them todays.

Last October I wrote TypingMania, a type-along game on web based on TypingMania Odyssey of SightSeeker studio. It’s not quite polished (the menu screen could use some serious work), but I am happy with it (well, I wrote it because I want to use it).

That was my first Javascript project in a very long time (~6 years), and of course the web changed a lot in the recent years. If you reviewed the code you will see many old style code, callback spaghetti and many synchronising boolean that look like some bad shot at thread safety, of which Javascript doesn’t have one.

Even though UI is always the most time-consuming part in any game – or application, really – the most fragile part of this piece of code is audio processing. It should be able to show loading indicator to tell how much has it buffered, it must have perfect time synchronising to the type-along part, and it must run in browser.

Web Audio API is one of the cutting edge technology Javascript has offered. (It isn’t even supported in IE11! But both Chrome and Firefox now support it without prefix). It allows direct low-level manipulation of audio data (to sample level).

While .wav file format is supported by all browsers (Support here is defined by ability to be decoded via AudioContext.decodeAudioData, which is normally the same as those supported in <audio> tag), many other format is not, such as MP3/AAC/Ogg due to various patent problems. Because audio codecs, as opposed to video codec, require very low power to decode, it has been done in pure Javascript before (jsMAD, etc). I actually aim to write some audio decoder in pure Javascript too, so the .wav file playing is the first stepping stone. (audiocogs/etc is Not Invented Here™)

tl;dr here’s the code: https://gist.github.com/innocenat/5c5a48365930b691c863 Read on for detail.

You could says I live behind the rock in Javascript world in past two years. I recently developed Typing Mania in pure Javascript, decided to be my own replacement for Flash-based TypingMania Odyssey, which for some reason I can’t set it up properly at all.

Because I haven’t been following what happened in Javascript world recently, I did not know requestAnimationFrame() exists. I use setInterval(func, 20) as my main loop.