browser-ear-trainer
Version:
Ear-training utility for musicians
113 lines (102 loc) • 5.99 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ear Training Thing</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- my shitty code -->
<script src="bundle.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="row">
<div id="main-panel" class="col-sm-5">
<h1>Time for some ear workouts!</h1>
<div class="row button-row">
<div class="col-xs-6">
<button type="button" id="btn-play-quiz" class="et-button-fill" name="btn-play-quiz">Replay</button>
</div>
<div class="col-xs-1 col-xs-offset-1">
<button type="button" id="btn-settings" class="et-button-fill visible-xs" name="btn-settings"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span></button>
</div>
</div>
<div class="row button-row">
<div class="col-xs-3">
<button type="button" id="btn-play-note" class="et-button-fill" name="btn-play-not">Play note</button>
</div>
<div class="col-xs-3">
<button type="button" id="btn-play-tonic-chord" class="et-button-fill" name="btn-play-tonic-chord">Play tonic chord</button>
</div>
<div class="col-xs-1 col-xs-offset-1">
<button type="button" id="btn-help" class="et-button-fill visible-xs" name="btn-help"><span id="btn-help-icon">?</span></button>
</div>
</div>
<h2>Scale degrees</h2>
<div class="row button-row">
<div class="col-xs-2">
<button type="button" id="btn-degree-1" name="btn-degree-1" data-value="1" class="et-button-fill btn-scale-degree">Tonic</button>
</div>
<div class="col-xs-1">
<button type="button" id="btn-degree-2" name="btn-degree-2" data-value="2" class="et-button-fill btn-scale-degree">2</button>
</div>
<div class="col-xs-1">
<button type="button" id="btn-degree-3" name="btn-degree-3" data-value="3" class="et-button-fill btn-scale-degree">3</button>
</div>
<div class="col-xs-1">
<button type="button" id="btn-degree-4" name="btn-degree-4" data-value="4" class="et-button-fill btn-scale-degree">4</button>
</div>
<div class="col-xs-1">
<button type="button" id="btn-degree-5" name="btn-degree-5" data-value="5" class="et-button-fill btn-scale-degree">5</button>
</div>
<div class="col-xs-1">
<button type="button" id="btn-degree-6" name="btn-degree-6" data-value="6" class="et-button-fill btn-scale-degree">6</button>
</div>
<div class="col-xs-1">
<button type="button" id="btn-degree-7" name="btn-degree-7" data-value="7" class="et-button-fill btn-scale-degree">7</button>
</div>
</div>
<p id="msg-container">
<span id="msg-output"></span>
</p>
<h3>Attempts: <span id="total-attempts"></span></h3>
<h3>Correct Answers: <span id="correct-attempts"></span> (<span id="correct-percent"></span>)</h3>
</div>
<div id="side-panel" class="col-sm-3">
<h2>Help!</h2>
<p>
Don't know how to use this thing? Cool. Our goal here is to get a feel for how notes relate to a key.<br>
This cool guy explains the exercise way better than I could:<br>
<iframe width="100%" height="300px" src="https://www.youtube.com/embed/N-wMWRAITM8" frameborder="0" allowfullscreen></iframe><br>
Now, do this a million times and you should have a better time with improvising/transcribing/composing, and perhaps be a better musician in general.
</p>
<h2>Settings</h2>
<div class="row button-row">
<div class="col-xs-2">
<span class="et-button-label">KEY</span>
</div>
<div class="col-xs-6">
<div class="btn-group et-btn-group-two" data-toggle="buttons">
<label class="btn et-button active">
Major <input type="radio" name="scale-type" autocomplete="off" value="major" checked="">
</label>
<label class="btn et-button">
Minor <input type="radio" name="scale-type" autocomplete="off" value="minor">
</label>
</div>
</div>
</div>
<div class="row button-row">
<div class="col-xs-8">
<button type="button" id="btn-reset-key" class="et-button pull-right" name="btn-reset-key">Reset key</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>