zakuroishikuro/virtual_keyboard.html

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

<style>
  .keyboard {
    width: 600px;
  }
  button {
    width: 4em;
    height: 4em;
    box-shadow: 0px 1px 2px gray;
    text-shadow: 0px 3px 3px gray;
    margin-top: 4px;
  }

  .sharp button {
    background: linear-gradient(black, gray);
    color: white;
  }

  .sharp{
    z-index: 2;
  }
  .hidden {
    visibility: hidden;
  }
</style>

<script>

var c = new AudioContext();

function play_sound(freq, duration, type){
  if (freq === undefined) freq = 440;
  if (duration === undefined) duration = 0.8;
  if (type === undefined) type = "sine";

  var g = c.createGain();
  g.connect(c.destination);

  var o = c.createOscillator();
  o.frequency.value = freq;
  o.type = type;
  o.connect(g);

  var now = c.currentTime;
  o.start(now);
  o.stop(now + duration);
  g.gain.setValueAtTime(1.0, now);
  g.gain.exponentialRampToValueAtTime(0.01, now + duration);

  return o;
}

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

function calc_piano_frequency(key_index, pitch){
  if (key_index === undefined) key_index = 49;
  if (pitch === undefined) pitch = 440;

  var ratio = Math.pow(COMMON_RATIO, key_index - 49);
  return pitch * ratio;
}

function push(key){
  var pitch = document.getElementById("pitch_range").value;
  var type = document.getElementById("type").value;

  var freq = calc_piano_frequency(key, pitch);
  play_sound(freq, 0.8, type);
}

window.onload = function(){
  document.body.addEventListener("keyup", function(e){
    if (e.keyIdentifier == "Shift") {
      document.getElementById("pitch_range").value /= 2;
      document.getElementById("pitch").value /= 2;
    }
  });

  document.body.addEventListener("keydown", function(e){
  var n;
  switch(e.code){
    case "KeyA": n = 3; break; //ド
    case "KeyW": n = 4; break;
    case "KeyS": n = 5; break; //レ
    case "KeyE": n = 6; break;
    case "KeyD": n = 7; break; //ミ
    case "KeyF": n = 8; break; //ファ
    case "KeyT": n = 9; break;
    case "KeyG": n = 10; break; //ソ
    case "KeyY": n = 11; break;
    case "KeyH": n = 12; break; //ラ
    case "KeyU": n = 13; break;
    case "KeyJ": n = 14; break; //シ
    case "KeyK": n = 15; break; //ド
    case "KeyO": n = 16; break;
    case "KeyL": n = 17; break; //レ
    case "KeyP": n = 18; break;
    case "Semicolon": n = 19; break; //ミ
    case "Quote": n = 20; break; //ファ
    case "BracketRight": n = 21; break;
    case "Backslash": n = 22; break; //ソ
    default:
      if (e.keyIdentifier == "Shift") {
        document.getElementById("pitch_range").value *= 2;
        document.getElementById("pitch").value *= 2;
      }
      if (e.keyIdentifier == "Right") {
        if (document.getElementById("pitch").value < 3520){
          document.getElementById("pitch_range").value *= 2;
          document.getElementById("pitch").value *= 2;
        }
      }
      if (e.keyIdentifier == "Left") {
        if (document.getElementById("pitch").value > 110){
          document.getElementById("pitch_range").value /= 2;
          document.getElementById("pitch").value /= 2;
        }
      }
      if (e.keyIdentifier == "Up"){
        var t = document.getElementById("type");
        if (t.selectedIndex > 0) t.selectedIndex -= 1;
      }
      if (e.keyIdentifier == "Down"){
        var t = document.getElementById("type");
        if (t.selectedIndex < 3) t.selectedIndex += 1;
      }
      return;
  }

    var pitch = document.getElementById("pitch_range").value;
    var type = document.getElementById("type").value;

    var freq = calc_piano_frequency(n + 49, pitch);
    play_sound(freq, 0.8, type);
  })
}
</script>

