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
