Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

executable file 258 lines (242 sloc) 13.075 kb
<!DOCTYPE HTML>
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
<script type="text/javascript">
// Redirect if using iphone
if ((navigator.userAgent.indexOf('iPhone') != -1) ||
(navigator.userAgent.indexOf('iPod') != -1)) {
document.location = "/iphone/";
}
</script>
-->
<title>Name That Key - Find a Song's Key by It's Chords</title>
<meta charset="utf-8" />
<meta name="keywords" content="find a song key by chords, figure out a keys, music, chords, guitar, piano, find key online tool" />
<meta name="description" content="A simple web tool that easily helps you find the key of a song by it's chords." />
<meta name="author" content="Garrett Grimm &amp; Rob Law August 17, 2010" />
<link rel="shortcut icon" href="../favicon.ico" />
<link href="style.css" media="all" rel="stylesheet" type="text/css"/>
<script src="scripts/underscore.min.js" type="text/javascript"></script>
<script src="scripts/jquery.min.js" type="text/javascript"></script>
<script src="scripts/keys.js" type="text/javascript"></script>
<script src="scripts/app.js" type="text/javascript"></script>
<!-- ColorBox-->
<script src="scripts/colorbox/jquery.colorbox.js" type="text/javascript"></script>
<link href="scripts/colorbox/colorbox.css" media="all" rel="stylesheet" type="text/css"/>
<!-- JTAB recommended to avoid security warnings with SVG in IE8
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
-->
<!-- JTAB mandatory script includes for jtab -->
<script src="scripts/jtab/prototype.js" type="text/javascript"></script>
<script src="scripts/jtab/raphael.js" type="text/javascript"></script>
<script src="scripts/jtab/jtab.js" type="text/javascript"></script>
<!--Analytics-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1454657-16']);
_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>
</head>
<body>
<div id="wrapper">
<ul id="nav">
<li><a href="http://www.musictheorysite.com/scale-generator/">Scale Generator</a></li>
<li class="current_page"><a href=javascript:;>Name That Key</a></li>
<li><a href="http://www.musictheorysite.com/namethatchord/">Name That Chord</a></li>
</ul>
<div id="header">
<div id="toggle_instr"><small>Instructions</small></div>
<a href="http://www.musictheorysite.com/"><h1>Name That Key <span class="small">by</span></h1></a>
<div class="goodclef_logo">
<a href="http://www.musictheorysite.com/" title="MusicTheorySite.com | Tutorials & Tips on Music Theory"><img src="images/goodclef_logo_small.png" alt="GoodClef.com" /></a>
</div>
<p class="back_to_goodclef"><a href="http://www.musictheorysite.com/" title="MusicTheorySite.com">&larr; Back to MusicTheorySite.com for tutorials and tips on music theory</a></p>
</div>
<div id="instructions">
<p>To identify the key of a song by it's chords choose the chords below and see the highlighted slices on the circle of fifths to the right. This searches all 12 possible keys for the selected chords (diatonically) and returns the keys with most matches. If there is more than one key that contains the selected chords it will display all relevant keys.</p>
<p>Clicking any key in the circle of fifths will display all diatonic chords within that key as guitar chords for you string ticklers.</p>
</div>
<div id="ie_nag" style="display:none">
<p>Name That Key works in Internet Explorer, but is best viewed in Firefox: <a href='http://www.mozilla.com/en-US/' target="_blank" title="Download Firefox"><img src='http://sfx-images.mozilla.org/firefox/3.6/110x32_get_orange.png' alt="Download Firefox" /></a></p>
</div>
<div id="enterchords">
<h3>#1 Pick Chords to Find the Key</h3>
<table id="chord_selector">
<tr><th>Major</th><th>Minor</th><th>Dominant 7</th><th>Major 7</th><th>Minor 7</th><th>Diminished</th></tr>
<tr><td>C</td><td>Cm</td><td>C7</td><td>Cmaj7</td><td>Cm7</td><td>Cdim</td></tr>
<tr><td>C#</td><td>C#m</td><td>C#7</td><td>C#maj7</td><td>C#m7</td><td>C#dim</td></tr>
<tr><td>Db</td><td>Dbm</td><td>Db7</td><td>Dbmaj7</td><td>Dbm7</td><td>Dbdim</td></tr>
<tr><td>D</td><td>Dm</td><td>D7</td><td>Dmaj7</td><td>Dm7</td><td>Ddim</td></tr>
<tr><td>D#</td><td>D#m</td><td>D#7</td><td>D#maj7</td><td>D#m7</td><td>D#dim</td></tr>
<tr><td>Eb</td><td>Ebm</td><td>Eb7</td><td>Ebmaj7</td><td>Ebm7</td><td>Ebdim</td></tr>
<tr><td>E</td><td>Em</td><td>E7</td><td>Emaj7</td><td>Em7</td><td>Edim</td></tr>
<tr><td>E#</td><td>E#m</td><td>E#7</td><td>E#maj7</td><td>E#m7</td><td>E#dim</td></tr>
<tr><td>F</td><td>Fm</td><td>F7</td><td>Fmaj7</td><td>Fm7</td><td>Fdim</td></tr>
<tr><td>F#</td><td>F#m</td><td>F#7</td><td>F#maj7</td><td>F#m7</td><td>F#dim</td></tr>
<tr><td>Gb</td><td>Gbm</td><td>Gb7</td><td>Gbmaj7</td><td>Gbm7</td><td>Gbdim</td></tr>
<tr><td>G</td><td>Gm</td><td>G7</td><td>Gmaj7</td><td>Gm7</td><td>Gdim</td></tr>
<tr><td>G#</td><td>G#m</td><td>G#7</td><td>G#maj7</td><td>G#m7</td><td>G#dim</td></tr>
<tr><td>Ab</td><td>Abm</td><td>Ab7</td><td>Abmaj7</td><td>Abm7</td><td>Abdim</td></tr>
<tr><td>A</td><td>Am</td><td>A7</td><td>Amaj7</td><td>Am7</td><td>Adim</td></tr>
<tr><td>A#</td><td>A#m</td><td>A#7</td><td>A#maj7</td><td>A#m7</td><td>A#dim</td></tr>
<tr><td>Bb</td><td>Bbm</td><td>Bb7</td><td>Bbmaj7</td><td>Bbm7</td><td>Bbdim</td></tr>
<tr><td>B</td><td>Bm</td><td>B7</td><td>Bmaj7</td><td>Bm7</td><td>Bdim</td></tr>
<tr><td>B#</td><td>B#m</td><td>B#7</td><td>B#maj7</td><td>B#m7</td><td>B#dim</td></tr>
</table>
<br />
<a href="javascript:;" id="clear_selected"><small>Clear Selections</small></a>
</div>
<div id="result">
<h3>#2 See The Key</h3>
<p style="font-style:italic; font-size:15px;"><span class="underline">tip:</span> to see the chords within a key give it a click.</p>
<p id="thekey"></p>
<div id="keyletter"></div>
<div id="circle_of_fifths" style="display:none">
<!--Major Pie-->
<div id="major_pie">
<div id="C_Major" class="hold">
<div class="pie"></div>
</div>
<div id="D_Major" class="hold">
<div class="pie"></div>
</div>
<div id="G_Major" class="hold">
<div class="pie"></div>
</div>
<div id="A_Major" class="hold">
<div class="pie"></div>
</div>
<div id="E_Major" class="hold">
<div class="pie"></div>
</div>
<div id="B_Major" class="hold">
<div class="pie"></div>
</div>
<div id="Fsharp_Major" class="hold">
<div class="pie"></div>
</div>
<div id="Csharp_Major" class="hold">
<div class="pie"></div>
</div>
<div id="Ab_Major" class="hold">
<div class="pie"></div>
</div>
<div id="Eb_Major" class="hold">
<div class="pie"></div>
</div>
<div id="Bb_Major" class="hold">
<div class="pie"></div>
</div>
<div id="F_Major" class="hold">
<div class="pie"></div>
</div>
</div>
<!--Minor Pie-->
<div id="minor_pie">
<div id="A_Minor" class="hold_minor">
<div class="pie_minor"></div>
</div>
<div id="B_Minor" class="hold_minor">
<div class="pie_minor"></div>
</div>
<div id="E_Minor" class="hold_minor">
<div class="pie_minor"></div>
</div>
<div id="Fsharp_Minor" class="hold_minor">
<div class="pie_minor"></div>
</div>
<div id="Csharp_Minor" class="hold_minor">
<div class="pie_minor"></div>
</div>
<div id="Ab_Minor" class="hold_minor">
<div class="pie_minor"></div>
</div>
<div id="Eb_Minor" class="hold_minor">
<div class="pie_minor"></div>
</div>
<div id="Bb_Minor" class="hold_minor">
<div class="pie_minor"></div>
</div>
<div id="F_Minor" class="hold_minor">
<div class="pie_minor"></div>
</div>
<div id="C_Minor" class="hold_minor">
<div class="pie_minor"></div>
</div>
<div id="G_Minor" class="hold_minor">
<div class="pie_minor"></div>
</div>
<div id="D_Minor" class="hold_minor">
<div class="pie_minor"></div>
</div>
</div>
<!--Major Labels-->
<div id="key_labels">
<div id="C_Major-label"><a href="diatonic_tabs.html?key=C">C</a></div>
<div id="G_Major-label"><a href="diatonic_tabs.html?key=G">G</a></div>
<div id="D_Major-label"><a href="diatonic_tabs.html?key=D">D</a></div>
<div id="A_Major-label"><a href="diatonic_tabs.html?key=A">A</a></div>
<div id="E_Major-label"><a href="diatonic_tabs.html?key=E">E</a></div>
<div id="B_Major-label"><a href="diatonic_tabs.html?key=B">B</a></div>
<div id="Fsharp_Major-label"><a href="diatonic_tabs.html?key=Fsharp">F#</a></div>
<div id="Db_Major-label"><a href="diatonic_tabs.html?key=Db">Db</a></div>
<div id="Ab_Major-label"><a href="diatonic_tabs.html?key=Ab">Ab</a></div>
<div id="Eb_Major-label"><a href="diatonic_tabs.html?key=Eb">Eb</a></div>
<div id="Bb_Major-label"><a href="diatonic_tabs.html?key=Bb">Bb</a></div>
<div id="F_Major-label"><a href="diatonic_tabs.html?key=F">F</a></div>
<!--Minor Labels-->
<div id="C_Minor-label"><a href="diatonic_tabs.html?key=Cm">Cm</a></div>
<div id="G_Minor-label"><a href="diatonic_tabs.html?key=Gm">Gm</a></div>
<div id="D_Minor-label"><a href="diatonic_tabs.html?key=Dm">Dm</a></div>
<div id="A_Minor-label"><a href="diatonic_tabs.html?key=Am">Am</a></div>
<div id="E_Minor-label"><a href="diatonic_tabs.html?key=Em">Em</a></div>
<div id="B_Minor-label"><a href="diatonic_tabs.html?key=Bm">Bm</a></div>
<div id="Fsharp_Minor-label"><a href="diatonic_tabs.html?key=Fsharpm">F#m</a></div>
<div id="Csharp_Minor-label"><a href="diatonic_tabs.html?key=Dbm">Dbm</a></div>
<div id="Ab_Minor-label"><a href="diatonic_tabs.html?key=Abm">Abm</a></div>
<div id="Eb_Minor-label"><a href="diatonic_tabs.html?key=Ebm">Ebm</a></div>
<div id="Bb_Minor-label"><a href="diatonic_tabs.html?key=Bbm">Bbm</a></div>
<div id="F_Minor-label"><a href="diatonic_tabs.html?key=Fm">Fm</a></div>
</div>
</div>
<div id="ie_results" style="display:none;">
<table id="ie_keys">
<tr><th>Major</th><th>Minor</th></tr>
<tr><td id="ie_C_Major"><a href="diatonic_tabs.html?key=C">C</a></td><td id="ie_A_Minor"><a href="diatonic_tabs.html?key=Am">Am</a></td></tr>
<tr><td id="ie_G_Major"><a href="diatonic_tabs.html?key=G">G</a></td><td id="ie_E_Minor"><a href="diatonic_tabs.html?key=Em">Em</a></td></tr>
<tr><td id="ie_D_Major"><a href="diatonic_tabs.html?key=D">D</a></td><td id="ie_B_Minor"><a href="diatonic_tabs.html?key=Bm">Bm</a></td></tr>
<tr><td id="ie_A_Major"><a href="diatonic_tabs.html?key=A">A</a></td><td id="ie_Fsharp_Minor"><a href="diatonic_tabs.html?key=Fsharpm">F#m</a></td></tr>
<tr><td id="ie_E_Major"><a href="diatonic_tabs.html?key=E">E</a></td><td id="ie_Db_Minor"><a href="diatonic_tabs.html?key=Dbm">Dbm</a></td></tr>
<tr><td id="ie_B_Major"><a href="diatonic_tabs.html?key=B">B</a></td><td id="ie_Ab_Minor"><a href="diatonic_tabs.html?key=Abm">Abm</a></td></tr>
<tr><td id="ie_Fsharp_Major"><a href="diatonic_tabs.html?key=Fsharp">F#</a></td><td id="ie_Eb_Minor"><a href="diatonic_tabs.html?key=Ebm">Ebm</a></td></tr>
<tr><td id="ie_Db_Major"><a href="diatonic_tabs.html?key=Db">Db</a></td><td id="ie_Bb_Minor"><a href="diatonic_tabs.html?key=Bbm">Bbm</a></td></tr>
<tr><td id="ie_Ab_Major"><a href="diatonic_tabs.html?key=Ab">Ab</a></td><td id="ie_F_Minor"><a href="diatonic_tabs.html?key=Fm">Fm</a></td></tr>
<tr><td id="ie_Eb_Major"><a href="diatonic_tabs.html?key=Eb">Eb</a></td><td id="ie_C_Minor"><a href="diatonic_tabs.html?key=Cm">Cm</a></td></tr>
<tr><td id="ie_Bb_Major"><a href="diatonic_tabs.html?key=Bb">Bb</a></td><td id="ie_G_Minor"><a href="diatonic_tabs.html?key=Gm">Gm</a></td></tr>
<tr><td id="ie_F_Major"><a href="diatonic_tabs.html?key=F">F</a></td><td id="ie_D_Minor"><a href="diatonic_tabs.html?key=Dm">Dm</a></td></tr>
</table>
</div>
</div>
<div id="footer">
<p>&copy; 2010
<a href="http://www.grimmdude.com/">Garrett Grimm</a>,
<a href="http://robmadethis.com/">Rob Law</a>, &
<a href="http://livearevolution.com/">Fady</a>
</p>
<p class="validations">
<a href="http://validator.w3.org/check/referer">HTML5</a>
</p>
</div>
</div><!--/wrapper-->
<!--ColorBox http://colorpowered.com/colorbox/ *apply to circle labels, must be here otherwise errors ensue-->
<script type="text/javascript">
jQuery("#key_labels a,#ie_keys a").colorbox({width:"1000", height:"400", iframe:true});
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.