Записи

<table width="600" align="center" class="colorborder">
 <tr>
 <td>нотаR5: <input type="range" id="v30param1" max="1000" min="200" value="440"
 oninput="{document.getElementById('v30spanparam1').innerHTML = document.getElementById('v30param1').value;}" />
 <span id="v30spanparam1">440</span></td>
 <td>нотаR6: <input type="range" id="v30param2" max="1000" min="200" value="440"
 oninput="{document.getElementById('v30spanparam2').innerHTML = document.getElementById('v30param2').value;}" />
 <span id="v30spanparam2">440</span></td>
 <td>нотаR7: <input type="range" id="v30param3" max="1000" min="200" value="440"
 oninput="{document.getElementById('v30spanparam3').innerHTML = document.getElementById('v30param3').value;}" />
 <span id="v30spanparam3">440</span></td>
 </tr><tr>
 <td>нотаR8: <input type="range" id="v30param4" max="1000" min="200" value="440"
 oninput="{document.getElementById('v30spanparam4').innerHTML = document.getElementById('v30param4').value;}" />
 <span id="v30spanparam4">440</span></td>
 <td>нотаR9: <input type="range" id="v30param5" max="1000" min="200" value="440"
 oninput="{document.getElementById('v30spanparam5').innerHTML = document.getElementById('v30param5').value;}" />
 <span id="v30spanparam5">440</span></td>
 <td>нотаR10: <input type="range" id="v30param6" max="1000" min="200" value="440"
 oninput="{document.getElementById('v30spanparam6').innerHTML = document.getElementById('v30param6').value;}" />
 <span id="v30spanparam6">440</span></td>
 </tr><tr>
 <td>нотаR11: <input type="range" id="v30param7" max="1000" min="200" value="440"
 oninput="{document.getElementById('v30spanparam7').innerHTML = document.getElementById('v30param7').value;}" />
 <span id="v30spanparam7">440</span></td>
 <td>нотаR12: <input type="range" id="v30param8" max="1000" min="200" value="440"
 oninput="{document.getElementById('v30spanparam8').innerHTML = document.getElementById('v30param8').value;}" />
 <span id="v30spanparam8">440</span></td>
 <td>нотаR13: <input type="range" id="v30param9" max="1000" min="200" value="440"
 oninput="{document.getElementById('v30spanparam9').innerHTML = document.getElementById('v30param9').value;}" />
 <span id="v30spanparam9">440</span></td>
 </tr><tr>
 <td>нотаR14: <input type="range" id="v30param10" max="1000" min="200" value="440"
 oninput="{document.getElementById('v30spanparam10').innerHTML = document.getElementById('v30param10').value;}" />
 <span id="v30spanparam10">440</span></td>
 <td>нотаR15: <input type="range" id="v30param11" max="1000" min="200" value="440"
 oninput="{document.getElementById('v30spanparam11').innerHTML = document.getElementById('v30param11').value;}" />
 <span id="v30spanparam11">440</span></td>
 <td>нотаR16: <input type="range" id="v30param12" max="1000" min="200" value="440"
 oninput="{document.getElementById('v30spanparam12').innerHTML = document.getElementById('v30param12').value;}" />
 <span id="v30spanparam12">440</span></td>
 </tr><tr>
 <td>нотаR17: <input type="range" id="v30param13" max="1000" min="200" value="440"
 oninput="{document.getElementById('v30spanparam13').innerHTML = document.getElementById('v30param13').value;}" />
 <span id="v30spanparam13">440</span></td>
 <td>нотаR18: <input type="range" id="v30param14" max="1000" min="200" value="440"
 oninput="{document.getElementById('v30spanparam14').innerHTML = document.getElementById('v30param14').value;}" />
 <span id="v30spanparam14">440</span></td>
 <td>нотаR19: <input type="range" id="v30param15" max="1000" min="200" value="440"
 oninput="{document.getElementById('v30spanparam15').innerHTML = document.getElementById('v30param15').value;}" />
 <span id="v30spanparam15">440</span></td>
 </tr><tr>
 <td align="center"><input value="random" onclick="v30ClickRnd()" type="button"></td>
 <td align="center"><input value="start" onclick="v30ClickStart()" type="button" id="v30butstart"></td>
 <td align="center"><input value="нотаR" id="v30butnumber" style="width: 80px;" class="flat" readonly></td>
 </tr>
 </table>

