Hakuu in the making (4) — Mnjul’s Intimate Home vs-6517

Part of the post series for my process in making Hakuu.

Almost half a year after I released Hakuu, I’ve finally composed the background music for it, and got it integrated with the website.

The Tone

The piece, titled Lucid Chimera, conveys a lucid dream-like narrative — just like the website, you are surrounded by eternal void brightness, and wherever you go, rain drops on your hair, face, and hands. Your consciousness knows you’re dreaming, and, while you (perhaps) want to escape the rain, the colors of the scene morph so vividly and you’re so fascinated by and absorbed in them, that you’re almost becoming incapacitated of even thinking about escaping.

This is a lengthy minor tone set in rounded binary form, with the first section ending in the relative major, classically. It’s the first time I apply what I learned in the Coursera composition course to a more expanded piece, with voice leading rules and chord progressions taken care of. The accompanying triplet ostinato (à la Quasi una fantasia) depicts the eternity and rain, and the main melody realizes both the voidness (with only at most four notes per measure throughout the piece) and the brightness (with parallel octaves also throughout the piece).

This piece is also the first one I’ve composed with a (digital) piano after I finished the course. With that, I’ve been able to better experiment with my ideas, and my drafts have… become more draft-y:

Even I had troubles reading my own manuscript.

Fortunately, I still have Finale to typeset the score for my sanity:

Not saying that the typeset score is easier to play a prima vista, though…

Ah yes, unlike my other compositions where Finale is used for synthesis with Garritan libraries, this time, it is used mainly for typesetting the score — as this is my personal website’s background music, like Allodynia, I wanted to live performed it. Ideally, I would love to perform this on a real mechanical piano like I did for Allodynia, but this time I’ve only got a FP-30 whose sample quality doesn’t meet my bar, so I channeled the piano through USB MIDI to Garritan CFX Lite running on my laptop (and my headphones are hooked to the output from the laptop through my decade-old DAC/Amp).

And that brings us to the next section of this post…

The Technical

In the end, the “using FP-30 merely as a weighted-key MIDI keyboard” approach went surprisingly trouble-free. I really love the CFX Lite’s sample quality (albeit it ate quite some of my precious laptop storage space), and not much post-processing was needed in Audition, aside from amplification.

As with my other personal websites where it rains perpetually, Hakuu has background raining sound, again sourced from Audition samples. This time, the implementation changed quite a bit:

  • To loop the raining sound, I used Web Audio API. This is due to HTML5 audio producing a gap between loops (even when a wav file is provided). In Allodynia when Web Audio API support was spotty, I worked around the issue by having two identical rain sound files play simultaneously, and using lots of mathematics and timers to adjust each file’s playback position and volume, to deliver the impression that only one rain sound is being looped gaplessly. That was some undertaking! But this time only a dozen lines of code is all I need.
  • However, even with Web Audio API, at least on my Chrome and Firefox, I still needed to use a wav file (instead of mp3/ogg) for a gapless looping effect. This greatly constrained the length of the rain sound due to the need for minimal network loading time (especially as I figured downsampling into 32kHz and mono channel immediately made the high-fidelity rain sound into some random garbled noise, unlike the piano-only background music as below), and the fact that Web Audio API requires a completely loaded file didn’t help either. Fortunately, I was able to strike a balance between realism and the loading time constraint with five seconds of wav.
  • Web Audio API can’t really restart a audio buffer once it’s been stopped, but since it’s just a looping rain sound where there is no fixed start point, I merely muted it when user stops the background music and unmuted it when user restarts the background music, and there’s really no telling it’s different.

For the background music, I used HTML5 audio to cater to the need for stopping/restarting and for the ability to play a download-in-progress stream. To save loading time, I decided to offer a lower quality version of the background music: a 24kbps, 20.5kHz, mono channel MP3 — this seven-minute music’s file size is not even two times that of the five-second high-fidelity wav file! But somewhat as expected, with the raining sound, this heavily downsampled background music doesn’t sound bad at all. Surely, it’s got radio quality-like piano music, but to me, that adds hints that you’re in a dream, where reality is somewhat distorted and veiled.


As with every personal website of mine, after I put the background music and the raining sound up, I could stare at the raining scene and listen to it for one entire hour without even navigating at all. Well, I know, I’ve fallen in love with my own work.

Also, I discovered that while iOS does not allow websites to control volumes for HTML5 audio, Web Audio API doesn’t seem similarly limited. Bug or expected?

Finally, for a high quality, stereo version of Lucid Chimera, please visit my SoundCloud page.


你的電子郵件位址並不會被公開。 必要欄位標記為 *