| <!-- Copyright (c) 2014 The Chromium OS Authors. All rights reserved. --> |
| <!-- Use of this source code is governed by a BSD-style license that can be --> |
| <!-- found in the LICENSE file. --> |
| |
| <html> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
| <title>Audio Quality Test</title> |
| <script type="text/javascript" src="audio.js"></script> |
| <script type="text/javascript" src="source.js"></script> |
| <script type="text/javascript" src="recorder.js"></script> |
| <script type="text/javascript" src="analysis.js"></script> |
| <link rel="stylesheet" type="text/css" href="audio.css"> |
| </head> |
| <body> |
| <ul class="tab-page"> |
| <li id="play_tab" onclick="switchTab('play_tab')" class="selected"><a>Play</a></li> |
| <li id="record_tab" onclick="switchTab('record_tab')"><a>Record</a></li> |
| </ul> |
| <div id="play_div"> |
| <h1>Audio Source</h1> |
| <input type="radio" name="audio_source" value="sine" |
| onclick="setupSourceLayer('sine')"> Sine Tone |
| <input type="radio" name="audio_source" value="sweep" |
| onclick="setupSourceLayer('sweep')" checked> Sweep Tone |
| <input type="radio" name="audio_source" value="file" |
| onclick="setupSourceLayer('file')"> Load from file |
| <br> |
| <br> |
| <div id="source_layer" align="center"> |
| <div id="source_tone"> |
| <table style="width: 50%;"> |
| <tr> |
| <td class="tonegen-main-cell"> |
| <table style="width: 100%;"> |
| <tr> |
| <td width="50%">Frequency: (20 Hz ~ SampleRate / 2)</td> |
| <td width="30%">Duration</td> |
| <td class="sweep_tone">Log</td> |
| </tr> |
| <tr> |
| <td> |
| <input type="text" id="freq_start" size=5 maxlength=5 value=1000> Hz |
| <div class="sweep_tone"> |
| <input type="text" id="freq_end" size=5 maxlength=5 value=1000> Hz |
| </div> |
| </td> |
| <td> |
| <input type="text" id="tone_sec" size=5 maxlength=5 value=3> Seconds |
| </td> |
| <td class="sweep_tone"> |
| <input type="checkbox" id="sweep_log"> |
| </td> |
| </tr> |
| </table> |
| </td> |
| <td class="tonegen-vol-cell"> |
| <input type="range" min="0" max="20" value="20" id="left_gain" |
| onchange="gainChanged();"/> |
| <input type="range" min="0" max="20" value="20" id="right_gain" |
| onchange="gainChanged();"/> |
| <br> |
| <div id="gain_label"> |
| L(20) / R(20) |
| </div> |
| </td> |
| </tr> |
| </table> |
| </div> |
| <div id="source_file"> |
| <input type="button" value="Local Audio File" onclick="loadAudioFile()" |
| style="font-size: large;"> |
| <br><br> |
| <div style="display:none"> |
| <input type=file id=audio_file onchange="changeAudioFile()"> |
| </div> |
| </div> |
| </div> |
| <hr> |
| <input type="checkbox" id="append_tone" checked> Append 1K Hz start tone and end tone |
| <br><br> |
| <button id="play_audio" class="btn-off" onclick="playAudioFile()"> |
| <div> |
| <span class="btn-off-text">Play</span> |
| <span class="btn-on-text">Stop Play</span> |
| </div> |
| </button> |
| </div> |
| <div id="record_div" style="display: none;"> |
| <h1> Record Samples </h1> |
| <input type="radio" name="record_source" value="audio_source" |
| onclick="setupRecordSource('audio')"> |
| Play Audio Source |
| <input type="radio" name="record_source" value="microphone" checked |
| onclick="setupRecordSource('microphone')"> |
| Microphone |
| <br><br> |
| <input type="checkbox" id="detect_tone" checked> Detect 1K Hz start tone and end tone |
| <input type="checkbox" id="auto_stop" checked> Auto stop when detected 1K Hz end tone |
| <br><br> |
| <button id="record_btn" class="btn-off" onclick="recordButtonClicked()"> |
| <div> |
| <span class="btn-off-text">Start Record</span> |
| <span class="btn-on-text">Stop Record</span> |
| </div> |
| </button> |
| <br><hr> |
| <table align="center"> |
| <tr> |
| <td> |
| <div style="overflow:auto; max-height: 250px;"> |
| <table id="record_list" align="center"> |
| </table> |
| </div> |
| </td> |
| </tr> |
| </table> |
| |
| </div> |
| |
| <h1> Frequency Response </h1> |
| <table align="center"> |
| <tr> |
| <td width=800> |
| <div id="curve_section"> |
| <canvas id='fr_canvas' width=800 height=300> |
| </div> |
| </td> |
| <td width=400 height=300 class="canvas_detail"> |
| <div id="curve_list" style="overflow:auto; max-height:300px;"> |
| <table id="curve_table" width=100% height=100%> |
| <tr> |
| <td colspan=1> |
| <input type="button" value="Load File" onClick="loadButtonClicked();"> |
| <div style="display:none"> |
| <input type=file id=sample_file onchange="loadSampleFile()"> |
| </div> |
| </td> |
| <td colspan=4> |
| <select id="noctaves"> |
| <option value="3">1/3</option> |
| <option value="4">1/4</option> |
| <option value="5" selected>1/5</option> |
| <option value="6">1/6</option> |
| <option value="7">1/7</option> |
| <option value="8">1/8</option> |
| <option value="9">1/9</option> |
| <option value="10">1/10</option> |
| </select> Octaves |
| <a id='export_csv'> |
| <input type="button" value="Export CSV" onClick="exportCSV();"> |
| </a> |
| </td> |
| </tr> |
| <tr> |
| <td>Show</td> |
| <td>File name</td> |
| <td width=50>Left</td> |
| <td width=50>Right</td> |
| <td>Remove</td> |
| </tr> |
| </table> |
| </div> |
| </td> |
| </tr> |
| </table> |
| |
| <div id="debug" style="display:none;"> |
| <h1>Debug</h1> |
| <a id='export_freq'> |
| <input type="button" value="Export Freq" onClick="exportFreq();"> |
| </a> |
| <a id='export_buffer'> |
| <input type="button" value="Export Buffer"> |
| </a> |
| </div> |
| |
| <div id="log" style="display:none;"> |
| <h1>Log</h1> |
| <pre id="log"></pre> |
| </div> |
| |
| </body> |
| </html> |
