dtmf/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>DTMF with Javascript minimal example</title>
</head>
<body>

<input type="text" id="input" placeholder="+86 139"> 
<a id="blog" href="https://blog.est.im/2022/stdout-10">blog</a>

<script type="text/javascript">

var ctx = new AudioContext();

function play_freq(fs){

  // make it sound better
  const g = ctx.createGain();
  g.gain.value = 0.25;
  const f = ctx.createBiquadFilter();
  f.type = "lowpass"; f.frequency = 8000;
  g.connect(f); f.connect(ctx.destination);

  fs.forEach(freq=>{
    const osc = ctx.createOscillator();
    osc.frequency.value = freq;
    osc.connect(g);  // or ctx.destination directly
    osc.start(0); osc.stop(ctx.currentTime + 0.2);
 })
}

// dial tone
input.onfocus = ev=>play_freq([350, 440])

// use onkeypress will always ev.keyCode===229 on Android.
input.oninput = ev => {
  play_freq({
    "1": [ 1209, 697 ],
    "2": [ 1336, 697 ],
    "3": [ 1477, 697 ],
    "4": [ 1209, 770 ],
    "5": [ 1336, 770 ],
    "6": [ 1477, 770 ],
    "7": [ 1209, 852 ],
    "8": [ 1336, 852 ],
    "9": [ 1477, 852 ],
    "*": [ 1209, 941 ],
    "0": [ 1336, 941 ],
    "#": [ 1477, 941 ],
  }[ev.data] || [
    [ 1633, 697 ],  // a
    [ 1633, 770 ],  // b
    [ 1633, 852 ],  // c
    [ 1633, 941 ],  // d
  ][(ev.data.charCodeAt(0) - 1) % 4])  // map 0x41,0x41,0x43,0x44 to A,B,C,D and rest follows
  blog.innerText=(ev.data)
  
}
</script>
</body>
</html>