Skip to content

Instantly share code, notes, and snippets.

@moklick moklick/website2synth.js
Last active Dec 15, 2015

Embed
What would you like to do?
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.
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";
}
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.