Warning: Declaration of Jetpack_IXR_Client::query() should be compatible with IXR_Client::query(...$args) in /home/clients/7267bc096562fcdb78c0ab60d3ac51fb/web/blog/wp-content/plugins/jetpack/class.jetpack-ixr-client.php on line 91
{"id":824,"date":"2016-06-20T17:02:49","date_gmt":"2016-06-20T17:02:49","guid":{"rendered":"http:\/\/barradeau.com\/blog\/?p=824"},"modified":"2016-06-30T17:31:36","modified_gmt":"2016-06-30T17:31:36","slug":"the-great-animal-orchestra","status":"publish","type":"post","link":"http:\/\/barradeau.com\/blog\/?p=824","title":{"rendered":"Le Grand Orchestre Des Animaux"},"content":{"rendered":"

I\u00a0worked for the past 3 months\u00a0on a\u00a0website with the good people at\u00a0Upian<\/a>\u00a0for the good people of\u00a0L<\/a>a Fondation Cartier, pour l’art contemporain<\/a>.<\/p>\n

It is called: Le Grand Orchestre Des Animaux<\/a>\u00a0(The Great Animal Orchestra) and is\u00a0based on the work of Bernie Krause<\/a>, a man who\u00a0dedicated his life to recording the sounds of nature and raising awareness\u00a0about its\u00a0degradation through time in a striking\u00a0manner.<\/p>\n

This project is not advertising. I’m used to short lived and rather pointless websites, this one is\u00a0supposed to live (virtually) forever and conveys a powerful message. This changes the way we did it, we had more time, we discussed a lot. As a dev, I had a word to say about how I thought things should go, even on the conceptual level. It is unfrequent and\u00a0very<\/strong> enjoyable.<\/p>\n

Sound<\/h2>\n

The\u00a0core material of the website is sound, it’s the\u00a0raison d’\u00eatre<\/em>, the pivot of this experience. First we discussed about using the WebAudio API to perform spectrograms, cross blends, 3d\u00a0panning and all sorts of weird filtering but it didn’t quite fit with the work of Bernie Krause. Instead\u00a0we chose a more respectful<\/em> approach to the sound material and no real-time alteration.<\/p>\n

I was not in charge of the sound production\u00a0–\u00a0we left it to a professional\u00a0–\u00a0yet I know that he\u00a0used \u00a0the spectrograms to isolate animal species and split each track into sets of\u00a0tracks by frequencies. the sound frequencies are distributed like the instruments in an orchestra, as seen from above, the slices<\/em> or partitions<\/strong> represent given sets of frequencies corresponding to differents sets of animals vocalizations that in turn correspond to sets of instruments in an actual orchestra (the intro video explains this quite clearly).<\/p>\n

here’s how the frequencies are distributed\u00a0in the orchestra, each type of animal occupies a given space or as Bernie Krause puts it, an “acoustic niche”.<\/p>\n

\"layout\"<\/p>\n

The mobile version uses the WebAudio API (WAA) to get slightly better playback synchronisation but the desktop uses regular Audio tags to remain compatible with older browsers. The WAA\u00a0comes at a cost as each audio track must be somehow\u00a0decompressed<\/em>\u00a0once loaded.\u00a0As all we needed\u00a0was crossfades, there was little reason to use the WAA.\u00a0The rest is a fairly regular multitrack playback “engine”, with multitrack resync\u00a0and a selective batch\u00a0crossfade.<\/p>\n

For a better balance\u00a0of the tracks, I came to lower the overall volume of all\u00a0track\u00a0and have\u00a0the ability\u00a0to set each track’s volume separately, the JSON looked like:<\/p>\n

\"volumes\" : [\r\n  { \"default\": 0.715, \"hover\":1.000, \"out\": 0.25 },\r\n  { \"default\": 0.715, \"hover\":1.000, \"out\": 0.25 },\r\n  { \"default\": 0.715, \"hover\":0.858, \"out\": 0.25 },\r\n  { \"default\": 0.715, \"hover\":0.715, \"out\": 0.25 },\r\n  { \"default\": 0.715, \"hover\":0.715, \"out\": 0.25 },\r\n  { \"default\": 0.715, \"hover\":0.715, \"out\": 0.25 }\r\n],<\/pre>\n
the “default” state volume is not 1 but 0.715 which roughly corresponds to a global volume turned down by 40%.\u00a0The “hover” volume\u00a0emphasizes individual\u00a0tracks on rollover (or tap), some are so low that they needed to be amplified up to 140% which corresponds to a volume of 1. Apart from this, all I did was to use Howler<\/a>\u00a0and Circular easeIn \/ easeOut crossfades as they sound more natural than linear easings.<\/p>\n
Graphics<\/h2>\n
At first sight it may not seem like much as there is no fancy 3D graphics or rock’n roll animations but it’s one of the most complex websites I had to work on. I’ll\u00a0review some of the solutions that were adopted so that the app works as well as possible on various platforms.<\/p>\n
Below is one of the original designs, one would call it a simple<\/em> setup yet if you look carefully, many\u00a0different layers<\/em>\u00a0build up the final image.<\/p>\n
\"design\"<\/p>\n
A gradient in the background that appears in the central disc, a blue-ish grain, a drop shadow to emphasize the central disc, bright semi-transparent outlines, \u00a0a colored halo at the bottom of the page to emphasize the playback controls, some colored halos where it’s hard to\u00a0tell whether they’re part of the foreground or\u00a0the background, a greyscale, semi transparent image in the background and some subtle hues variations and overlays of sprites with drop shadows. All of which contribute to the elegance of the final picture.<\/p>\n
As usual, before starting the production and in order to obtain an\u00a0identical\u00a0cross-browser \/ cross platforms render of the visual, I decided to perform some R&D.<\/p>\n
in the browsers’ jungle<\/h3>\n
My first thought was to use SVG as it is well supported across browsers<\/a>\u00a0and allows for blend modes and other filters (desaturation, blur, shadows) that were present here and there in the original designs.\u00a0here’s what my\u00a0test page looked like on 4 different browsers (left to right, top bottom:\u00a0FireFox, Edge, Chrome &\u00a0Internet Explorer 11, PC, Windows 10 ).<\/p>\n
\"Capture<\/a><\/p>\n
It’s easy to spot some of the differences but also to miss some\u00a0of them, here’s a list from the most obvious to the most subtle:<\/p>\n