結果を表示する
元にもどす
<html> <meta charset="utf-8"> <style> .ボタン_押す{font-size:40px;} .戻す{font-size:40px; color:red;} </style> <script> const 配列=new AudioContext(); const あるふぁべっと=[]; const 英数=document.getElementsByClassName("ボタン_押す"); const 変換=3; window.addEventListener("keydown",function(e) {if(!あるふぁべっと[e.keyCode]) {const おしれーたー=配列.createOscillator(); おしれーたー.type="sine"; おしれーたー.frequency.setValueAtTime(e.keyCode*変換,配列.currentTime); おしれーたー.start(); あるふぁべっと[e.keyCode]=おしれーたー;} あるふぁべっと[e.keyCode].connect(配列.destination); 英数[0].innerHTML=e.keyCode*変換; 英数[0].classList.add("戻す"); setTimeout(function(){英数[0].classList.remove("戻す");},250);}); window.addEventListener("keyup",function(e){あるふぁべっと[e.keyCode].disconnect();}); </script> <div class="ボタン_押す"> <span style="font-size:30px;color:#456789;">キーボードを英数にして</span> <br> すべての key を順に押してみる. </div> <div class="戻す"></div> </html>