<p><style type="text/css"> .midifont { cursor:pointer; width: 33px; height: 60px; } .midifont1 { cursor:pointer; width: 37px; height: 65px; } .midifont10 { width: 24px; height: 65px; } .midifont5 { width: 10px; height: 65px; } </style></p> <p><table width ="605" height="202" border="0" style="background-image:url(https://sklees.narod.ru/js/midibig/midiboardbig.png); background-repeat: no-repeat; background-size: 590px;" class="colorborder" align="center"> <tr> <td><center> тип: <input checked="checked" name="Imtypein" onclick="{ImtypeHz = 'sine'}" type="radio" /> <input name="Imtypein" onclick="{ImtypeHz = 'square'}" type="radio" /> <input name="Imtypein" onclick="{ImtypeHz = 'sawtooth'}" type="radio" /> <input name="Imtypein" onclick="{ImtypeHz = 'triangle'}" type="radio" /></center> </td> <td><center> тон: <input name="Imtonein" onclick="{ImtoneHz = 0.25}" type="radio" /> <input name="Imtonein" onclick="{ImtoneHz = 0.5}" type="radio" /> <input checked="checked" name="Imtonein" onclick="{ImtoneHz = 1}" type="radio" /> <input name="Imtonein" onclick="{ImtoneHz = 2}" type="radio" /> <input name="Imtonein" onclick="{ImtoneHz = 4}" type="radio" /> </center></td> <td><center> темп: <input id="v4rGo" type="checkbox" value="" /> <input type="range" id="v4rSpeed" max="200" min="30" value="50" width="100" oninput="{document.getElementById('v4spanSpeed').innerHTML = document.getElementById('v4rSpeed').value; v4TempStep = 0;}" /> <span id="v4spanSpeed">50</span> </center> </td> </tr> <tr> <td colspan="3" height="69" align="left"></p> <p><table align="left" width="5"><tr><td> <img class="midifont5" src="https://sklees.narod.ru/js/midibig/midipin10.png"> </td></tr></table> <table align="left" width="5"><tr><td> <img onmousedown="v3beep(277*ImtoneHz)" onmouseup="v3beepstop()" class="midifont1" src="https://sklees.narod.ru/js/midibig/midipin11.png"> </td></tr></table> <table align="left" width="5"><tr><td> <img onmousedown="v3beep(311*ImtoneHz)" onmouseup="v3beepstop()" class="midifont1" src="https://sklees.narod.ru/js/midibig/midipin11.png"> </td></tr></table> <table align="left" width="5"><tr><td> <img class="midifont10" src="https://sklees.narod.ru/js/midibig/midipin10.png"> </td></tr></table> <table align="left" width="5"><tr><td> <img onmousedown="v3beep(370*ImtoneHz)" onmouseup="v3beepstop()" class="midifont1" src="https://sklees.narod.ru/js/midibig/midipin11.png"> </td></tr></table> <table align="left" width="5"><tr><td> <img onmousedown="v3beep(415*ImtoneHz)" onmouseup="v3beepstop()" class="midifont1" src="https://sklees.narod.ru/js/midibig/midipin11.png"> </td></tr></table> <table align="left" width="5"><tr><td> <img onmousedown="v3beep(466*ImtoneHz)" onmouseup="v3beepstop()" class="midifont1" src="https://sklees.narod.ru/js/midibig/midipin11.png"> </td></tr></table> <table align="left" width="5"><tr><td> <img class="midifont10" src="https://sklees.narod.ru/js/midibig/midipin10.png"> </td></tr></table> <table align="left" width="5"><tr><td> <img onmousedown="v3beep(554*ImtoneHz)" onmouseup="v3beepstop()" class="midifont1" src="https://sklees.narod.ru/js/midibig/midipin11.png"> </td></tr></table> <table align="left" width="5"><tr><td> <img onmousedown="v3beep(622*ImtoneHz)" onmouseup="v3beepstop()" class="midifont1" src="https://sklees.narod.ru/js/midibig/midipin11.png"> </td></tr></table> <table align="left" width="5"><tr><td> <img class="midifont10" src="https://sklees.narod.ru/js/midibig/midipin10.png"> </td></tr></table> <table align="left" width="5"><tr><td> <img onmousedown="v3beep(740*ImtoneHz)" onmouseup="v3beepstop()" class="midifont1" src="https://sklees.narod.ru/js/midibig/midipin11.png"> </td></tr></table> <table align="left" width="5"><tr><td> <img onmousedown="v3beep(830*ImtoneHz)" onmouseup="v3beepstop()" class="midifont1" src="https://sklees.narod.ru/js/midibig/midipin11.png"> </td></tr></table> <table align="left" width="5"><tr><td> <img onmousedown="v3beep(932*ImtoneHz)" onmouseup="v3beepstop()" class="midifont1" src="https://sklees.narod.ru/js/midibig/midipin11.png"> </td></tr></table> <table align="left" width="5"><tr><td> <img class="midifont10" src="https://sklees.narod.ru/js/midibig/midipin10.png"> </td></tr></table></p> <p> </td> </tr> <tr> <td colspan="3" height="69" align="left"></p> <p><table align="left" width="5"><tr><td> <img onmousedown="v3beep(261*ImtoneHz)" onmouseup="v3beepstop()" class="midifont" src="https://sklees.narod.ru/js/midibig/midipin1.png"> </td></tr></table> <table align="left" width="5"><tr><td> <img onmousedown="v3beep(293*ImtoneHz)" onmouseup="v3beepstop()" class="midifont" src="https://sklees.narod.ru/js/midibig/midipin2.png"> </td></tr></table> <table align="left" width="5"><tr><td> <img onmousedown="v3beep(329*ImtoneHz)" onmouseup="v3beepstop()" class="midifont" src="https://sklees.narod.ru/js/midibig/midipin3.png"> </td></tr></table> <table align="left" width="5"><tr><td> <img onmousedown="v3beep(349*ImtoneHz)" onmouseup="v3beepstop()" class="midifont" src="https://sklees.narod.ru/js/midibig/midipin4.png"> </td></tr></table> <table align="left" width="5"><tr><td> <img onmousedown="v3beep(392*ImtoneHz)" onmouseup="v3beepstop()" class="midifont" src="https://sklees.narod.ru/js/midibig/midipin5.png"> </td></tr></table> <table align="left" width="5"><tr><td> <img onmousedown="v3beep(440*ImtoneHz)" onmouseup="v3beepstop()" class="midifont" src="https://sklees.narod.ru/js/midibig/midipin6.png"> </td></tr></table> <table align="left" width="5"><tr><td> <img onmousedown="v3beep(493*ImtoneHz)" onmouseup="v3beepstop()" class="midifont" src="https://sklees.narod.ru/js/midibig/midipin7.png"> </td></tr></table> <table align="left" width="5"><tr><td> <img onmousedown="v3beep(523*ImtoneHz)" onmouseup="v3beepstop()" class="midifont" src="https://sklees.narod.ru/js/midibig/midipin1.png"> </td></tr></table> <table align="left" width="5"><tr><td> <img onmousedown="v3beep(587*ImtoneHz)" onmouseup="v3beepstop()" class="midifont" src="https://sklees.narod.ru/js/midibig/midipin2.png"> </td></tr></table> <table align="left" width="5"><tr><td> <img onmousedown="v3beep(659*ImtoneHz)" onmouseup="v3beepstop()" class="midifont" src="https://sklees.narod.ru/js/midibig/midipin3.png"> </td></tr></table> <table align="left" width="5"><tr><td> <img onmousedown="v3beep(698*ImtoneHz)" onmouseup="v3beepstop()" class="midifont" src="https://sklees.narod.ru/js/midibig/midipin4.png"> </td></tr></table> <table align="left" width="5"><tr><td> <img onmousedown="v3beep(784*ImtoneHz)" onmouseup="v3beepstop()" class="midifont" src="https://sklees.narod.ru/js/midibig/midipin5.png"> </td></tr></table> <table align="left" width="5"><tr><td> <img onmousedown="v3beep(880*ImtoneHz)" onmouseup="v3beepstop()" class="midifont" src="https://sklees.narod.ru/js/midibig/midipin6.png"> </td></tr></table> <table align="left" width="5"><tr><td> <img onmousedown="v3beep(987*ImtoneHz)" onmouseup="v3beepstop()" class="midifont" src="https://sklees.narod.ru/js/midibig/midipin7.png"> </td></tr></table> <table align="left" width="5"><tr><td> <img onmousedown="v3beep(1046*ImtoneHz)" onmouseup="v3beepstop()" class="midifont" src="https://sklees.narod.ru/js/midibig/midipin1.png"> </td></tr></table></p> <p> </td> </tr></table></p> <p><script> v3audioCtx = new(window.AudioContext || window.webkitAudioContext)(); var ImtypeHz = 'sine'; var ImtoneHz = 1.0; var v3oscillatormine = v3audioCtx.createOscillator();</p> <p>function v3beep(v3frequencyHz) { var v3oscillator = v3audioCtx.createOscillator(); var v3gainNode = v3audioCtx.createGain();</p> <p> v3oscillator.connect(v3gainNode); v3gainNode.connect(v3audioCtx.destination);</p> <p> v3gainNode.gain.value = 0.3; v3oscillator.frequency.value = v3frequencyHz; v3oscillator.type = ImtypeHz;</p> <p> v3oscillator.start(); v3oscillatormine = v3oscillator; setTimeout( function() { v3oscillator.stop(); }, 2000 ); };</p> <p>function v3beepstop() { setTimeout( function() { v3oscillatormine.stop(); }, 100 ); }; </script></p> <p><script> v4audioCtx = new(window.AudioContext || window.webkitAudioContext)(); var v4ImtypeHz = 'sine'; var v4TempStep = 0;</p> <p>v4timerMetronomId = setInterval(v4GoBeep, 10);</p> <p>function v4GoBeep() { v4TempStep = v4TempStep + 1; if (document.getElementById('v4rGo').checked) { if (v4TempStep >= 100*60/document.getElementById('v4rSpeed').value) { v4TempStep = 0; v4beep(400); }} }</p> <p>function v4beep(v4frequencyHz) { var v4oscillator = v4audioCtx.createOscillator(); var v4gainNode = v4audioCtx.createGain();</p> <p> v4oscillator.connect(v4gainNode); v4gainNode.connect(v4audioCtx.destination);</p> <p> v4gainNode.gain.value = 0.7; v4oscillator.frequency.value = v4frequencyHz; v4oscillator.type = v4ImtypeHz;</p> <p> v4oscillator.start();</p> <p> setTimeout( function() { v4oscillator.stop(); }, 100 ); }; </script></p>
