https://maxbo.me/js/tone.js

1// DTMF frequencies for phone dialing
2const rowFreqs = [697, 770, 852, 941];  // Row frequencies
3const colFreqs = [1209, 1336, 1477, 1633];  // Column frequencies
4
5let audioContext = null;
6
7// Initialize audio context
8const initAudio = () => {
9  if (!audioContext) {
10    audioContext = new (window.AudioContext || window.webkitAudioContext)();
11  }
12};
13
14// Play DTMF tone for phone dialing
15const playDTMF = (digit) => {
16  initAudio();
17  if (!audioContext) return;
18
19  if (!digit || digit === '*') digit = '10';
20  if (digit === '#') digit = '11';
21  if (digit === '0') digit = '12';
22  
23  const num = parseInt(digit) - 1;
24  const row = Math.floor(num / 3);
25  const col = num % 3;
26  
27  const oscillator1 = audioContext.createOscillator();
28  const oscillator2 = audioContext.createOscillator();
29  const gainNode = audioContext.createGain();
30  
31  oscillator1.type = 'sine';
32  oscillator2.type = 'sine';
33  
34  oscillator1.frequency.value = rowFreqs[row];
35  oscillator2.frequency.value = colFreqs[col];
36  
37  oscillator1.connect(gainNode);
38  oscillator2.connect(gainNode);
39  gainNode.connect(audioContext.destination);
40  gainNode.gain.value = 0.1;
41  
42  oscillator1.start();
43  oscillator2.start();
44  
45  setTimeout(() => {
46    oscillator1.stop();
47    oscillator2.stop();
48  }, 150);
49};
50
51// Add click handlers to the buttons
52document.querySelectorAll('.has-tone').forEach(button => {
53  button.addEventListener('click', () => {
54    const digit = button.textContent;
55    playDTMF(digit);
56  });
57});