Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Formatted the HTML and added space around buttons.
- Loading branch information
1 parent
3bb2648
commit 4a6da8c
Showing
1 changed file
with
54 additions
and
54 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,57 +1,57 @@ | ||
| <!doctype html> | ||
| <html> | ||
| <head> | ||
| <title>Pitch Detector</title> | ||
| <link href='http://fonts.googleapis.com/css?family=Alike' rel='stylesheet' type='text/css'> | ||
| <style> | ||
| body { font: 14pt 'Alike', sans-serif;} | ||
| #note { font-size: 164px; } | ||
| .droptarget { background-color: #348781} | ||
| div.confident { color: black; } | ||
| div.vague { color: lightgrey; } | ||
| #note { display: inline-block; height:180px; text-align: left;} | ||
|
|
||
| #detector { width: 300px; height: 300px; border: 4px solid gray; border-radius: 8px; text-align: center; padding-top: 10px;} | ||
| #output { width: 300px; height: 42px; } | ||
| #flat { display: none; } | ||
| #sharp { display: none; } | ||
| .flat #flat { display: inline; } | ||
| .sharp #sharp { display: inline; } | ||
| </style> | ||
|
|
||
| </head> | ||
| <body> | ||
| <script src="js/pitchdetect.js"></script> | ||
|
|
||
| <button onclick="this.innerText = togglePlayback()">use demo audio</button> | ||
| <button onclick="toggleLiveInput()">use live input</button> | ||
| <button onclick="toggleOscillator()">use oscillator</button> | ||
| <!--<button onclick="updatePitch(0);">sample</button>--> | ||
|
|
||
| <div id="detector" class="vague"> | ||
| <div class="pitch"><span id="pitch">--</span>Hz</div> | ||
| <div class="note"><span id="note">--</span></div> | ||
| <canvas id="output" width=300 height=42></canvas> | ||
| <div id="detune"><span id="detune_amt">--</span><span id="flat">cents ♭</span><span id="sharp">cents ♯</span></div> | ||
| </div> | ||
|
|
||
| <!-- just used for debugging | ||
| <canvas id="waveform" width="512" height="256"></canvas> | ||
| --> | ||
| <a href="https://github.com/cwilso/pitchdetect" style="position: absolute; z-index:2; top: 0; right: 0; border: 0;"><img src="img/forkme.png" alt="Fork me on GitHub"></a> | ||
|
|
||
| <script type="text/javascript"> | ||
|
|
||
| var _gaq = _gaq || []; | ||
| _gaq.push(['_setAccount', 'UA-35593052-1']); | ||
| _gaq.push(['_trackPageview']); | ||
|
|
||
| (function() { | ||
| var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; | ||
| ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; | ||
| var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); | ||
| })(); | ||
|
|
||
| </script> | ||
| </body> | ||
| <head> | ||
| <title>Pitch Detector</title> | ||
| <link href='http://fonts.googleapis.com/css?family=Alike' rel='stylesheet' type='text/css'> | ||
| <style> | ||
| body { font: 14pt 'Alike', sans-serif;} | ||
| #note { font-size: 164px; } | ||
| .droptarget { background-color: #348781} | ||
| div.confident { color: black; } | ||
| div.vague { color: lightgrey; } | ||
| #note { display: inline-block; height:180px; text-align: left;} | ||
| #detector { width: 300px; height: 300px; border: 4px solid gray; border-radius: 8px; text-align: center; padding-top: 10px;} | ||
| #output { width: 300px; height: 42px; } | ||
| #flat { display: none; } | ||
| #sharp { display: none; } | ||
| .flat #flat { display: inline; } | ||
| .sharp #sharp { display: inline; } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <script src="js/pitchdetect.js"></script> | ||
| <p> | ||
| <button onclick="this.innerText = togglePlayback()">use demo audio</button> | ||
| <button onclick="toggleLiveInput()">use live input</button> | ||
| <button onclick="toggleOscillator()">use oscillator</button> | ||
| <!--<button onclick="updatePitch(0);">sample</button>--> | ||
| </p> | ||
|
|
||
| <div id="detector" class="vague"> | ||
| <div class="pitch"><span id="pitch">--</span>Hz</div> | ||
| <div class="note"><span id="note">--</span></div> | ||
| <canvas id="output" width=300 height=42></canvas> | ||
| <div id="detune"><span id="detune_amt">--</span><span id="flat">cents ♭</span><span id="sharp">cents ♯</span></div> | ||
| </div> | ||
|
|
||
| <!-- just used for debugging | ||
| <canvas id="waveform" width="512" height="256"></canvas> | ||
| --> | ||
| <a href="https://github.com/cwilso/pitchdetect" style="position: absolute; z-index:2; top: 0; right: 0; border: 0;"><img src="img/forkme.png" alt="Fork me on GitHub"></a> | ||
|
|
||
| <script type="text/javascript"> | ||
|
|
||
| var _gaq = _gaq || []; | ||
| _gaq.push(['_setAccount', 'UA-35593052-1']); | ||
| _gaq.push(['_trackPageview']); | ||
|
|
||
| (function() { | ||
| var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; | ||
| ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; | ||
| var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); | ||
| })(); | ||
| </script> | ||
| </body> | ||
| </html> |