I have a LOT of material from last month, so I tried to push a lot of tracks in little time. Quite satisfied with the result, though not with the trouble I went trough do get it on youtube. First I got the message I could upload videos longer than 15 minutes, then I made a video of a 19 minute set, then it was rejected because of copyright issues, then I made a quick mix without that track and uploaded it to see if it was all right, then it was rejected because my longer-than-15-minute rights were revoked, then I made a shorter quick mix and uploaded it, it was all right, then I made the final video for that mix, then when I opened my upload page my longer-than-15-minutes rights were reinstated, then I decided I was done for this month and simply uploaded the video. Pfff. Not much fun.

Tracklisting

• Noisia – Could This Be (Original Mix)
• Smooth – From Within
• Subsonik – Inside Your Mind (Feat. Essence)
• L Plus – Gas Grenade
• Davip, Engage & Conectivers – Massacre
• Cyantific – Infinity
• Interface – Get Down
• Octane & DLR – Ordnance
• Krakota – Scraper
• Smooth – Shifting Sands, Pt. 2 (feat. Shaz Sparks)
• Need for Mirrors – Columbia
• Pdex & Retrospekt – Dizzy
• Cause4Concern – Dead Planet
• Crystal Clear & Zen – Bullet
• 2dB – Virus
• Incube – Starscream

Mix of the Month
2012 Jan
2011 Oct Nov Dec

My second monthly mix, sorry for the delay but early January I was busy recording a 6 hour mix of last year’s best tracks. The rule I invented and broke last month (make it 10 tracks) is going out of the window, I’ll just see what each month brings from now on.

Tracklisting:
* Indivision – Missing You
* Tantrum Desire – Reach (Push the Feeling) [Original Mix]
* Sparkzeeman – Back In 5 Minutes
* ShockOne – Relapse (Tantrum Desire Remix)
* Majistrate – Oxygen
* Modified Motion & Faction – Sci-Fi (Supreme Being Remix)
* Dominator – Holes in Ya Chest (feat. Fat Man D)
* Sensai – Greater Power
* Mindscape & Jade – Orion
* Pleasure – Cradle
* The Damn Bell Doors, A Girl & A Gun – Stun Gun (Original Mix)

Mix of the Month
2012 Jan
2011 Oct Nov Dec

• I did not prepare a tracklist but improvised a set as usual. I did, obviously, only use tracks from 2011 and tried not to use the same artist or release to much
• I’ve specialised in popular DnB and Jump-up but the two hours were gone before I got to those genres.
• I tried some changes to my mixing style to make it cleaner and tighter, and am quite content with the result.
• I found out I’ve acquired a lot of music in 2011, so part 2 contains only pop tracks

Download the 2011 mix:
Part 1
Part 2
Part 3

Mix of the Month
2012 Jan
2011 Oct Nov Dec

Part 1
Part 2

It does not, however, work that way with the three finger gesture to go to the next or previous page, which also works as the back/next button in my browser. Visualizing the pages of a document or in your browser history as numbered pages going from left to right seems the most natural (if you read from left to right as I do). But swiping to the left brings you to the previous page, not the next. I ask you to go into mission control. Do a four-finger swipe to the left, and then a three finger swipe to the left and see what happens (you will go to the next space, and then go back to the previous space). Same direction, different result.

The trackpad gestures take little time to get used to, the direction doesn’t really matter that much because you get used to it. But because these swipe gestures are inconsistent they still causes me to make the wrong gesture. I hope those human-interface geniuses at Apple will realize this too and, most importantly, fix it.

Delta Heavy – Overkill
Overkill/Hold Me – Single
Dom & Roland – Rollstar
Last Chance Saloon/Rollstar – Single
Foreign Concept & Bringa – Cemetery
Shogun Audio Presents – Way of the Warrior
High Contrast feat Tiësto and Underworld – The First Note Is Silent
The First Note is Silent – EP
Nero – New Life
Promises EP
S.P.Y – Bloodshed
Fierce Presents Oblivion – Single
Telekinesis – Sacrifice
Sacrifice/Polaris – Single
Trei & L.A.O.S. – The Light
The Light / Mumbo Jumbo – Single

And for your convienience I’ve put them all in a youtube playlist.

Finally I like to point your attention to this album compiled for the 15th birthday of Drum & Bass Arena. It contains 50 gems ranging from oldskool classics to this year’s hits. Even if you, like me, already have most of the tracks there are probably enough left that make it worth buying (€6.99 on iTunes).

Drum & Bass Arena: 15 Years
dnba15.breakbeat.co.uk

Mix of the Month
2012 Jan
2011 Oct Nov Dec

Lots of Javascript

The entire functionality (API calls to retrieve the location and weather, user input and the animations) is in the javascript front-end. Not my most elegant because all animations are (slightly) different and the whole application flow is basically displaying the current step and then waiting for user input or the response of an API-call.

Location and weather APIs