<div class="keyboard sharp" style="transform: translateX(1.5em)">
  <button onclick="push(53)"><span class="name">W</span></button>
  <button onclick="push(55)"><span class="name">E</span></button>
  <button onclick="push(00)" class="hidden"><span class="name">R</span></button>
  <button onclick="push(58)"><span class="name">T</span></button>
  <button onclick="push(60)"><span class="name">Y</span></button>
  <button onclick="push(62)"><span class="name">U</span></button>
  <button onclick="push(00)" class="hidden"><span class="name">I</span></button>
  <button onclick="push(65)"><span class="name">O</span></button>
  <button onclick="push(67)"><span class="name">P</span></button>
  <button onclick="push(00)" class="hidden"><span class="name">@</span></button>
  <button onclick="push(70)"><span class="name">[</span></button>
</div>

<div class="keyboard">
  <button onclick="push(52)"><span class="name">A</span></button>
  <button onclick="push(54)"><span class="name">S</span></button>
  <button onclick="push(56)"><span class="name">D</span></button>
  <button onclick="push(57)"><span class="name">F</span></button>
  <button onclick="push(59)"><span class="name">G</span></button>
  <button onclick="push(61)"><span class="name">H</span></button>
  <button onclick="push(63)"><span class="name">J</span></button>
  <button onclick="push(64)"><span class="name">K</span></button>
  <button onclick="push(66)"><span class="name">L</span></button>
  <button onclick="push(68)"><span class="name">;</span></button>
  <button onclick="push(69)"><span class="name">:</span></button>
  <button onclick="push(71)"><span class="name">]</span></button>
</div>

<p>type:
  <select id="type">
    <option value="sine">正弦波(sine) ... 口笛、オルガン</option>
    <option value="square">矩形波(square) ... クラリネット</option>
    <option value="sawtooth">ノコギリ波(sawtooth) ... バイオリン、トランペット</option>
    <option value="triangle">三角波(triangle) ... リコーダー、フルート</option>
  </select>
</p>
<p>
  pitch: <input id="pitch_range" type="range" min=110 max=3520 value="440" list="freq_list" oninput="document.getElementById('pitch').value = this.value">
  <input type="number" id="pitch" value="440" style="width: 10em" onchange="document.getElementById('pitch_range').value = this.value">Hz
  <datalist id="freq_list">
    <option value="110" />
    <option value="220" />
    <option value="440" />
    <option value="880" />
    <option value="1760" />
    <option value="3520" />
  </datalist>
