<!-- 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>