1<!-- Copyright (c) 2014 The Chromium OS Authors. All rights reserved. -->
2<!-- Use of this source code is governed by a BSD-style license that can be -->
3<!-- found in the LICENSE file. -->
4
5<html>
6  <head>
7    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
8    <title>Audio Quality Test</title>
9    <script type="text/javascript" src="audio.js"></script>
10    <script type="text/javascript" src="source.js"></script>
11    <script type="text/javascript" src="recorder.js"></script>
12    <script type="text/javascript" src="analysis.js"></script>
13    <link rel="stylesheet" type="text/css" href="audio.css">
14  </head>
15  <body>
16    <ul class="tab-page">
17      <li id="play_tab" onclick="switchTab('play_tab')" class="selected"><a>Play</a></li>
18      <li id="record_tab" onclick="switchTab('record_tab')"><a>Record</a></li>
19    </ul>
20    <div id="play_div">
21      <h1>Audio Source</h1>
22      <input type="radio" name="audio_source" value="sine"
23          onclick="setupSourceLayer('sine')"> Sine Tone
24      <input type="radio" name="audio_source" value="sweep"
25          onclick="setupSourceLayer('sweep')" checked> Sweep Tone
26      <input type="radio" name="audio_source" value="file"
27          onclick="setupSourceLayer('file')"> Load from file
28      <br>
29      <br>
30      <div id="source_layer" align="center">
31        <div id="source_tone">
32          <table style="width: 50%;">
33            <tr>
34              <td class="tonegen-main-cell">
35                <table style="width: 100%;">
36                  <tr>
37                    <td width="50%">Frequency: (20 Hz ~ SampleRate / 2)</td>
38                    <td width="30%">Duration</td>
39                    <td class="sweep_tone">Log</td>
40                  </tr>
41                  <tr>
42                    <td>
43                      <input type="text" id="freq_start" size=5 maxlength=5 value=1000> Hz
44                      <div class="sweep_tone">
45                        <input type="text" id="freq_end" size=5 maxlength=5 value=1000> Hz
46                      </div>
47                    </td>
48                    <td>
49                      <input type="text" id="tone_sec" size=5 maxlength=5 value=3> Seconds
50                    </td>
51                    <td class="sweep_tone">
52                      <input type="checkbox" id="sweep_log">
53                    </td>
54                  </tr>
55                </table>
56              </td>
57              <td class="tonegen-vol-cell">
58                <input type="range" min="0" max="20" value="20" id="left_gain"
59                    onchange="gainChanged();"/>
60                <input type="range" min="0" max="20" value="20" id="right_gain"
61                    onchange="gainChanged();"/>
62                <br>
63                <div id="gain_label">
64                  L(20) / R(20)
65                </div>
66              </td>
67            </tr>
68          </table>
69        </div>
70        <div id="source_file">
71          <input type="button" value="Local Audio File" onclick="loadAudioFile()"
72              style="font-size: large;">
73          <br><br>
74          <div style="display:none">
75            <input type=file id=audio_file onchange="changeAudioFile()">
76          </div>
77        </div>
78      </div>
79      <hr>
80      <input type="checkbox" id="append_tone" checked> Append 1K Hz start tone and end tone
81      <br><br>
82      <button id="play_audio" class="btn-off" onclick="playAudioFile()">
83        <div>
84          <span class="btn-off-text">Play</span>
85          <span class="btn-on-text">Stop Play</span>
86        </div>
87      </button>
88    </div>
89    <div id="record_div" style="display: none;">
90      <h1> Record Samples </h1>
91      <input type="radio" name="record_source" value="audio_source"
92          onclick="setupRecordSource('audio')">
93      Play Audio Source
94      <input type="radio" name="record_source" value="microphone" checked
95          onclick="setupRecordSource('microphone')">
96      Microphone
97      <br><br>
98      <input type="checkbox" id="detect_tone" checked> Detect 1K Hz start tone and end tone
99      <input type="checkbox" id="auto_stop" checked> Auto stop when detected 1K Hz end tone
100      <br><br>
101      <button id="record_btn" class="btn-off" onclick="recordButtonClicked()">
102        <div>
103          <span class="btn-off-text">Start Record</span>
104          <span class="btn-on-text">Stop Record</span>
105        </div>
106      </button>
107      <br><hr>
108      <table align="center">
109        <tr>
110          <td>
111            <div style="overflow:auto; max-height: 250px;">
112              <table id="record_list" align="center">
113              </table>
114            </div>
115          </td>
116        </tr>
117      </table>
118
119    </div>
120
121    <h1> Frequency Response </h1>
122    <table align="center">
123      <tr>
124        <td width=800>
125          <div id="curve_section">
126            <canvas id='fr_canvas' width=800 height=300>
127          </div>
128        </td>
129        <td width=400 height=300 class="canvas_detail">
130          <div id="curve_list" style="overflow:auto; max-height:300px;">
131            <table id="curve_table" width=100% height=100%>
132              <tr>
133                <td colspan=1>
134                  <input type="button" value="Load File" onClick="loadButtonClicked();">
135                  <div style="display:none">
136                    <input type=file id=sample_file onchange="loadSampleFile()">
137                  </div>
138                </td>
139                <td colspan=4>
140                  <select id="noctaves">
141                    <option value="3">1/3</option>
142                    <option value="4">1/4</option>
143                    <option value="5" selected>1/5</option>
144                    <option value="6">1/6</option>
145                    <option value="7">1/7</option>
146                    <option value="8">1/8</option>
147                    <option value="9">1/9</option>
148                    <option value="10">1/10</option>
149                  </select> Octaves
150                  <a id='export_csv'>
151                    <input type="button" value="Export CSV" onClick="exportCSV();">
152                  </a>
153                </td>
154              </tr>
155              <tr>
156                <td>Show</td>
157                <td>File name</td>
158                <td width=50>Left</td>
159                <td width=50>Right</td>
160                <td>Remove</td>
161              </tr>
162            </table>
163          </div>
164        </td>
165      </tr>
166    </table>
167
168    <div id="debug" style="display:none;">
169      <h1>Debug</h1>
170      <a id='export_freq'>
171        <input type="button" value="Export Freq" onClick="exportFreq();">
172      </a>
173      <a id='export_buffer'>
174        <input type="button" value="Export Buffer">
175      </a>
176    </div>
177
178    <div id="log" style="display:none;">
179      <h1>Log</h1>
180      <pre id="log"></pre>
181    </div>
182
183  </body>
184</html>
185