website2synth.js creates a super lightweight synthesizer of a website (webkit only :/ ) Use this JS stuff as a bookmark to start the synthesizer. Press an element on the page to play. Enjoy.

website2synth.js

javascript: (

function() {
	var elms = document.getElementsByTagName('*');
	var b = document.body;
	var box = document.createElement('div');
	box.id = "element-chooser-container";

	var buttonContainer = document.createElement('div');
	buttonContainer.id = "sound-change-button-bar";

	var buttons = [];
	for (var j = 0; j < 4; j++) {
		buttons.push(document.createElement('div'));
	}

	var context = new webkitAudioContext();
	var oscillator = context.createOscillator();
	oscillator.connect(context.destination);
	oscillator.type = 2;

	for (var i = 0; i < elms.length; i++) {
		elms[i].addEventListener('mouseover', upd8);
		elms[i].addEventListener('click', prev);
		elms[i].addEventListener('mousedown', play);
		elms[i].addEventListener('mouseup', stop);
		if (typeof elms[i].style != 'undefined') {
			elms[i].style.background = "hsla(" + Math.random() * 360 + ",75%,65%,0.75)";
			elms[i].style.cursor = "pointer";
		}
	}

	var css = document.createElement("style");
	css.type = "text/css";
	css.innerHTML = "body{background:black;}#element-chooser-container{border:3px solid white;position:absolute;z-index:999990;pointer-events:none;}.sound-change-button{float:left;cursor:pointer;padding:0.5em;margin-right:0.7em;opacity:0.7;color:transparent;} .sound-change-button:hover{opacity:1;} #sound-change-button-bar{z-index:999999;position:fixed;top:0;left:0;width:100%;background:rgba(0,0,0,1);font-famaily:Courier;font-weight:bold;font-size:2em;padding:0.75em;float:left;}";
	document.body.appendChild(css);

	for (var k = 0; k < buttons.length; k++) {
		buttons[k].innerHTML = "" + k;
		buttons[k].onclick = changeTone;
		buttons[k].className = "sound-change-button";
		buttons[k].style.background = "hsla(" +  Math.random() * 360 + ",80%,60%,0.8)";
		buttonContainer.appendChild(buttons[k]);
	}

	b.appendChild(buttonContainer);
	b.appendChild(box);

	function findPos(elm) {
		var curleft = curtop = 0;
		if (elm.offsetParent) {
			do {
				curleft += elm.offsetLeft;
				curtop += elm.offsetTop;
			} while (elm = elm.offsetParent);
		}
		return [curleft, curtop];
	}

	function play(e) {
		e.preventDefault();
		var elm = e.toElement;
		var feq = ~~ (elm.offsetWidth / 1.5);
		feq = feq < 250 ? 250 : feq;
		feq = feq > 1000 ? 1000 : feq;
		oscillator.frequency.value = feq;
		oscillator.connect(context.destination);
		oscillator.noteOn(0);
		return false;
	}

	function stop() {
		oscillator.disconnect(0);
	}

	function changeTone(elm) {
		oscillator.type = parseInt(elm.srcElement.innerHTML);
	}

	function prev(e) {
		e.preventDefault();
		return false;
	}

	function upd8(e) {
		var elm = e.fromElement;
		if (typeof elm != 'undefined') {
			box.style.width = elm.offsetWidth + "px";
			box.style.height = elm.offsetHeight + "px";
			var pos = findPos(elm);
			box.style.top = pos[1] + "px";
			box.style.left = pos[0] + "px";
		}


	}
})();