zakuroishikuro/simple_synth.html

## simple_synth.html
<!DOCTYPE html>
<meta charset="utf-8">

<style>
body {
  background-image:
    repeating-linear-gradient(90deg, transparent, transparent calc(100% / 12 - 1px), black calc(100% / 12 - 1px), black calc(100% / 12)),
    repeating-linear-gradient( 0deg, transparent, transparent calc(100% /  8 - 1px), black calc(100% /  8 - 1px), black calc(100% /  8));
}

p {
  position: absolute;
  padding: 6px;
  background-color: #Dead99;
  border-radius: 3px;
  box-shadow: 0px 2px 2px gray;
}
</style>

<script>

const COMMON_RATIO = Math.pow(2, 1/12); //1.0594630943592953...

function calc_frequency(index){
  return 440 * Math.pow(COMMON_RATIO, index);
}

window.onload = function(){
  var c = new (window.AudioContext || window.webkitAudioContext)();
  var o = c.createOscillator();
  o.start();

  document.body.onkeydown = function(e){ o.connect(c.destination) }
  document.body.onkeyup =  function(e){ o.disconnect() }

  var p = document.querySelector("p");

  document.body.onmousemove = function(e){
    p.style.left = e.x;
    p.style.top = e.y;

    var x = Math.floor(e.x / window.innerWidth * 12);
    var y = Math.floor(e.y / window.innerHeight * 8) ;

    var index = (x + 3) + ((y - 3) * 12);
    var freq = calc_frequency(index);
    var freq_name = "ド,ド#,レ,レ#,ミ,ファ,ファ#,ソ,ソ#,ラ,ラ#,シ".split(",")[(index + 93) % 12];

    if (x > 9) p.style.left = e.x - 100;
    if (y > 5) p.style.top = e.y - 50;

    p.textContent = freq_name + "(" + (freq | 0) + "Hz)";

    o.frequency.value = freq;
  }
}

</script>

<p></p>
<p>press any key...</p>
	<!DOCTYPE html>
	<meta charset="utf-8">

	<style>
	body {
	background-image:
	repeating-linear-gradient(90deg, transparent, transparent calc(100% / 12 - 1px), black calc(100% / 12 - 1px), black calc(100% / 12)),
	repeating-linear-gradient( 0deg, transparent, transparent calc(100% / 8 - 1px), black calc(100% / 8 - 1px), black calc(100% / 8));
	}

	p {
	position: absolute;
	padding: 6px;
	background-color: #Dead99;
	border-radius: 3px;
	box-shadow: 0px 2px 2px gray;
	}
	</style>

	<script>

	const COMMON_RATIO = Math.pow(2, 1/12); //1.0594630943592953...

	function calc_frequency(index){
	return 440 * Math.pow(COMMON_RATIO, index);
	}

	window.onload = function(){
	var c = new (window.AudioContext \|\| window.webkitAudioContext)();
	var o = c.createOscillator();
	o.start();

	document.body.onkeydown = function(e){ o.connect(c.destination) }
	document.body.onkeyup = function(e){ o.disconnect() }

	var p = document.querySelector("p");

	document.body.onmousemove = function(e){
	p.style.left = e.x;
	p.style.top = e.y;

	var x = Math.floor(e.x / window.innerWidth * 12);
	var y = Math.floor(e.y / window.innerHeight * 8) ;

	var index = (x + 3) + ((y - 3) * 12);
	var freq = calc_frequency(index);
	var freq_name = "ド,ド#,レ,レ#,ミ,ファ,ファ#,ソ,ソ#,ラ,ラ#,シ".split(",")[(index + 93) % 12];

	if (x > 9) p.style.left = e.x - 100;
	if (y > 5) p.style.top = e.y - 50;

	p.textContent = freq_name + "(" + (freq \| 0) + "Hz)";

	o.frequency.value = freq;
	}
	}

	</script>

	<p></p>
	<p>press any key...</p>