It was back “in the old days” and I remember my relief when some day I found out that all PCs were not necessarily mute: Thanks to some “walking frame” called “AdLib” they could actually make sounds… and a bit later things became pretty neat with the rise of Sound Blaster…
AdPlug plays sound data, originally created for the AdLib (OPL2) and Sound Blaster (Dual OPL2/OPL3) audio boards, directly from its original format on top of an emulator.
My latest bit of Xmas tinkering is a HTML5/WebAudio version of AdPlug (Thanks to Simon Peter and the other authors of AdPlug.). For a live demo click on the below image..
To complete the set of chipmusic emulators, here my WebAudio version of SC68 – an AtariST music emulator (that plays files like *.sc68 or *.sndh).
Eventough I had done some programming on the MegaST 4 back in the 90ies, I have to admit that at the time I had not realized that the machine had anything resembling a sound chip. Those were the days of 68k assembler, DSP machine code and GFA-Basic.. and we were just doing a Paintbox software for the “CHILI” framegrabber and realtime video-effects extension card… 🙂
But it seems the ST not only did have a MIDI interface but also a built-in sound chip…
Thanks to Photon Storm for sponsoring this little project.
This experiment once again confirmed my ealier observations that the debugger support built into today’s web browsers is utterly useless (but for the most trivial scenarios). So this not only was a travel back in time with regard to home computer music but also with regard to the modern developement tools that I had gotten used to: bye bye IDE – welcome back debug/trace output.
For all those thinking ‘ahhh but Chrome is so much better’ – think again: While it is true that Chrome’s developer tools are real quick there is a catch. Or as a colleague once said: “if the result does not have to be correct my code can be real quick!”. Here is an example of a situation that you may encounter while debugging in Chrome (this is actual – non tampered with – debugger output):
The debugger here has just stepped over a line of code that sets some variable to 0. On the very next line the debugger tells you that this very variable is NOT 0.. Another fun Chrome surprise is when you find that Chrome’s garbage collector will actually trash ‘event handler’ functions that are still in use – unless you separately anchor them to some dedicated variable.
I am so glad that I never make any mistakes as a matter of principle 🙂 So my latest bit of music playback programming could not be stopped by foul developer tools:
And what was this experiment about? xmp is a module player that plays over 90 mainstream and obscure module formats from Amiga, Atari, Acorn, Apple IIgs and PC, including Protracker (MOD), Scream Tracker 3 (S3M), Fast Tracker II (XM) and Impulse Tracker (IT) files. This functionality is now available on my little web page (click on the image above) 🙂
(You’ll find the source code here: http://sourceforge.net/projects/webxmp/)
I just completed my latest experiment 🙂 It is a revamped Web version of Orion Sky Lawlor’s “GPU-Accelerated Rendering of Unbounded Nonlinear Iterated Function System Fixed Points” (see here).
For good measure I have added a bit of music interaction 🙂 I suggest you have a look at the live demo here (Chrome recommended). A Youtube recording can be found here.
The music I selected above is by Dexter Britain and licensed under a Creative Commons license. (see www.dexterbritain.co.uk)
Programming background information:
- Starting from Dr. Lawlors opengl/C++/Windows program the main step was to get rid of any opengl legacy fixed pipeline rendering and replace it with a programmable pipeline WEBGL equivalent. Then some WEBGL limitations still had to be dealt with, e.g. adding missing WEBGL shader functions, replacement of unsupported for-loops in shaders or unsupported texture modes, etc. Luckily this process proved easier than expected. The resulting WEBGL/JavaScipt program works quite fluidly in Chome (on my GXT460). Firefox’s WEBGL implementation also works for the most part – but it occasionally it crashes for no good reason and it is rather slow in compiling the shaders.
- Some surprise obstacles came with the attempt to implement the music playback and hook it up WebAudio’s AnalizerNode infrastructure: The first attempt to use some XMLHttpRequest based loading with AudioContext.decodeAudioData() processing proved a total failure, because Firefox’s implementation (versions 31 -33) just fails to decode the (supposedly “invalid”) mp3 data. Also it became obvious that the upfront decoding of the complete mp3 file (in Chrome) adds an unacceptable delay to the music startup. Interestingly playback of the same mp3 file works flawlessly in Chrome as well as in Firefox when using the HTMLAudioElement. So that’s what I am using now. Unfortunately that API is not implemented consistently in the different browsers and particularily the event handling in Firefox leaves a lot to be desired. But even Chrome fails to properly “loop” a song but instead goes into some corrupt state at the end of some (especially longer) songs. Once again browser specific tinkering is called for…
- The page uses multiple AnaylzerNodes with low-/band- and high-pass filters to detect certain music patterns that are then reflected in the graphics. Unfortunately Firefox again proved a difficult customer: Connecting FilterNodes to the HTMLAudioElement here sporadically leads to corrupted music playback. Also the Firefox FilterNodes produce completely different results than the Chrome ones.
Did I mention that I love fractals? In fact I do and that’s why I created the below intro:
I am using orbit trap logic that I implemented in a WEBGL fragment shader. The add-on text scrollers/messages sport an exploding-pixels effect which is done using plain Canvas pixel operations. For good measure I added my WebAudio based SID chiptune playback (see my previous posts).
I guess that next time I’d better leave all the graphics to the GPU .. because my CPU is just getting too old. In case you are using a recent browser and if you have some sort of GPU in your computer, you might try to see the online version by clicking on the above image.
On my second trip to the world of THREE.js and WEBGL I tried out yet another bunch of “new” things:
- use of THREE.js EffectComposers and Shaders to create “glow” effects, etc
- creating lightweight 3D text rendering by rendering a 2D font into a texture and by creating a geometry that then represents each character as two simple textured triangles
- create THREE.ShaderMaterials (i.e. WEBGL vertex and fragement shaders) to then apply visual effects to the above 3D text (e.g. rolling the characters or exploding the text-page, etc)
Then I came across Felix Woitzel’s fascinating “Travelling Wavefronts” demo and I had to understand how its WEBGL shader logic is done 🙂 After some tinkering I ended up with a slightly cleaned up version of my own with some added visual effect features:
After throwing all of the above together and and adding a bit of WebAudio based SID chiptune playback (see my previous experiment), I ended up with a little Web intro 🙂 Those with a reasonably fast GPU may see it in action here (due to my old CPU I really like to use as much of the GPU’s power as I can..).
At last Firefox and Chrome seem to be making steps forward with regard to audio 🙂 .. giving me an opportunity to migrate my Flash based music player (see previous experiment) to an HTML5-only implementation.
PS: Unfortunately Chrome and Firefox still don’t seem to be on the same page with regard to correct chaining of Nodes.. still some work to be done.
By chance I had recently come across a very cool 3D web page and thereby discovered what modern web browsers meanwhile are capable of.
The experiment here is my THREE.js based equivalent of “hello world” – which I did to just get a first glimps at what it means to do 3D in the browser (the live version is here).
I added a Web Worker based fractal generator to experiment a bit with the benefits of a respective asynchronous approach.
Eventhough they haven’t managed to get the tranparency handling right yet (see here), the guys at THREE.js are certainly doing a great job abstracting from the ugly details of WEBGL wiring! (What they don’t seem to have any clue about is API management and backward compatibility.. e.g. repeatedly inverting the orientation of their 3D coordinate system from one version to the next.. LOL)
Having the building blocks of my SID player available (see earlier posts), it really was no brainer to take up the suggestion of a colleague to take his Rockbox version of a MOD player and also turn it into a Flash version (it took about half an hour).
To try out at least something new, I decided to tap the WebService of a popular chiptune page and learn how that is done with PHP. Also I am using AJAX to integrate the resulting data.
As I had already done in my SID version I am using a PHP/cURL based proxy script to work around the Flash security restrictions and load the music files indirectly from the respective domain.
The result can be seen here.