首頁 探索 說明
登入
bmallred
/
html5-dtmf
關註 1
讚好 0
派生 0
代碼 問題管理 0 合併請求 0 提交歷史 1 版本發佈 0 Wiki
瀏覽代碼

initial commit

bmallred 12 年之前
當前提交
abb94b7dca
共有 1 個文件被更改，包括 174 次插入 和 0 次删除
分割檢視 顯示文件統計
  1. 174 0
      dtmf.html

+ 174 - 0
dtmf.html
查看文件 

@ -0,0 +1,174 @@
1 
<!doctype html>
2 
<html>
3 
<head>
4 
  <meta charset="utf-8" />
5 
  <meta name="description" content="" />
6 
  <meta name="author" content="Bryan Allred" />
7
8 
  <title>Dialpad</title>
9 
  <link href="http://plus.google.com/112949321083048638287" rel="publisher" />
10
11 
  <style type="text/css">
12 
    #browser
13 
    {
14 
      display: none;
15 
      visibility: hidden;
16 
    }
17 
    .button
18 
    {
19 
      border: 1px solid #ddd;
20 
      background: #eee;
21 
      padding: 1em 2em;
22 
      margin: 0.35em;
23 
      cursor: pointer;
24 
    }
25
26 
    .letter
27 
    {
28 
      background: #AD0006;
29 
    }
30 
  </style>
31
32 
  <!--[if lt IE 9]>
33 
  <style type="text/css">
34 
    #browser
35 
    {
36 
      display: block;
37 
      visibility: visible;
38 
    }
39 
  </style>
40 
  <![endif]-->
41 
</head>
42 
<body>
43 
  <div id="browser">
44 
    <h2>Dude, you are missing are the cool stuff!</h2>
45 
    <p>We recommend upgrading to the latest <a href="http://ie.microsoft.com" title="Microsoft Internet Explorer">Internet Explorer</a>, <a href="http://chrome.google.com" title="Google Chrome">Google Chrome</a>, or <a href="http://mozilla.org/firefox" title="Firefox">Firefox</a>. If you are using IE 9 or later, make sure you turn off "Compatibility View".</p>
46 
  </div>
47
48 
  <form>
49 
    <table>
50 
      <tbody>
51 
        <tr>
52 
          <td><div class="button" data-high="1209" data-low="697">1</div></td>
53 
          <td><div class="button" data-high="1336" data-low="697">2</div></td>
54 
          <td><div class="button" data-high="1477" data-low="697">3</div></td>
55 
          <td><div class="button letter" data-high="1633" data-low="697">A</div></td>
56 
        </tr>
57 
        <tr>
58 
          <td><div class="button" data-high="1209" data-low="770">4</div></td>
59 
          <td><div class="button" data-high="1336" data-low="770">5</div></td>
60 
          <td><div class="button" data-high="1477" data-low="770">6</div></td>
61 
          <td><div class="button letter" data-high="1633" data-low="770">B</div></td>
62 
        </tr>
63 
        <tr>
64 
          <td><div class="button" data-high="1209" data-low="852">7</div></td>
65 
          <td><div class="button" data-high="1336" data-low="852">8</div></td>
66 
          <td><div class="button" data-high="1477" data-low="852">9</div></td>
67 
          <td><div class="button letter" data-high="1633" data-low="852">C</div></td>
68 
        </tr>
69 
        <tr>
70 
          <td><div class="button" data-high="1209" data-low="941">*</div></td>
71 
          <td><div class="button" data-high="1336" data-low="941">0</div></td>
72 
          <td><div class="button" data-high="1477" data-low="941">#</div></td>
73 
          <td><div class="button letter" data-high="1633" data-low="941">D</div></td>
74 
        </tr>
75 
      </tbody>
76 
      <tfoot>
77 
        <tr>
78 
          <td colspan="2"><label for="duration">Tone length</label></td>
79 
          <td colspan="2"><input id="duration" type="range" min="30" max="1000" value="300" /></td>
80 
        </tr>
81 
        <tr>
82 
          <td colspan="2"><label for="volume">Volume</label></td>
83 
          <td colspan="2"><input id="volume" type="range" min="0" max="1" step="0.1" value="0.5" /></td>
84 
        </tr>
85 
      </tfoot>
86 
    </table>
87 
  </form>
88
89 
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
90 
  <script type="text/javascript">
91 
    $(function () {
92 
      var context;
93
94 
      if (typeof AudioContext !== "undefined") {
95 
        context = new AudioContext();
96 
      }
97 
      else if (typeof webkitAudioContext !== "undefined") {
98 
        context = new webkitAudioContext();
99 
      }
100 
      else {
101 
        throw new Error("AudioContext is not support.");
102 
      }
103
104 
      // Some volume control.
105 
      var volume = context.createGainNode();
106 
      volume.gain.value = 0.5;
107 
      volume.connect(context.destination);
108
109 
      $(document).on("change", "#volume", function () {
110 
        volume.gain.value = $(this).val();
111 
        console.log("Volume: " + volume.gain.value);
112 
      });
113
114 
      // Create the oscillators.
115 
      var oscillatorHigh;
116 
      var oscillatorLow;
117
118 
      $(document).on("change", "#duration", function () {
119 
        console.log("Duration: " + $(this).val() + "ms");
120 
      });
121
122 
      // Play the tone.
123 
      var playTone = function (highFrequency, lowFrequency, duration) {
124 
        // Create the oscillator for the high frequency.
125 
        oscillatorHigh = context.createOscillator();
126 
        oscillatorHigh.type = 0;
127 
        oscillatorHigh.connect(volume);
128 
        oscillatorHigh.frequency.value = highFrequency;
129
130 
        // Create the oscillator for the low frequency.
131 
        oscillatorLow = context.createOscillator();
132 
        oscillatorLow.type = 0;
133 
        oscillatorLow.connect(volume);
134 
        oscillatorLow.frequency.value = lowFrequency;
135
136 
        // Play the multiple frequencies.
137 
        oscillatorLow.noteOn(0);
138 
        oscillatorHigh.noteOn(0);
139
140 
        // Only allow the oscillator to play for a specified period of time.
141 
        window.setTimeout(function () {
142 
          stopTone();
143 
        }, duration);
144 
      };
145
146 
      var stopTone = function (oscillator) {
147 
        // Stop the high frequency.
148 
        if (oscillatorHigh !== undefined) {
149 
          oscillatorHigh.noteOff(0);
150 
          oscillatorHigh.disconnect();
151 
        }
152
153 
        // Stop the low frequency.
154 
        if (oscillatorLow !== undefined) {
155 
          oscillatorLow.noteOff(0);
156 
          oscillatorLow.disconnect();
157 
        }
158 
      };
159
160 
      $(document).on("mousedown", ".button", function () {
161 
        var high = parseInt($(this).attr("data-high"));
162 
        var low = parseInt($(this).attr("data-low"));
163 
        var duration = parseInt($("#duration").val());
164
165 
        playTone(high, low, duration);
166 
      });
167
168 
      $(document).on("mouseup", ".button", function () {
169 
        stopTone();
170 
      });
171 
    });
172 
  </script>
173 
</body>
174 
</html>