Stan Wiechers has created geo-location-javascript which I gladly use to determine the location of the user. I’ve used the Google maps API for three reasons:

1. Visualisation of the location
2. A convenient way to let the user input his location if it cannot be determined automatically
3. Reverse Geocoding (Address Lookup) which, according to the TOS, you can only use if you actually display a map.

For the weather I use the Google weather API. The downside is that is it an unofficial API so there is no official documentation and chances are the functionality will change without notice. Unfortunately there is no good alternative if you want the weather based on a longitude/latitude location (there are some US-based weather API’s that support long/lat locations and Yahoo! uses its own WOEID which means adding extra steps (reverse geocoding, obtaining an WOEID, retrieve the weather).

SVG images

Almost all images on the site are SVG images, because they were created as vector images anyway and vector graphics are the shit! SVG images, even though they are uncompressed XML, are way smaller than bitmap files and resize beautifully. Because MSIE support is poor (not supported below version 9) I’ve added some javascript that replaces all SVG references to PNG images.

Inline

I exported the image to SVG using Adobe Illustrator, loaded the XML in my favorite editor and went back to Illustrator. Naming the layer I needed to animate and exporting it again was faster than guessing which path I needed based on the d attribute. The inline SVG code worked immediately in Firefox, but not in Safari and Chrome (both use webkit). This is where the lack of documentation really got anoying. After lots of experimentation the solution was to place all gradient definitions in a <defs> group.

Aminations

One animation (the thermometer) was a perfect case to dig into SVG animations, which much more elegant and probably more efficient than a javascript setTimeout() based animation. Because the animation had to be triggered by Javascript after the local temperature had been determined an inline SVG image seems the best way to go. At this point it was apparent that SVG isn’t widely used on the web as there were few good sources of documentation. Using the W3C specification because no one has written more friendly documentation and tutorials was a good cue.

<path id="kwik" fill="url(#kwik_1_)" transform="translate(0,161) scale(1,0)" d="…">
    <animateTransform id="kwik_tr" attributeName="transform" attributeType="XML" type="translate" from="0,161" to="0,0" dur="2s" additive="sum" fill="freeze" begin="indefinite"/>
    <animateTransform id="kwik_sc" attributeName="transform" attributeType="XML" type="scale" from="1,0" to="1,1" dur="2s" additive="sum" fill="freeze" begin="indefinite"/>
</path>

The animations are done with animateTransform, the to attribute is changed with javascript so the thermometers output is based on the actual temperature, and because begin is set to indefinite the animation can be started with some simple javascript:

var _sc = Math.min(1, Math.max(0.1, (temp+10)/40));
var _tr = 161 - Math.round(_sc*161);
$('#kwik').attr("transform","translate(0,0) scale(1,1)");
$('#kwik_tr').attr('to','0,'+_tr);
$('#kwik_sc').attr('to','1,'+_sc);
document.getElementById('kwik_tr').beginElement();
document.getElementById('kwik_sc').beginElement();

You can download my script for generating a waveform. It is licensed under the Apache License v2.0 because the original script was (I usually don’t bother with a license).

Too fully get what I’m talking about you should really first read the post on andrewfreiday.com and look at the source code of both his and my script.

The original script gets the input via a POST request and uses eval() to call lame for the conversion. Since I do not want to use eval() my script should be used a a command-line tool and I’ll probably watch a directory or use the cron daemon to call a shell script which will call lame and my PHP script. It takes two parameters: the wave and png file (eg. php waveform.php file.wav file.phg). Same difference, and if you want the original approach it shouldn’t be hard to change it back. The actual waveform generating part consists of two parts: reading the wave file and drawing the image.

Reading the wave file is bases a post by “zvoneM” on DevShed. I’ve looked closely at the wave file specifications and the code that reads the header of the file but changed little. There are some checks on the format of the file, that’s all. I did completely rewrite how the actual is read.

The original code reads one value and then skips a bunch. This approach is not flexible enough and takes more time on large files. Since I am going to post two-hour DJ sets this needed to change. How much values need to be read depends on the width of the image generated. The image is also drawn within the same loop as opposed to looping over an array after reading the file.

The drawing part is mainly the original code, but to improve the quality of the image it is generated and then resized resulting in a more accurate and nicely antialiased image. Multiple values are read for one line to reduce the chance that the one value read is not the most representable for the block of audio it represents. This results in a more full image because less (or no) peaks are missing or to short. The image at the top of this post is generated with a zoom level of 10 and 100 values per line.

#!/bin/bash

count=0
for var in "$@"; do
    count=$(($count + 1));
    files[$count]=$var;
    stats[$count]=`stat -r "$var"`;
done

while [ true ]; do
    i=1
    while [ $i -le $count ]; do
        newstat=`stat -r "${files[i]}"`
        if [ "$newstat" != "${stats[i]}" ]; then
            echo \"${files[i]}\"
            stats[$i]=$newstat
        fi
        i=$(($i+1))
    done

    sleep 5
done