Page style:

A Blue Perspective: Deep + Vocal + Bliss DJ Mix

Deep + Vocal + Bliss DJ Mix
21 January 2013 | 3 comments

It's been a while since I did a house music DJ mix, so I thought I'd put together some tunes that I'm feeling at the start of 2013. This one starts off deep, goes vocal and ends on a blissful high, so take a listen, or download all 50 minutes as an MP3 INSERT:CONTINUED:END

It's been a while since I did a house music DJ mix, so I thought I'd put together some tunes that I'm feeling at the start of 2013. This one starts off deep, goes vocal and ends on a blissful high, so take a listen, or download all 50 minutes as an MP3.

Tracklisting:

  1. Per Byhring - Ettertid (Russ Chimes Remix)
  2. Duke Dumont - Need U 100%
  3. Martyn - We Are You In The Future
  4. Bob Sinclar - I Feel for You (Ben Delay Dub Mix)
  5. Julio Bashmore - Au Seve
  6. Candi Station - Hallelujah Anyway (Larse Vocal Mix)
  7. Hot Chip - How Do You Do (Todd Terje Remix)
  8. Max Lyazgin & John Martin - Good Morning
  9. The Other Tribe - Sing With Your Feet (Instrumental)
  10. M83 - Midnight City (Sharam Jey Remix)
  11. Tensnake - Coma Cat (Stanton Warriors Re Bump)
  12. The Presets - Promises (Lifelike Remix)
music dj mix
A Blue Perspective: Visualising <audio> elements with the Web Audio API

Visualising <audio> elements with the Web Audio API
18 September 2012 | 3 comments

For a new project I'm working on I'd like to create an audio-reactive visualisation using analysis of the music that's playing. The new Web Audio API lets you do this pretty easily in the browser (Webkit-only at the moment).

I'm posting my documented code here with an explanation for anyone else INSERT:CONTINUED:END

For a new project I'm working on I'd like to create an audio-reactive visualisation using analysis of the music that's playing. The new Web Audio API lets you do this pretty easily in the browser (Webkit-only at the moment).

I'm posting my documented code here with an explanation for anyone else who would like an easy snippet to get them started down the music visualisation path. You can view a demo here and download the source code here.

The main concept in the Web Audio API is that you wire up a bunch of modules together. The output from one module going into the input of another module. To this with an <audio> element, you have to create a Web Audio source with it, wire that up to an analyser, and then wire the analyser up to your speakers (so that you can hear the original <audio> again).

The code for all that looks something like this:

var audio = document.getElementById('music');
var audioContext = new webkitAudioContext();
analyser = audioContext.createAnalyser();
var source = audioContext.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(audioContext.destination);

Once you've done that, the analyser is now listening for any output from the <audio> and will have data waiting for you whenever you ask it.

Once you set the audio.play()ing you can query the analyser at any time and check what the current frequency data of the sound is. If we put that analysis into a simple draw() loop then we can graph out what the sound looks like:

function draw() {
	// Setup the next frame of the drawing
	webkitRequestAnimationFrame(draw);
	
	// Create a new array that we can copy the frequency data into
	var freqByteData = new Uint8Array(analyser.frequencyBinCount);
	// Copy the frequency data into our new array
	analyser.getByteFrequencyData(freqByteData);

	// Clear the drawing display
	canvasContext.clearRect(0, 0, canvas.width, canvas.height);

	// For each "bucket" in the frequency data, draw a line corresponding to its magnitude
	for (var i = 0; i < freqByteData.length; i++) {
		canvasContext.fillRect(i, canvas.height - freqByteData[i], 1, canvas.height);
	}
}

You can see a demo of this running in my experiments section. I've just done a very simple line rendering of the frequency data but your imagination is the limit. Download the source code and see what you can do with it!

Stay tuned for the prettiness that I've actually got planned for this code.

Update (2013-04-22): This article has kindly been translated into Serbo-Croatian by Anja Skrba. You can read it here: http://science.webhostinggeeks.com/vizualizovanje-elemenata-sa-web

visualisation music javascript experiment html5 tutorial api canvas
A Blue Perspective: Perfect Summer DJ Mix

Perfect Summer DJ Mix
20 January 2012 | 5 comments

Download the Perfect Summer DJ Mix (175MB)

It finally seems like Sydney's entered Summer. To commemorate the good weather and sunshine vibes, I thought I'd upload an old mix. Perfect Summer is designed for putting on as you drive to the beach or relax on the sand with a cool pina colada INSERT:CONTINUED:END

Download the Perfect Summer DJ Mix (175MB)

It finally seems like Sydney's entered Summer. To commemorate the good weather and sunshine vibes, I thought I'd upload an old mix. Perfect Summer is designed for putting on as you drive to the beach or relax on the sand with a cool pina colada.

It's probably one of the last mixes that I did on turntables with all original vinyl, back in 2007. You can even hear the crackle of dust under the needle in the opening refrains of Solar Stone's Seven Cities.

Anyway, download Perfect Summer (or stream it) and get out in the sun while it's still here!

Tracklisting:

  1. Solar Stone - Seven Cities (Solaris Heights Mix)
  2. Kings Of Tomorrow - Finally (Rulers Of The Deep Mix)
  3. Orinoko - Island (Alternative Dub Mix)
  4. Graham & Blades - Funky Summa
  5. Plan B - #2
  6. Nalin & Kane - Beach Ball (DJ Icey's "The Sea" Mix)
  7. Nalin & Kane - Beach Ball (South Beach Vacation Mix)
  8. Orbital - Frenetic (12" Mix)
  9. Punks - Break Me With You
  10. Golan Globus - Blazer (Version 2)
  11. Maurice & Noble - Hoochie Coochie (Arcaic Mix)
  12. Chris Lake - Changes
  13. Underworld - Two Months Off
  14. Black Rock - Tiger
music dj mix

Visit the Perspective archives

Links

The places we live
Jonas Bendiksen provides a heart breaking photo essay that explores the world's poorest residential areas.
28 July 2009, 11:23

Legerete
This is a beautiful abstract film. Warning, it's a huge (as in wide) Quicktime movie.
01 May 2009, 14:20

The calligraphy of Julien Breton-Kaalam
I've always been jealous of the letterforms in Arabic and Chinese writing. Julien Breton-Kaalam takes Arabic calligraphy to an entirely transcendent realm, though. Particularly his light calligraphy.
10 March 2009, 11:35

Writing in the Age of Distraction
Cory Doctorow delivers some great advice for writers, but it also applies to most knowledge workers.
16 January 2009, 00:22

Auditorium
This is one of the most innovative puzzle games I've seen in a while. It's a cinematic blend of light and sound ... just go and play it, and immerse yourself.
18 December 2008, 00:09

Visit the Link archives