{"id":880,"date":"2018-02-06T18:56:31","date_gmt":"2018-02-06T18:56:31","guid":{"rendered":"http:\/\/santhony.com\/banjo\/?page_id=880"},"modified":"2021-02-05T23:45:16","modified_gmt":"2021-02-05T23:45:16","slug":"chord-finder","status":"publish","type":"page","link":"https:\/\/santhony.com\/banjo\/instruction-for-plectrum-banjo\/chord-finder\/","title":{"rendered":"Plectrum Banjo Chord Finder"},"content":{"rendered":"<p>Here is a new version of my &#8220;Plectrum Banjo Chord Finder.&#8221; Most glitches have been ironed out (like the spacing of the fret-number fret), and I think most plectrum banjoists, especially beginners, will find it useful.<\/p>\n\n    <style>\n        \/* CHORD SHORTCODES *\/\n\n        table {\n            border-style: none !important;\n            background: #FFFFFF;\n        }\n        .pb-chord{\n            display: inline-block;\n            vertical-align: top;\n            font-family: \"Arial\"; \n            font-size: 14px;\n            font-weight: bold;\n            border-collapse: collapse;\n            border: 0;\n        }\n        \n        .spellingwrapper {\n            display: block;\n            position: relative;\n            border: 1px solid #fff;\n            text-align:center;\n            width:24px;\n            margin-left:-10px;\n        }\n\n        #pb-chord-outer {\n          display: inline-block;\n          position: relative;\n          vertical-align: top;\n          float: left;\n          left: 70px;\n          border-style: none !important;\n          width: auto;\n          height: auto;\n        }\n\n        #pb-chord-blank-outer {\n          display: flex;\n          position: relative;\n          white-space: nowrap;\n          border: none;\n          vertical-align: top;\n          float: left;\n          min-width: 10px;\n          width:10px;\n          height: auto;\n        }\n\n        .fingering span{\n            font-family: \"Arial\";\n            font-size: 12px !important;\n            color: #1e73be;\n            line-height: 14px;\n            text-align: left;\n            margin-top: 10px;\n            margin-left: -5px;\n    \n        }\n\n        .pb-main{\n            display: inline-block;\n            float:left;\n            vertical-align: top;\n            align:left;\n    \n        }\n\n        .pb-chord-name {\n            font-family: \"Arial\" !important; \n            font-size: 13px !important;\n            height: 16px !important;\n        }\n\n        .pb-chord-name-at-nut {\n            font-family: \"Arial\" !important; \n            font-size: 14px !important;\n            border-bottom: 3px solid black;\n            height: 16px !important;\n        }\n\n        .pb-chord-inversion {\n            font-family: \n            font-size: 5px !important;\n            color: #aaa;\n            height: 10px !important;\n            }\n    \n        .pb-chord thead{\n            text-align: center;\n        }\n\n        .pb-chord td{\n            font-family: \"Arial\"; \n            font-size: 12px;\n            font-weight: bold;\n            background:#fff !important;\t\n            height: 18px;\n            width: 18px !important;\n            min-width: 18px;\n            max-width: 18px;\n            \/*padding: 1px !important;*\/\n            text-align: center;\n        }\n\n        .pb-chord td span{\n            position: relative;\n            right: 0px;\n            top: 0px;\n            left: -6px;\n            background: #fff;\n        }\n\n        .pb-chord-note\n        {\n            border:1px solid darkgray;\n\n        }\n\n        .pb-chord-note span {\n            left: -7px;\n        }\n\n        .pb-border-none\n        {\n            border: none !important;\n        }\n\n        .pb-border-none span\n        {\n            left: -7px;\n        }\n        .pb-fret-marker\n        {\n            font-family: \"Arial\"; \n            font-size: 10px;\n            vertical-align:middle;\n            text-align: left;\n            height: 18px !important;\n            left: -7px;\n            font-weight: bold;\n            border: none !important;\n        }\n\n        .pb-fret-marker span {\n            left: -10px;\n            line-height:10px;\n        }\n\n\n        .pb-empty-fret-marker {\n            border: none !important;\n        }\n\n\n        .pb-chord tr td:first-of-type span{\n            right:0px;\n        }\n\n        #pb-circle {\n            background: #000;\n            \/*color: #000 !important;*\/\n            width: 10px;\n            height: 10px;\n            left: -12px;\n            margin-top: 3px !important;\n            margin-bottom:3px !important;\n            border-radius: 50%;\n        }\n\n        #pb-empty-circle {\n            background: #8cd;\n            \/*color: #000 !important;*\/\n            width: 10px;\n            height: 10px;\n            left: -12px;\n            margin-top: 3px !important;\n            margin-bottom:3px !important;\n            border-radius: 50%;\n        }\n\n\n        \/* Popup window *\/\n        .popup {\n            position: relative;\n            display: inline-block;\n            cursor: pointer;\n            overflow: hidden;\n            visibility: visible;\n        }\n\n        .outerdiv {\n            display:inline-block;\n            position:absolute;\n            top:250px;\n            width:100px;\n            height:140px;\n        }\n\n        \/* The actual popup (appears on top) *\/\n        .popup .popuptext {\n            visibility: visible;\n            width: 200px;\n            height: 180px;\n            background-color: #fff;\n            color: #000;\n            border: 1px solid #bbb;\n            text-align: center;\n            padding: 4px 0;\n            position: relative;\n            z-index: 1;\n            bottom: 0px;\n            margin-top: 20px;\n        }\n\n        .app-title {\n            font-family:\"Arial\";\n            font-size: 16px;\n            color: #1e73be;\n            font-weight: bold;\n            text-align: center;\n        }\n        .app-container {\n            font-family:\"Arial\";\n            font-size: 12px;\n            display:table;\n            float: left;\n            position:relative;\n            width:300px;\n            height:300px;\n            margin: 15px;\n            text-align:center;\n            border: 2px solid #aaa;\n        }\n\n        .app-container button {\n            font-family: \"Arial\";\n            font-size: 14px;\n            text-transform: none !important;\n            background: #ddd;\n            color: #000;\n            width: 43px;\n            height: 30px;\n            padding: 2px;\n            border: 1px solid #bbb;\n        }\n\n        .app-container button:disabled {\n            color: #eee;\n            background: #ccc;\n        }\n\n\n        \/* circle of fifths *\/\n\n        .app-container a:link {\n            font-family:\"Arial\";\n            font-size: 14px;\n            text-decoration: none;\n        }\n\n\n        .circle-container {\n            display:flex;\n            position: relative;\n            text-align: center;\n            width: 180px;\n            height: 180px;\n            padding: 10px;\n            \/*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*\/\n            \/*border: dashed 1px;*\/\n            border-radius: 50%;\n            margin-top:50px;\n        }\n\n        .circle-container a {\n            display: block;\n            position: absolute;\n            top: 0px; left: 0px;\n            width: 30px; height: 30px;\n            margin: -2em;\n        }\n\n        #chordnamefield {\n            text-align:center;\n            font-family:\"Arial\";\n            font-size: 14px;\n            color: #000;\n            vertical-align: middle;\n            margin: 4px;\n            width: 96%;\n            height: 30px;\n            border: 1px solid #bbb;\n            background: #eee;\n            padding-top: 2px;\n\n        }\n\n        .circle-container a:hover {\n            background: #888;\n        }\n\n        .circle-container button {\n            font-family:\"Arial\";\n            font-size: 14px; \n            display: block; \n            width: 30px; \n            height: 30px; \n        }\n\n        .deg0 { transform: translate(90px) translate(155px, 90px); } \/* 90px = half the width of the wrapper *\/\n        .deg30 { transform: rotate(30deg) translate(90px) rotate(-30deg) translate(155px, 90px); }\n        .deg60 { transform: rotate(60deg) translate(90px) rotate(-60deg) translate(155px, 90px); }\n        .deg90 { transform: rotate(90deg) translate(90px) rotate(-90deg) translate(155px, 90px); }\n        .deg120 { transform: rotate(120deg) translate(90px) rotate(-120deg) translate(155px, 90px); }\n        .deg150 { transform: rotate(150deg) translate(90px) rotate(-150deg) translate(155px, 90px); }\n        .deg180 { transform: translate(-90px) translate(155px, 90px); }\n\n        .deg210 { transform: rotate(210deg) translate(90px) rotate(-210deg) translate(155px, 90px); }\n        .deg240 { transform: rotate(240deg) translate(90px) rotate(-240deg) translate(155px, 90px); }\n        .deg270 { transform: rotate(270deg) translate(90px) rotate(-270deg) translate(155px, 90px); }\n        .deg300 { transform: rotate(300deg) translate(90px) rotate(-300deg) translate(155px, 90px); }\n        .deg330 { transform: rotate(330deg) translate(90px) rotate(-330deg) translate(155px, 90px); }\n\n        .deg135 { transform: rotate(135deg) translate(90px) rotate(-135deg) translate(180px, 90px); }\n        .deg225 { transform: rotate(225deg) translate(90px) rotate(-225deg) translate(180px, 90px); }\n        .deg315 { transform: rotate(315deg) translate(90px) rotate(-315deg) translate(180px, 90px); }\n        .deg45 { transform: rotate(45deg) translate(220) rotate(-45deg); }\n    <\/style>\n    \n    <div class=\"app-container\">\n    <table>\n        <tr><td class=\"app-title\">Plectrum Banjo Chord Finder<\/td><\/tr>\n    <\/table>\n    <table>\n        <tr>\n            <div class=\"popup\" onclick=\"myFunction()\">\n            <div class=\"popuptext\" id=\"myPopup\"> <\/div>\n        <\/tr>\n        <tr>\n            <td>\n                <div class=\"circle-container\" style=\"transform: translate(90, 90);\">\n                    <a href=\"#\" class=\"deg0\"> <button onclick=\"setKey('A');\">A<\/button><\/a>\n                    <a href=\"#\" class=\"deg30\"> <button onclick=\"setKey('E');\">E<\/button><\/a>\n                    <a href=\"#\" class=\"deg60\"> <button onclick=\"setKey('B');\">B<\/button><\/a>\n                    <a href=\"#\" class=\"deg90\"> <button onclick=\"setKey('Gb');\">Gb<\/button><\/a>\n                    <a href=\"#\" class=\"deg120\"> <button onclick=\"setKey('Db');\">Db<\/button><\/a>\n                    <a href=\"#\" class=\"deg150\"> <button onclick=\"setKey('Ab');\">Ab<\/button><\/a>\n                    <a href=\"#\" class=\"deg180\"> <button onclick=\"setKey('Eb');\">Eb<\/button><\/a>\n                    <a href=\"#\" class=\"deg210\"> <button onclick=\"setKey('Bb');\">Bb<\/button><\/a>\n                    <a href=\"#\" class=\"deg240\"> <button onclick=\"setKey('F');\">F<\/button><\/a>\n                    <a href=\"#\" class=\"deg270\"> <button onclick=\"setKey('C');\">C<\/button><\/a>\n                    <a href=\"#\" class=\"deg300\"> <button onclick=\"setKey('G');\">G<\/button><\/a>\n                    <a href=\"#\" class=\"deg330\"> <button onclick=\"setKey('D');\">D<\/button><\/a>\n                <\/div>\n            <\/td>\n        <\/tr>\n        <tr>\n            <td style=\"text-align:center;\">\n                <div class=\"popup\" id=\"chordnamefield\" onclick=\"myFunction()\">Chord: <\/div>\n                 <div class=\"popuptext\" id=\"myPopup\"> <\/div>\n            <\/td>\n        <\/tr>\n        <tr>\n            <td style=\"text-align:center;\">\n                <button id=\"m\" value=\"m\" onclick=\"setSuffix(this.value)\">m<\/button>\n                <button id=\"7\" value=\"7\" onclick=\"setSuffix(this.value)\">7<\/button>\n                <button id=\"m7\" value=\"m7\" onclick=\"setSuffix(this.value)\">m7<\/button>\n                 <button id=\"6\" value=\"6\" onclick=\"setSuffix(this.value)\">6<\/button>\n                <button id=\"m6\" value=\"m6\" onclick=\"setSuffix(this.value)\">m6<\/button>\n                <button id=\"9\" value=\"9\" onclick=\"setSuffix(this.value)\">9<\/button>\n            <\/td>\n        <\/tr>\n        <tr>\n            <td style=\"left:100px; text-align:center;\">\n                <button id=\"Maj7\" value=\"Maj7\" onclick=\"setSuffix(this.value)\">Maj7<\/button>\n                <button id=\"7b5\" value=\"7b5\" onclick=\"setSuffix(this.value)\">7b5<\/button>\n                <button id=\"m7b5\" value=\"m7b5\" onclick=\"setSuffix(this.value)\">m7b5<\/button>\n                <button id=\"7+5\" value=\"7+5\" onclick=\"setSuffix(this.value)\">7+5<\/button>\n                <button id=\"dim\" value=\"dim\" onclick=\"setSuffix(this.value)\">dim<\/button>\n                <button id=\"aug\" value=\"aug\" onclick=\"setSuffix(this.value)\">aug<\/button>\n\n            <s\n            <\/td>\n        <\/tr>\n        <tr>\n            <td style=\"left:100px; text-align:center;\">\n                <button id=\"no1\" value=\"0\" onclick=\"setInversion(this.value)\">&nbsp;<\/button>\n                <button id=\"alt7\" value=\"alt7\" onclick=\"setSuffix(this.value)\">alt7<\/button>\n                <button id=\"sus\" value=\"sus\" onclick=\"setSuffix(this.value)\">sus<\/button>\n                <button id=\"13\" value=\"13\" onclick=\"setSuffix(this.value)\">13<\/button>  \n                <button id=\"no3\" value=\"0\" onclick=\"setInversion(this.value)\">&nbsp;<\/button>\n                <button id=\"no4\" value=\"0\" onclick=\"setInversion(this.value)\">&nbsp;<\/button>\n            <\/td>\n        <\/tr>\n        <tr>\n            <td style=\"left:100px; text-align:center;\">\n                <button id=\"I\" value=\"I\" onclick=\"setInversion(this.value)\">I<\/button>\n                <button id=\"III\" value=\"III\" onclick=\"setInversion(this.value)\">III<\/button>\n                <button id=\"V\" value=\"V\" onclick=\"setInversion(this.value)\">V<\/button>\n                <button id=\"VI\" value=\"VI\" onclick=\"setInversion(this.value)\">VI<\/button>\n                <button id=\"VII\" value=\"VII\" onclick=\"setInversion(this.value)\">VII<\/button>\n                <button id=\"IX\" value=\"IX\" onclick=\"setInversion(this.value)\">IX<\/button>\n\n            <\/td>\n        <\/tr>\n\n    <\/table>\n    <\/div><script type=\"text\/javascript\">\n                    showEmptyShape();\n                    setAllSuffixDisabled(); \n                    setAllInversionDisabled();\n                    window.addEventListener(\"load\", function() {\n                        showEmptyShape();\n                    })\n                <\/script>\n<p>Usage: First click on the &#8220;circle-of-fifths&#8221; chord key button, then the suffix (&#8220;m&#8221;, &#8220;7&#8221;, &#8220;m6&#8221;, etc.), and finally the inversion (&#8220;I&#8221;, &#8220;III&#8221;, &#8220;VII&#8221;, etc.) which comes closest to the melody note\u00a0where you need to play the chord. Of course, this will require some experience and some knowledge of what notes from the chord key&#8217;s scale are on the first string. Note that for different suffixes some inversions are not available (there is no &#8220;VII&#8221; inversion for a &#8220;6&#8221; chord for example or no &#8220;VII&#8221; chord for a simple &#8220;m&#8221; (minor) chord. The buttons for any unavailable inversions are disabled and ghosted out so that mistakes do not generate empty shape diagrams.<\/p>\n<p>When the chord, suffix, and inversion have been strung together (the chord has been &#8220;built&#8221;) and displays in the box that says, &#8220;Chord: &#8221; between the circle-of- fifths and the suffix\/inversion buttons, click on the box and the chord shape will appear in the upper diagram box. If the sound file exists, you can play the sound of the chord by clicking on the shape diagram. Not all shapes have sound files yet\u2014I&#8217;m creating them as needed for the lessons. I also added code to display the chord &#8220;spelling&#8221; (the note degrees, like &#8220;1&#8221;, &#8220;3&#8221;, &#8220;b7&#8221;, etc., of the scale) below each string. The spacing of spelling is now fixed\u2014the degrees are now properly centered beneath each string.<\/p>\n<p>If you get an &#8220;empty&#8221; five-fret diagram it means the chord doesn&#8217;t exist in the database of shapes. In order to avoid this situation, I&#8217;ve tried to make it virtually impossible to enter bogus or ridiculous chord names or combinations of suffixes.<\/p>\n<p>Experts, if you notice any mistaken shapes, please let me know in a comment on this page. Also, because of the note spelling peculiarities of some of the inversions, some shapes might be almost impossible to play and\/or sound really awful. For example, while I was entering and testing the shapes, I noticed all the Maj7 (I) formations have both of these problems. Nobody would ever really want to play one of them I don&#8217;t think. I suppose opinions might differ, but if I have determined that the fingering is too difficult or the chord sounds awful, it will be noted with &#8216;<img decoding=\"async\" src=\"http:\/\/www.santhony.com\/banjo\/images\/zeroslash.png\" width=\"16\" \/>&#8216; in the box below the chord diagram where fingering usually gets displayed.<\/p>\n<p>Go to my <a href=\"http:\/\/santhony.com\/banjo\/instruction-for-plectrum-banjo\/\">banjo instruction<\/a> page (beginners especially at the moment).<\/p>\n<p><a href=\"https:\/\/santhony.com\/banjo\/wp-content\/uploads\/2018\/11\/EighthNote-2.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/santhony.com\/banjo\/wp-content\/uploads\/2018\/11\/EighthNote-2.jpg\" alt=\"\" width=\"30\" height=\"40\" class=\"alignnone size-full wp-image-996\" \/><\/a><\/p>\n<table><tr><td width=\"85%\" style=\"vertical-align:top;\"><p class=\"credit\">If you find these lessons helpful, especially\n         if you are using them as a teacher for instruction, please consider making a PayPal donation\u2014of any amount\u2014to help keep them coming!<\/p><\/td><td ><div style=\"margin-top:20px; vertical-align:top;\"><form action=\"https:\/\/www.paypal.com\/cgi-bin\/webscr\" method=\"post\" target=\"_top\">\n<input type=\"hidden\" name=\"cmd\" value=\"_s-xclick\">\n<input type=\"hidden\" name=\"hosted_button_id\" value=\"CZTZWEKTC28BU\">\n<input type=\"image\" src=\"http:\/\/www.santhony.com\/banjo\/images\/btn_donate.png\" border=\"0\" name=\"submit\" alt=\"PayPal - The safer, easier way to pay online!\">\n<img loading=\"lazy\" decoding=\"async\" alt=\"\" border=\"0\" src=\"https:\/\/www.paypalobjects.com\/en_US\/i\/scr\/pixel.gif\" width=\"1\" height=\"1\">\n<\/form><\/div><\/td><\/tr><\/table><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Here is a new version of my &#8220;Plectrum Banjo Chord Finder.&#8221; Most glitches have been ironed out (like the spacing of the fret-number fret), and I think most plectrum banjoists, especially beginners, will find it useful. Usage: First click on the &#8220;circle-of-fifths&#8221; chord key button, then the suffix (&#8220;m&#8221;, &#8220;7&#8221;, &#8220;m6&#8221;, etc.), and finally the &hellip; <a href=\"https:\/\/santhony.com\/banjo\/instruction-for-plectrum-banjo\/chord-finder\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Plectrum Banjo Chord Finder<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":141,"menu_order":100,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-880","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/santhony.com\/banjo\/wp-json\/wp\/v2\/pages\/880","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/santhony.com\/banjo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/santhony.com\/banjo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/santhony.com\/banjo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/santhony.com\/banjo\/wp-json\/wp\/v2\/comments?post=880"}],"version-history":[{"count":27,"href":"https:\/\/santhony.com\/banjo\/wp-json\/wp\/v2\/pages\/880\/revisions"}],"predecessor-version":[{"id":1346,"href":"https:\/\/santhony.com\/banjo\/wp-json\/wp\/v2\/pages\/880\/revisions\/1346"}],"up":[{"embeddable":true,"href":"https:\/\/santhony.com\/banjo\/wp-json\/wp\/v2\/pages\/141"}],"wp:attachment":[{"href":"https:\/\/santhony.com\/banjo\/wp-json\/wp\/v2\/media?parent=880"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}