</p>
	<!DOCTYPE html>
	<meta charset="utf-8">

	<style>
	.keyboard {
	width: 600px;
	}
	button {
	width: 4em;
	height: 4em;
	box-shadow: 0px 1px 2px gray;
	text-shadow: 0px 3px 3px gray;
	margin-top: 4px;
	}

	.sharp button {
	background: linear-gradient(black, gray);
	color: white;
	}

	.sharp{
	z-index: 2;
	}
	.hidden {
	visibility: hidden;
	}
	</style>

	<script>

	var c = new AudioContext();

	function play_sound(freq, duration, type){
	if (freq === undefined) freq = 440;
	if (duration === undefined) duration = 0.8;
	if (type === undefined) type = "sine";

	var g = c.createGain();
	g.connect(c.destination);

	var o = c.createOscillator();
	o.frequency.value = freq;
	o.type = type;
	o.connect(g);

	var now = c.currentTime;
	o.start(now);
	o.stop(now + duration);
	g.gain.setValueAtTime(1.0, now);
	g.gain.exponentialRampToValueAtTime(0.01, now + duration);

	return o;
	}

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

	function calc_piano_frequency(key_index, pitch){
	if (key_index === undefined) key_index = 49;
	if (pitch === undefined) pitch = 440;

	var ratio = Math.pow(COMMON_RATIO, key_index - 49);
	return pitch * ratio;
	}

	function push(key){
	var pitch = document.getElementById("pitch_range").value;
	var type = document.getElementById("type").value;

	var freq = calc_piano_frequency(key, pitch);
	play_sound(freq, 0.8, type);
	}

	window.onload = function(){
	document.body.addEventListener("keyup", function(e){
	if (e.keyIdentifier == "Shift") {
	document.getElementById("pitch_range").value /= 2;
	document.getElementById("pitch").value /= 2;
	}
	});

	document.body.addEventListener("keydown", function(e){
	var n;
	switch(e.code){
	case "KeyA": n = 3; break; //ド
	case "KeyW": n = 4; break;
	case "KeyS": n = 5; break; //レ
	case "KeyE": n = 6; break;
	case "KeyD": n = 7; break; //ミ
	case "KeyF": n = 8; break; //ファ
	case "KeyT": n = 9; break;
	case "KeyG": n = 10; break; //ソ
	case "KeyY": n = 11; break;
	case "KeyH": n = 12; break; //ラ
	case "KeyU": n = 13; break;
	case "KeyJ": n = 14; break; //シ
	case "KeyK": n = 15; break; //ド
	case "KeyO": n = 16; break;
	case "KeyL": n = 17; break; //レ
	case "KeyP": n = 18; break;
	case "Semicolon": n = 19; break; //ミ
	case "Quote": n = 20; break; //ファ
	case "BracketRight": n = 21; break;
	case "Backslash": n = 22; break; //ソ
	default:
	if (e.keyIdentifier == "Shift") {
	document.getElementById("pitch_range").value *= 2;
	document.getElementById("pitch").value *= 2;
	}
	if (e.keyIdentifier == "Right") {
	if (document.getElementById("pitch").value < 3520){
	document.getElementById("pitch_range").value *= 2;
	document.getElementById("pitch").value *= 2;
	}
	}
	if (e.keyIdentifier == "Left") {
	if (document.getElementById("pitch").value > 110){
	document.getElementById("pitch_range").value /= 2;
	document.getElementById("pitch").value /= 2;
	}
	}
	if (e.keyIdentifier == "Up"){
	var t = document.getElementById("type");
	if (t.selectedIndex > 0) t.selectedIndex -= 1;
	}
	if (e.keyIdentifier == "Down"){
	var t = document.getElementById("type");
	if (t.selectedIndex < 3) t.selectedIndex += 1;
	}
	return;
	}

	var pitch = document.getElementById("pitch_range").value;
	var type = document.getElementById("type").value;

	var freq = calc_piano_frequency(n + 49, pitch);
	play_sound(freq, 0.8, type);
	})
	}
	</script>

	<div class="keyboard sharp" style="transform: translateX(1.5em)">
	<button onclick="push(53)"><span class="name">W</span></button>
	<button onclick="push(55)"><span class="name">E</span></button>
	<button onclick="push(00)" class="hidden"><span class="name">R</span></button>
	<button onclick="push(58)"><span class="name">T</span></button>
	<button onclick="push(60)"><span class="name">Y</span></button>
	<button onclick="push(62)"><span class="name">U</span></button>
	<button onclick="push(00)" class="hidden"><span class="name">I</span></button>
	<button onclick="push(65)"><span class="name">O</span></button>
	<button onclick="push(67)"><span class="name">P</span></button>
	<button onclick="push(00)" class="hidden"><span class="name">@</span></button>
	<button onclick="push(70)"><span class="name">[</span></button>
	</div>

	<div class="keyboard">
	<button onclick="push(52)"><span class="name">A</span></button>
	<button onclick="push(54)"><span class="name">S</span></button>
	<button onclick="push(56)"><span class="name">D</span></button>
	<button onclick="push(57)"><span class="name">F</span></button>
	<button onclick="push(59)"><span class="name">G</span></button>
	<button onclick="push(61)"><span class="name">H</span></button>
	<button onclick="push(63)"><span class="name">J</span></button>
	<button onclick="push(64)"><span class="name">K</span></button>
	<button onclick="push(66)"><span class="name">L</span></button>
	<button onclick="push(68)"><span class="name">;</span></button>
	<button onclick="push(69)"><span class="name">:</span></button>
	<button onclick="push(71)"><span class="name">]</span></button>
	</div>

	<p>type:
	<select id="type">
	<option value="sine">正弦波(sine) ... 口笛、オルガン</option>
	<option value="square">矩形波(square) ... クラリネット</option>
	<option value="sawtooth">ノコギリ波(sawtooth) ... バイオリン、トランペット</option>
	<option value="triangle">三角波(triangle) ... リコーダー、フルート</option>
	</select>
	</p>
	<p>
	pitch: <input id="pitch_range" type="range" min=110 max=3520 value="440" list="freq_list" oninput="document.getElementById('pitch').value = this.value">
	<input type="number" id="pitch" value="440" style="width: 10em" onchange="document.getElementById('pitch_range').value = this.value">Hz
	<datalist id="freq_list">
	<option value="110" />
	<option value="220" />
	<option value="440" />
	<option value="880" />
	<option value="1760" />
	<option value="3520" />
	</datalist>
	</p>