Записи

 <p><style type="text/css">
 .midifont2 {
 cursor:pointer;
 width: 34px;
 height: 60px;
 }
 .midifont21 {
 cursor:pointer;
 width: 38px;
 height: 65px;
 }
 .midifont210 {
 width: 26px;
 height: 65px;
 }
 .midifont25 {
 width: 10px;
 height: 65px;
 }
 </style></p>

 <p><table width ="335" height="202" border="0" style="background-image:url(https://sklees.narod.ru/js/midi/midikey.png);
 background-repeat: no-repeat;
   background-size: 330px;" class="colorborder" align="center">
  <tr>
  <td>
  тип:
  <input checked="checked" name="typein" onclick="{typeHz = 'sine'}" type="radio" />
  <input name="typein" onclick="{typeHz = 'square'}" type="radio" />
  <input name="typein" onclick="{typeHz = 'sawtooth'}" type="radio" />
  <input name="typein" onclick="{typeHz = 'triangle'}" type="radio" />
  </td>
  </tr>
  <tr>
  <td height="69" align="left">
 <table align="left" width="5"><tr><td>
  <img class="midifont25" src="https://sklees.narod.ru/js/midibig/midipin10.png">
 </td></tr></table>
 <table align="left" width="5"><tr><td>
  <img onmousedown="beep(277)" onmouseup="beepstop()" class="midifont21" src="https://sklees.narod.ru/js/midibig/midipin11.png">
 </td></tr></table>
 <table align="left" width="5"><tr><td>
  <img onmousedown="beep(311)" onmouseup="beepstop()" class="midifont21" src="https://sklees.narod.ru/js/midibig/midipin11.png">
 </td></tr></table>
 <table align="left" width="5"><tr><td>
  <img class="midifont210" src="https://sklees.narod.ru/js/midibig/midipin10.png">
 </td></tr></table>
 <table align="left" width="5"><tr><td>
  <img onmousedown="beep(370)" onmouseup="beepstop()" class="midifont21" src="https://sklees.narod.ru/js/midibig/midipin11.png">
 </td></tr></table>
 <table align="left" width="5"><tr><td>
  <img onmousedown="beep(415)" onmouseup="beepstop()" class="midifont21" src="https://sklees.narod.ru/js/midibig/midipin11.png">
 </td></tr></table>
 <table align="left" width="5" ><tr><td>
  <img onmousedown="beep(466)" onmouseup="beepstop()" class="midifont21" src="https://sklees.narod.ru/js/midibig/midipin11.png">
 </td></tr></table>
 <table align="left" width="5"><tr><td>
  <img class="midifont210" src="https://sklees.narod.ru/js/midibig/midipin10.png">
 </td></tr></table></p>

 <p> </td>
  </tr>
  <tr>
  <td height="69" align="left"></p>

 <p><table align="left" width="5"><tr><td>
  <img onmousedown="beep(261)" onmouseup="beepstop()" class="midifont2" src="https://sklees.narod.ru/js/midibig/midipin1.png">
 </td></tr></table>
 <table align="left" width="5"><tr><td>
  <img onmousedown="beep(293)" onmouseup="beepstop()" class="midifont2" src="https://sklees.narod.ru/js/midibig/midipin2.png">
 </td></tr></table>
 <table align="left" width="5"><tr><td>
  <img onmousedown="beep(329)" onmouseup="beepstop()" class="midifont2" src="https://sklees.narod.ru/js/midibig/midipin3.png">
 </td></tr></table>
 <table align="left" width="5"><tr><td>
  <img onmousedown="beep(349)" onmouseup="beepstop()" class="midifont2" src="https://sklees.narod.ru/js/midibig/midipin4.png">
 </td></tr></table>
 <table align="left" width="5"><tr><td>
  <img onmousedown="beep(392)" onmouseup="beepstop()" class="midifont2" src="https://sklees.narod.ru/js/midibig/midipin5.png">
 </td></tr></table>
 <table align="left" width="5"><tr><td>
  <img onmousedown="beep(440)" onmouseup="beepstop()" class="midifont2" src="https://sklees.narod.ru/js/midibig/midipin6.png">
 </td></tr></table>
 <table align="left" width="5"><tr><td>
  <img onmousedown="beep(493)" onmouseup="beepstop()" class="midifont2" src="https://sklees.narod.ru/js/midibig/midipin7.png">
 </td></tr></table>
 <table align="left" width="5"><tr><td>
  <img onmousedown="beep(523)" onmouseup="beepstop()" class="midifont2" src="https://sklees.narod.ru/js/midibig/midipin1.png">
 </td></tr></table>
  </td>
  </tr>
 </table>
 <script>
 audioCtx = new(window.AudioContext || window.webkitAudioContext)();
 var typeHz = 'sine';
 var oscillatormine = audioCtx.createOscillator();
 var flagkey = true;</p>

 <p>function beep(frequencyHz) {
  var oscillator = audioCtx.createOscillator();
  var gainNode = audioCtx.createGain();</p>

 <p> oscillator.connect(gainNode);
  gainNode.connect(audioCtx.destination);</p>

 <p> gainNode.gain.value = 0.3;
  oscillator.frequency.value = frequencyHz;
  oscillator.type = typeHz;</p>

 <p> oscillator.start();
  oscillatormine = oscillator;
  
  setTimeout(
  function() {
  oscillator.stop();
  },
  2000
  );
 };</p>

 <p>function beepstop() {
  setTimeout(
  function() {
  oscillatormine.stop();
  },
  100
  );
 };</p>

 <p>document.addEventListener('keydown', function(event) { 
 if (event.code == 'Digit1') { if (flagkey) {flagkey = false; beep(261)}};
 if (event.code == 'Digit2') { if (flagkey) {flagkey = false; beep(293)}};
 if (event.code == 'Digit3') { if (flagkey) {flagkey = false; beep(329)}};
 if (event.code == 'Digit4') { if (flagkey) {flagkey = false; beep(349)}};
 if (event.code == 'Digit5') { if (flagkey) {flagkey = false; beep(392)}};
 if (event.code == 'Digit6') { if (flagkey) {flagkey = false; beep(440)}};
 if (event.code == 'Digit7') { if (flagkey) {flagkey = false; beep(493)}};
 if (event.code == 'Digit8') { if (flagkey) {flagkey = false; beep(523)}};
 });
 document.addEventListener('keyup', function(event) { 
 beepstop();
 flagkey = true;
 });
 </script></p>