poly-peach
Version:
A targeted pitch-detection library for node in the browser
57 lines (56 loc) • 2.68 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<title>Example</title>
<link rel="icon" href="/favicon.ico?v=1">
</head>
<body>
<div class="hidden" id="alert-histogram">
<div class="histogram-content">
<div class="pitches-visualizer"></div>
<div class="field">
<button class="start-stop-button blue radius-left radius-right">Start/Stop</button>
<button class="draw-button blue radius-left radius-right">Toggle Drawing</button>
<button class="record-signature-button blue radius-left radius-right">Record Signature</button>
</div>
<div class="field field-input">
Reference Note: <input class="reference-note" type="text" value="E2" autocomplete="off" />
</div>
<div class="field field-input">
Notes to Track: <input class="track-notes" type="text" value="" autocomplete="off" />
From harmonics: <span class="track-notes-and-harmonics"></span>
</div>
<div class="field field-input">
Notes Found: <span class="notes-found"></span>
</div>
<div class="field field-input">
Error: <span class="signature-error"></span>
</div>
<div>
<textarea class="note-signatures"></textarea>
</div>
<!--
<div class="field">Average Level: <span class="mean-level"></span></div>
<div class="field">Max Level: <span class="max-level"></span></div>
<div class="field">Top Notes: <span class="top-notes"></span></div>
-->
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/bundle.js{{rand_tag}}"></script>
<script type="text/javascript">
var detector;
$(document).ready(function () {
detector = new PolyPeachDetector();
detector.bindUI();
detector.setDraw(true);
setInterval(function() {
detector.clearTrackingNotesFound();
}, 5000);
});
</script>
</body>
</html>