<script>
audioCtx = new(window.AudioContext || window.webkitAudioContext)();
var typeHz = 'sine';
var oscillatormine = audioCtx.createOscillator();

function beep(frequencyHz) {
 var oscillator = audioCtx.createOscillator();
 var gainNode = audioCtx.createGain();
 
 oscillator.connect(gainNode);
 gainNode.connect(audioCtx.destination);

 gainNode.gain.value = 0.3;
 oscillator.frequency.value = frequencyHz;
 oscillator.type = typeHz;

 oscillator.start();
 oscillatormine = oscillator;
 
 setTimeout(
 function() {
 oscillator.stop();
 },
 1000
 );
};

function v30getRandomInt(min, max) {
 return Math.floor(Math.random() * (max - min)) + min;
}

var v30timer = setInterval(v30fSortAnim, 1000);
var v30flagkey = 0;
var v30flagstart = true;
function v30ClickRnd() {
var tmprndvalue = 200;
for (var i = 1; i < 16; i++) {
tmprndvalue = v30getRandomInt(200, 1000);
document.getElementById('v30param'+i).value = tmprndvalue;
document.getElementById('v30spanparam'+i).innerHTML = tmprndvalue;
}
}
function v30ClickStart() {
 if (v30flagstart) {
 v30flagstart = false;
 document.getElementById('v30butstart').value = "стоп";
 v30flagkey = 1;
 } else {
 v30flagstart = true;
 document.getElementById('v30butstart').value = "старт";
 document.getElementById('v30butnumber').value = "нотаR"
 }
}
function v30fSortAnim() {
if (!v30flagstart) {
 document.getElementById('v30butnumber').value = "нотаR" + eval(v30flagkey + 4);
 if (v30flagkey === 1) {beep(eval(document.getElementById('v30spanparam1').innerHTML));}
 if (v30flagkey === 2) {oscillatormine.stop();beep(eval(document.getElementById('v30spanparam2').innerHTML));}
 if (v30flagkey === 3) {oscillatormine.stop();beep(eval(document.getElementById('v30spanparam3').innerHTML));}
 if (v30flagkey === 4) {oscillatormine.stop();beep(eval(document.getElementById('v30spanparam4').innerHTML));}
 if (v30flagkey === 5) {oscillatormine.stop();beep(eval(document.getElementById('v30spanparam5').innerHTML));}
 if (v30flagkey === 6) {oscillatormine.stop();beep(eval(document.getElementById('v30spanparam6').innerHTML));}
 if (v30flagkey === 7) {oscillatormine.stop();beep(eval(document.getElementById('v30spanparam7').innerHTML));}
 if (v30flagkey === 8) {oscillatormine.stop();beep(eval(document.getElementById('v30spanparam8').innerHTML));}
 if (v30flagkey === 9) {oscillatormine.stop();beep(eval(document.getElementById('v30spanparam9').innerHTML));}
 if (v30flagkey === 10) {oscillatormine.stop();beep(eval(document.getElementById('v30spanparam10').innerHTML));}
 if (v30flagkey === 11) {oscillatormine.stop();beep(eval(document.getElementById('v30spanparam11').innerHTML));}
 if (v30flagkey === 12) {oscillatormine.stop();beep(eval(document.getElementById('v30spanparam12').innerHTML));}
 if (v30flagkey === 13) {oscillatormine.stop();beep(eval(document.getElementById('v30spanparam13').innerHTML));}
 if (v30flagkey === 14) {oscillatormine.stop();beep(eval(document.getElementById('v30spanparam14').innerHTML));}
 if (v30flagkey === 15) {oscillatormine.stop();beep(eval(document.getElementById('v30spanparam15').innerHTML));}
 v30flagkey++
 if (v30flagkey > 15) {v30flagkey=1} 
 }
}
</script>