Вот пример тонгенератора с функционалом, который мне нужен:
<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"
onClick="A4fr.value = A4fr.value==444 ? 435 : +A4fr.value+1, StartStopOsc()"
onfocus="this.blur()"
readonly="readonly" />
<input
id="din"
value="Start"
onClick="ttdin.value = ttdin.value==0 ? 1 : 0; din.value = ttdin.value==0 ? 'Start' : 'Stop'; StartStopOsc()"
onfocus="this.blur()"
readonly="readonly" />
<script>
const context = new AudioContext();
const oscillator = context.createOscillator();
// форма сигнала
oscillator.type = 'sine';
oscillator.connect(context.destination);
function StartStopOsc(){
// частота
oscillator.frequency.value = +A4fr.value;
// для запуска
if(ttdin.value==1)oscillator.start();
// для завершения
if(ttdin.value==0)oscillator.stop();
}
</script>
</center>
</body>
</html>
Единственная загвоздка - тонгенератор не запускается после первой остановки. Всё остальное меня устраивает: когда генератор запущен, при смене частоты с 440 на другую, от 435 до 444 (это камертон для настройщиков фортепиано), меняется и частота запущенного генератора. Правда запускается он только один раз
