<html>
<head>
<title>Тонгенератор</title>
<meta charset="utf-8">
<meta http-equiv="Content-Language" content="ru" />
<style type="text/css">
#din {
width: 50px;
height: 50px;
padding: 6px;
border: #89b 2px solid;
border-radius: 100%;
margin: 5px;
background-color: #fff;
text-align: center;
font-weight: bold;
color: #89b;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
outline:none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}
#A4fr {
border: 0;
width: 70px;
font-size: 40px;
text-align: center;
color: #78a;
cursor: pointer;
}
.out {
visibility: hidden;
display:none;
}
</style>
</head>
<body>
<input name="ttdin" id="ttdin" class="out" value=0 />
<center>
<input
id="A4fr"
value="440"
onfocus="this.blur()"
readonly="readonly" />
<input
id="din"
value="Start"
onfocus="this.blur()"
readonly="readonly" />
</center>
<script>
const A4fr = document.getElementById('A4fr');
const din = document.getElementById('din');
A4fr.addEventListener ('click', () => {
A4fr.value = A4fr.value== 444 ? 435 : +A4fr.value + 1;
Osc();
});
din.addEventListener ('click', () => {
ttdin.value = ttdin.value==0 ? 1 : 0;
din.value = ttdin.value==0 ? 'Start' : 'Stop';
StartStop();
});
let context;
let oscillator;
function Osc () {
oscillator.frequency.value = +A4fr.value;
}
function StartStop(){
// частота
// для запуска
if(ttdin.value==1) {
context = new AudioContext();
oscillator = context.createOscillator();
// форма сигнала
oscillator.type = 'sine';
oscillator.frequency.value = +A4fr.value;
oscillator.connect(context.destination);
oscillator.start();
// для завершения
} else {
oscillator.stop();
}
}
</script>
</body>
</html>