JS1k: The JavaScript code golfing competition

_='K P(f/t=a.curr,g=aGaQ/ga)t1SlNrRampTo0,;o=aOscillator($frequcy.v@ue=f,$	gn?(n(tff():($XarWt$Xop(ouW$dB	gg.dB,1e3)}a=Uw AudioCxt,d(n=[123.47,196,246.94,392,493.88,783.99,987.77,1567.98],r=[],T
z_T.YZp~Ti=8{T
tr_j=8;j`t
td_t.f=n[i]S.wY=t.&FS..transiZ .2s N"S|=!|},Ttr.push(t);pT)}w
J_wZUw sg~w.hNd+Z<>html;wY*&*:#222}body-cell;vertic@mYdD;xtcr}#p{marg:1em auto;cursor:por;:#fff}td:hover{box-shadow:t 0 0 10px #3f3}J{ft:16pt sans-rif;paddg:.5em 1em}",u=7,tInrv@(u=++u%8,iFi%8==u?o?(P(f^3b3"):^020":o?^fff":^000"},500(wiFo=Ma.randomQ<.3})Q;
=EDmW"background.appdChild(KQ{r[i].	a.deXa)}),XyD	cUcW{dBplay:ztTime.crN$noOon;i`infor(.=.UrHTML.click=documtV@ueA(thtetit+1)-@ign:ense$o.&height*:100%;/){wi(@alBisDleF=64JbuttKfuncNeaQ()S,tUneWt(XstYidZ="^"#_"`--;)ztabD|B.o~",b';for(Y in $='~|z`_^ZYXWUSQNKJFDB@/*&$	
')with(_.split($[Y]))_=join(pop());eval(_)

Xz0nSyBQKGYvdD1hLmN1cnIeDCxnPWEOR2ESUS9nYRIpH3QYMVMHbBJOclJhbXBUbxgwLBw7Bm89YQ5Pc2NpbGxhdG9yKAckZnJlcXUeY3kudkB1ZT1mLCQJZwcPbj8oD24odAcPZmYoHCk6KCRYYXJXdAckWG9wKBwHHwxvdVcEJGRCCWcHZy5kQgYsMWUzKX0TYT1VdyBBdWRpb0MQGnh0LGQoB249WzEyMy40NywxOTYsMjQ2Ljk0LDM5Miw0OTMuODgsNzgzLjk5LDk4Ny43NywxNTY3Ljk4XSxyPVtdLFQBel9ULllacH5UB2k9OBF7E1QBdHJfaj04O2pgdAF0ZF90LmY9bltpXVMud1kZPXQuJkZTLggudHJhbnNpG1oCIC4ycyBOHyJTFnw9IXx9LFQDdAdyLnB1c2godCk7cANUKX13AUpfdxVaVXcgcxBnfncHFy5oTmQVK1o8CD5odG1sCzt3WRkqJioCOiMyMjJ9Ym9keQstY2VsbDt2ZXJ0aWNAHW1ZZEQ7Gnh0HWMeGnJ9I3B7bWFyZxI6MWVtIGF1dG87Y3Vyc29yOnBvEhpyOwI6I2ZmZn10ZDpob3Zlcntib3gtc2hhZG93OhIfdCAwIDAgMTBweCAjM2YzfUp7ZhB0OjE2cHQgc2Fucy0fcmlmO3BhZGQSZzouNWVtIDFlbX0iLHU9NywfdEluGnJ2QCgEE3U9Kyt1JTgsaUYRaSU4PT11PwVvPyhQKAVmBxReM2IzIik6FF4wMjAiOhQFbz9eZmZmIjpeMDAwIn0sNTAwByh3FhNpRhEFbz1NYRkucmFuZG9tUTwuM30pUTsBPRcORURtHlciAmJhY2tncm91bmQDLmFwcB5kQ2hpbGQoBEtRewVyW2ldLgYJYS5kZVgSYRspfQcpLAhYeUQJYxBVY1cLe2RCcGxheTp6DHRUaW1lDi5jck4aDyRubxpPEG9uETtpYBJpbhNmb3IoFAUILgI9FS4SVXJIVE1MFi4QY2xpY2s9BBdkb2N1bR50GFZAdWVBDCgZdGgadGUbdGkQHHQrMSkdLUBpZ246HmVuH3NlJG8uJmhlaWdodCo6MTAwJTsvKXt3aRkoQGFsQmlzRGxlRj02NEpidXR0EEtmdW5jG05lYVEoKVMsdFVuZVd0KFhzdFlpZFo9Il4iI18iB2AtLTspenRhYkR8GUIub34iLGIDJztmb3IoWSBpbiAkPSd+fHpgX15aWVhXVVNRTktKRkRCQC8qJiQfHh0cGxoZGBcWFRQTEhEQDw4MCwkIBwYFBAMCAScpd2l0aChfLnNwbGl0KCRbWV0pKV89am9pbihwb3AoKSk7ZXZhbChfKQ==

// lowercases are global VALUES
// uppercases are global FUNCTIONS
// local values are t, T, i, j, k

// jshint ignore: start

// -- globals and methods and shorthands --

a = new AudioContext;

d(); // remove canvas

function P(f) { // play a note with frequency

	t = a.currentTime;

	g = a.createGain();
	with (g) {
		with (gain) {
			setValueAtTime(1, t);
			linearRampToValueAtTime(0, t + 1);
		}
		connect(a.destination);
	}

	o = a.createOscillator();
	o.frequency.value = f;
	o.connect(g);
	if (o.noteOn) {
		o.noteOn(t);
		o.noteOff(t + 1);
	} else {
		o.start(t);
		o.stop(t + 1);
	}

	setTimeout(function() {
		o.disconnect(g);
		g.disconnect(a.destination);
	}, 1e3);

}

n = [
	123.47,
	196,
	246.94,
	392,
	493.88,
	783.99,
	987.77,
	1567.98
];

r = [];

// -- add the elements to the DOM --

T = document.createElement('table');
T.id = 'p';
b.appendChild(T); // add table to body
for (i = 8; i --;) {

	T = document.createElement('tr');

	for (j = 8; j --;) {

		// make a <td>
		t = document.createElement('td');
		t.f = n[i];
		t.width = t.height = 64;
		t.style.transition = 'background .2s ease';

		// toggle status on click
		t.onclick = function() {
			this.o = !this.o;
		};

		T.appendChild(t); // add column to row
		r.push(t);

	}

	p.appendChild(T); // add row to table

}

w = document.createElement('button');
w.innerHTML = 'new song';
b.appendChild(w);

// -- styles --

document.head.innerHTML +=
	'<style>' +
	'html{display:table;width:100%;height:100%;background:#222}' +
	'body{display:table-cell;vertical-align:middle;text-align:center}' +
	'#p{margin:1em auto;cursor:pointer;background:#fff}' +
	'td:hover{box-shadow:inset 0 0 10px #3f3}' +
	'button{font:16pt sans-serif;padding:.5em 1em}';

// -- play that funky music --

u = 7;
setInterval(function() {

	u = (++u) % 8;

	for (i = 64; i --;) {

		if ((i % 8) == u) { // it's the current beat for this one
			if (r[i].o) {
				P(r[i].f);
				r[i].style.background = '#3b3';
			} else {
				r[i].style.background = '#020';
			}
		} else {
			if (r[i].o) {
				r[i].style.background = '#fff';
			} else {
				r[i].style.background = '#000';
			}
		}

	}

}, 500);

// -- reset stuff --

(w.onclick = function() {
	for (i = 64; i --;) {
		r[i].o = Math.random() < .3;
	}
})();