Piano Chord Visualizer<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n \/* Custom styles to complement Tailwind *\/\n body {\n font-family: 'Inter', sans-serif;\n }\n .piano-key {\n position: relative;\n border: 1px solid #6b7280;\n box-shadow: 2px 2px 5px rgba(0,0,0,0.2);\n cursor: pointer;\n transition: background-color 0.1s ease;\n }\n .white-key {\n background-color: #f8fafc;\n height: 220px;\n width: 100%;\n }\n .white-key:hover {\n background-color: #e2e8f0;\n }\n .black-key {\n background-color: #1f2937;\n height: 130px;\n width: 60%;\n position: absolute;\n left: 70%;\n top: 0;\n z-index: 10;\n }\n .black-key:hover {\n background-color: #374151;\n }\n .note-dot {\n position: absolute;\n bottom: 15px;\n left: 50%;\n transform: translateX(-50%);\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n color: white;\n font-size: 12px;\n border: 2px solid rgba(255, 255, 255, 0.7);\n box-shadow: 0 4px 6px rgba(0,0,0,0.2);\n z-index: 20;\n }\n .black-key .note-dot {\n bottom: 10px;\n width: 28px;\n height: 28px;\n font-size: 11px;\n }\n <\/style>\n<\/head>\n<body data-rsssl=1 class=\"bg-gray-100 flex items-center justify-center min-h-screen p-4\">\n\n <div class=\"w-full max-w-4xl bg-white rounded-xl shadow-lg p-6 md:p-8\">\n \n <header class=\"text-center mb-6\">\n <h1 class=\"text-3xl md:text-4xl font-bold text-gray-800\">Chord Visualizer<\/h1>\n <p class=\"text-gray-600 mt-2\">Enter a chord (e.g., C, gm7, CM7, F4(6), A\/c#) and see it on the piano.<\/p>\n <\/header>\n\n \n <div class=\"flex flex-col sm:flex-row gap-3 mb-6\">\n <input type=\"text\" id=\"chordInput\" placeholder=\"Enter chord here...\" class=\"flex-grow text-lg p-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition\">\n <button id=\"findChordBtn\" class=\"bg-blue-600 text-white font-bold text-lg px-8 py-3 rounded-lg hover:bg-blue-700 transition shadow-md\">Draw Chord<\/button>\n <\/div>\n\n \n <div id=\"messageArea\" class=\"text-center min-h-[24px] mb-4 text-gray-700 font-medium\"><\/div>\n\n \n <div id=\"pianoContainer\" class=\"w-full bg-gray-800 p-4 rounded-lg shadow-inner select-none\">\n <div id=\"piano\" class=\"relative flex\">\n \n <\/div>\n <\/div>\n\n \n <div id=\"inversionControls\" class=\"mt-6 text-center\">\n \n <\/div>\n\n \n <div id=\"colorLegend\" class=\"mt-6 pt-4 border-t border-gray-200\">\n <h3 class=\"text-lg font-semibold text-center text-gray-700 mb-3\">Color Legend<\/h3>\n <div class=\"flex flex-wrap justify-center gap-x-4 gap-y-2\">\n \n <\/div>\n <\/div>\n\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n \/\/ --- CONSTANTS AND CORE DATA ---\n const noteValues = {\n 'C': 0, 'B#': 0, 'C#': 1, 'Db': 1, 'D': 2, 'D#': 3, 'Eb': 3, 'E': 4, 'Fb': 4,\n 'F': 5, 'E#': 5, 'F#': 6, 'Gb': 6, 'G': 7, 'G#': 8, 'Ab': 8, 'A': 9,\n 'A#': 10, 'Bb': 10, 'B': 11, 'Cb': 11,\n };\n const valueToNote = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];\n \n const chordFormulas = {\n 'M': [0, 4, 7], 'maj': [0, 4, 7], '': [0, 4, 7],\n 'M7': [0, 4, 7, 11], 'maj7': [0, 4, 7, 11], '7M': [0, 4, 7, 11],\n '6': [0, 4, 7, 9], 'M6': [0, 4, 7, 9],\n 'm': [0, 3, 7], 'min': [0, 3, 7],\n 'm7': [0, 3, 7, 10], \n 'm(maj7)': [0, 3, 7, 11], 'm7M': [0, 3, 7, 11], 'mM7': [0, 3, 7, 11],\n 'm6': [0, 3, 7, 9],\n 'm7b5': [0, 3, 6, 10], '\u00f8': [0, 3, 6, 10],\n '7': [0, 4, 7, 10],\n 'dim': [0, 3, 6, 9], '\u00b0': [0, 3, 6, 9],\n 'dim7': [0, 3, 6, 9], '\u00b07': [0, 3, 6, 9],\n 'aug': [0, 4, 8], '+': [0, 4, 8],\n 'sus4': [0, 5, 7], 'sus': [0, 5, 7], '4': [0, 5, 7],\n 'sus2': [0, 2, 7],\n '5': [0, 7],\n };\n\n const alterationIntervals = {\n 'b5': { find: 7, replace: 6 }, '5b': { find: 7, replace: 6 },\n '#5': { find: 7, replace: 8 }, '5#': { find: 7, replace: 8 },\n '6': { add: 9 },\n 'b9': { add: 13 },\n '9': { add: 14 }, 'add9': { add: 14 },\n '#9': { add: 15 },\n '11': { add: 17 },\n '#11': { add: 18 },\n 'b13': { add: 20 },\n '13': { add: 21 },\n };\n\n const intervalColors = {\n 0: { color: 'bg-gray-900', name: 'Root (R)', label: 'R' }, 1: { color: 'bg-purple-700', name: 'Minor 2nd (b9)', label: 'b9' },\n 2: { color: 'bg-purple-500', name: 'Major 2nd (9)', label: '9' }, 3: { color: 'bg-orange-600', name: 'Minor 3rd (m3)', label: 'm3' },\n 4: { color: 'bg-red-600', name: 'Major 3rd (M3)', label: 'M3' }, 5: { color: 'bg-yellow-500', name: 'Perfect 4th (4\/11)', label: '4' },\n 6: { color: 'bg-teal-600', name: 'Diminished 5th (b5)', label: 'b5' }, 7: { color: 'bg-green-600', name: 'Perfect 5th (5)', label: '5' },\n 8: { color: 'bg-teal-400', name: 'Augmented 5th (#5)', label: '#5' }, 9: { color: 'bg-sky-500', name: 'Major 6th (6\/13)', label: '6' },\n 10: { color: 'bg-blue-700', name: 'Minor 7th (m7)', label: 'm7' }, 11: { color: 'bg-blue-500', name: 'Major 7th (M7)', label: 'M7' },\n };\n\n \/\/ --- DOM ELEMENTS ---\n const piano = document.getElementById('piano');\n const chordInput = document.getElementById('chordInput');\n const findChordBtn = document.getElementById('findChordBtn');\n const messageArea = document.getElementById('messageArea');\n const inversionControls = document.getElementById('inversionControls');\n const colorLegend = document.getElementById('colorLegend').querySelector('div');\n\n \/\/ --- LOGIC FUNCTIONS ---\n\n function parseChordInput(input) {\n input = input.trim();\n if (!input) return null;\n\n let standardizedInput = input.charAt(0).toUpperCase() + input.slice(1);\n const chordRegex = \/^([A-G](?:#|b)?)([^\/()]*)(?:\$(.*?)\$)?(?:\\\/([A-Ga-g](?:#|b)?))?$\/;\n const match = standardizedInput.match(chordRegex);\n\n if (!match) return null;\n\n let [, rootNoteStr, qualityStr, alterationsStr, bassNoteStr] = match;\n qualityStr = qualityStr.trim(); \n\n const rootValue = noteValues[rootNoteStr];\n if (rootValue === undefined) return null;\n\n const sortedQualities = Object.keys(chordFormulas).sort((a, b) => b.length - a.length);\n let baseQuality = null;\n let formula = null;\n for (const q of sortedQualities) {\n if (qualityStr === q) {\n baseQuality = q;\n formula = [...chordFormulas[q]];\n break;\n }\n }\n if (!formula) return null;\n\n if (alterationsStr) {\n const alterations = alterationsStr.match(\/(\\#|b)?\\d+\/g) || [];\n if (['', 'M', 'maj', '6'].includes(baseQuality) && alterations.some(alt => ['b9', '#9', '11', '#11', '13', 'b13'].includes(alt))) {\n if (!formula.includes(10) && !formula.includes(11)) {\n formula.push(10);\n }\n }\n for (const alt of alterations) {\n if (alterationIntervals[alt]) {\n const mod = alterationIntervals[alt];\n if (mod.replace !== undefined) {\n const index = formula.indexOf(mod.find);\n if (index > -1) formula[index] = mod.replace;\n }\n if (mod.add !== undefined && !formula.includes(mod.add)) {\n formula.push(mod.add);\n }\n }\n }\n }\n \n formula.sort((a, b) => a - b);\n\n let bassValue = null;\n if (bassNoteStr) {\n const standardizedBass = bassNoteStr.charAt(0).toUpperCase() + bassNoteStr.slice(1);\n bassValue = noteValues[standardizedBass];\n if (bassValue === undefined) return null;\n }\n\n return { rootValue, formula, bassValue, input };\n }\n\n function getInversions(rootPositionNotes) {\n if (!rootPositionNotes || rootPositionNotes.length === 0) {\n return [];\n }\n const inversions = [];\n let currentNotes = [...rootPositionNotes];\n for (let i = 0; i < rootPositionNotes.length; i++) {\n inversions.push(currentNotes);\n const firstNote = currentNotes[0];\n currentNotes = [...currentNotes.slice(1), firstNote + 12];\n }\n return inversions;\n }\n\n function normalizeNotesToKeyboard(notes) {\n let normalized = [...notes];\n const pianoMin = 3 * 12; \/\/ C3\n const pianoMax = (5 * 12) + 11; \/\/ B5\n\n while (Math.max(...normalized) > pianoMax) {\n normalized = normalized.map(n => n - 12);\n }\n while (Math.min(...normalized) < pianoMin) {\n normalized = normalized.map(n => n + 12);\n }\n return normalized;\n }\n \n function getOrdinal(n) {\n const s = [\"th\", \"st\", \"nd\", \"rd\"];\n const v = n % 100;\n return n + (s[(v - 20) % 10] || s[v] || s[0]);\n }\n\n \/\/ --- RENDERING (DOM) FUNCTIONS ---\n\n function drawPiano() {\n piano.innerHTML = '';\n const noteNames = ['C', 'D', 'E', 'F', 'G', 'A', 'B'];\n const blackKeyMap = { 'C': 'C#', 'D': 'D#', 'F': 'F#', 'G': 'G#', 'A': 'A#' };\n for (let octave = 3; octave <= 5; octave++) {\n for (const note of noteNames) {\n const keyContainer = document.createElement('div');\n keyContainer.className = 'relative flex-1';\n const whiteKey = document.createElement('div');\n whiteKey.className = 'piano-key white-key';\n whiteKey.dataset.note = `${note}${octave}`;\n keyContainer.appendChild(whiteKey);\n if (blackKeyMap[note]) {\n const blackKey = document.createElement('div');\n blackKey.className = 'piano-key black-key';\n blackKey.dataset.note = `${blackKeyMap[note]}${octave}`;\n keyContainer.appendChild(blackKey);\n }\n piano.appendChild(keyContainer);\n }\n }\n }\n\n function clearPiano() {\n document.querySelectorAll('.note-dot').forEach(dot => dot.remove());\n }\n\n function drawChord(noteValues, rootValue) {\n clearPiano();\n noteValues.forEach(noteValue => {\n const octave = Math.floor(noteValue \/ 12);\n const noteName = valueToNote[noteValue % 12];\n const key = document.querySelector(`[data-note=\"${noteName}${octave}\"]`);\n if (key) {\n let interval = (noteValue - rootValue);\n while(interval < 0) interval += 12;\n interval = interval % 12;\n \n const colorInfo = intervalColors[interval] || { color: 'bg-pink-500', label: '?' };\n const dot = document.createElement('div');\n dot.className = `note-dot ${colorInfo.color}`;\n dot.textContent = colorInfo.label;\n dot.title = colorInfo.name;\n key.appendChild(dot);\n }\n });\n }\n\n function generateLegend() {\n colorLegend.innerHTML = '';\n for (const key in intervalColors) {\n const { color, name } = intervalColors[key];\n const legendItem = document.createElement('div');\n legendItem.className = 'flex items-center';\n legendItem.innerHTML = `<span class=\"w-4 h-4 rounded-full ${color} mr-2 border border-gray-400\"><\/span><span>${name}<\/span>`;\n colorLegend.appendChild(legendItem);\n }\n }\n\n \/\/ --- MAIN FUNCTION ---\n\n function findAndDrawChord() {\n const input = chordInput.value;\n const parsedChord = parseChordInput(input);\n\n messageArea.textContent = '';\n inversionControls.innerHTML = '';\n\n if (!parsedChord) {\n clearPiano();\n messageArea.textContent = `Could not understand \"${input}\". Try: \"Am7\", \"CM7\", \"Cm7M\" or \"C\/g\".`;\n return;\n }\n\n const { rootValue, formula, bassValue, input: originalInput } = parsedChord;\n const startOctave = 4;\n const rootNote = rootValue + (startOctave * 12);\n const rootPositionNotes = formula.map(interval => rootNote + interval);\n\n if (bassValue !== null) {\n messageArea.textContent = `Showing ${originalInput}`;\n let bassNote = bassValue + (startOctave * 12);\n while (Math.abs(bassNote - rootNote) > 8) {\n if (bassNote > rootNote) bassNote -= 12; else bassNote += 12;\n }\n let notesToDraw = [bassNote];\n rootPositionNotes.forEach(note => {\n if ((note % 12) !== (bassValue % 12)) {\n let currentNote = note;\n while (currentNote < notesToDraw[notesToDraw.length - 1]) {\n currentNote += 12;\n }\n notesToDraw.push(currentNote);\n }\n });\n notesToDraw.sort((a, b) => a - b);\n drawChord(normalizeNotesToKeyboard(notesToDraw), rootValue);\n } else {\n messageArea.textContent = `Showing ${originalInput}. Want to see other inversions?`;\n const inversions = getInversions(rootPositionNotes);\n if (inversions && inversions.length > 0) {\n inversions.forEach((inversionNotes, index) => {\n const btn = document.createElement('button');\n btn.className = 'px-4 py-2 m-1 border border-blue-500 text-blue-600 font-semibold rounded-lg hover:bg-blue-100 transition';\n btn.textContent = (index === 0) ? 'Root Position' : `${getOrdinal(index)} Inversion`;\n btn.onclick = () => {\n document.querySelectorAll('#inversionControls button').forEach(b => b.classList.remove('bg-blue-100', 'font-bold'));\n btn.classList.add('bg-blue-100', 'font-bold');\n drawChord(normalizeNotesToKeyboard(inversionNotes), rootValue);\n };\n inversionControls.appendChild(btn);\n });\n const rootBtn = inversionControls.querySelector('button');\n if (rootBtn) {\n rootBtn.classList.add('bg-blue-100', 'font-bold');\n }\n drawChord(normalizeNotesToKeyboard(inversions[0]), rootValue);\n }\n }\n }\n\n \/\/ --- INITIALIZATION AND EVENTS ---\n drawPiano();\n generateLegend();\n findChordBtn.addEventListener('click', findAndDrawChord);\n chordInput.addEventListener('keyup', (event) => {\n if (event.key === 'Enter') findAndDrawChord();\n });\n \n \/\/ Initial example\n chordInput.value = 'C';\n findAndDrawChord();\n });\n <\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Piano Chords Piano Chord Visualizer Chord Visualizer Enter a chord (e.g., C, gm7, CM7, F4(6), A\/c#) and see it on the piano. Draw Chord Color Legend<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1509","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Chord Finder - Making Music 4 Ever<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/makingmusic4ever.com\/index.php\/chord-finder\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Chord Finder - Making Music 4 Ever\" \/>\n<meta property=\"og:description\" content=\"Piano Chords Piano Chord Visualizer Chord Visualizer Enter a chord (e.g., C, gm7, CM7, F4(6), A\/c#) and see it on the piano. Draw Chord Color Legend\" \/>\n<meta property=\"og:url\" content=\"https:\/\/makingmusic4ever.com\/index.php\/chord-finder\/\" \/>\n<meta property=\"og:site_name\" content=\"Making Music 4 Ever\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-26T17:33:54+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/makingmusic4ever.com\\\/index.php\\\/chord-finder\\\/\",\"url\":\"https:\\\/\\\/makingmusic4ever.com\\\/index.php\\\/chord-finder\\\/\",\"name\":\"Chord Finder - Making Music 4 Ever\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/makingmusic4ever.com\\\/#website\"},\"datePublished\":\"2025-08-26T17:33:46+00:00\",\"dateModified\":\"2025-08-26T17:33:54+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/makingmusic4ever.com\\\/index.php\\\/chord-finder\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/makingmusic4ever.com\\\/index.php\\\/chord-finder\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/makingmusic4ever.com\\\/index.php\\\/chord-finder\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/makingmusic4ever.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Chord Finder\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/makingmusic4ever.com\\\/#website\",\"url\":\"https:\\\/\\\/makingmusic4ever.com\\\/\",\"name\":\"Making Music 4 Ever\",\"description\":\"Music for everyone\",\"publisher\":{\"@id\":\"https:\\\/\\\/makingmusic4ever.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/makingmusic4ever.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/makingmusic4ever.com\\\/#organization\",\"name\":\"Making Music 4 Ever\",\"url\":\"https:\\\/\\\/makingmusic4ever.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/makingmusic4ever.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/makingmusic4ever.com\\\/wp-content\\\/uploads\\\/2019\\\/04\\\/cropped-MakinMusicLogo.aiRed_-2.jpg?fit=248%2C248&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/makingmusic4ever.com\\\/wp-content\\\/uploads\\\/2019\\\/04\\\/cropped-MakinMusicLogo.aiRed_-2.jpg?fit=248%2C248&ssl=1\",\"width\":248,\"height\":248,\"caption\":\"Making Music 4 Ever\"},\"image\":{\"@id\":\"https:\\\/\\\/makingmusic4ever.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Chord Finder - Making Music 4 Ever","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/makingmusic4ever.com\/index.php\/chord-finder\/","og_locale":"en_US","og_type":"article","og_title":"Chord Finder - Making Music 4 Ever","og_description":"Piano Chords Piano Chord Visualizer Chord Visualizer Enter a chord (e.g., C, gm7, CM7, F4(6), A\/c#) and see it on the piano. Draw Chord Color Legend","og_url":"https:\/\/makingmusic4ever.com\/index.php\/chord-finder\/","og_site_name":"Making Music 4 Ever","article_modified_time":"2025-08-26T17:33:54+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/makingmusic4ever.com\/index.php\/chord-finder\/","url":"https:\/\/makingmusic4ever.com\/index.php\/chord-finder\/","name":"Chord Finder - Making Music 4 Ever","isPartOf":{"@id":"https:\/\/makingmusic4ever.com\/#website"},"datePublished":"2025-08-26T17:33:46+00:00","dateModified":"2025-08-26T17:33:54+00:00","breadcrumb":{"@id":"https:\/\/makingmusic4ever.com\/index.php\/chord-finder\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/makingmusic4ever.com\/index.php\/chord-finder\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/makingmusic4ever.com\/index.php\/chord-finder\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/makingmusic4ever.com\/"},{"@type":"ListItem","position":2,"name":"Chord Finder"}]},{"@type":"WebSite","@id":"https:\/\/makingmusic4ever.com\/#website","url":"https:\/\/makingmusic4ever.com\/","name":"Making Music 4 Ever","description":"Music for everyone","publisher":{"@id":"https:\/\/makingmusic4ever.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/makingmusic4ever.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/makingmusic4ever.com\/#organization","name":"Making Music 4 Ever","url":"https:\/\/makingmusic4ever.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/makingmusic4ever.com\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/makingmusic4ever.com\/wp-content\/uploads\/2019\/04\/cropped-MakinMusicLogo.aiRed_-2.jpg?fit=248%2C248&ssl=1","contentUrl":"https:\/\/i0.wp.com\/makingmusic4ever.com\/wp-content\/uploads\/2019\/04\/cropped-MakinMusicLogo.aiRed_-2.jpg?fit=248%2C248&ssl=1","width":248,"height":248,"caption":"Making Music 4 Ever"},"image":{"@id":"https:\/\/makingmusic4ever.com\/#\/schema\/logo\/image\/"}}]}},"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/PamHgp-ol","jetpack-related-posts":[{"id":1387,"url":"https:\/\/makingmusic4ever.com\/index.php\/sheet-music\/","url_meta":{"origin":1509,"position":0},"title":"Sheet Music","author":"editor","date":"August 11, 2025","format":false,"excerpt":"Find sheet music with arrangements for various instruments. Search by composition and then check the available arrangements for several instruments, then click the respective instrument button. Search your Song Arrangement In-Page Search Search in this page: Press Enter to find next. All my Loving (Beatles) cLARINET & Guitar Violin &\u2026","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"studio with musica instruments and sheet music","src":"https:\/\/i0.wp.com\/makingmusic4ever.com\/wp-content\/uploads\/2026\/06\/Musical_instruments_on_table_202606090832.jpeg?fit=1200%2C670&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/makingmusic4ever.com\/wp-content\/uploads\/2026\/06\/Musical_instruments_on_table_202606090832.jpeg?fit=1200%2C670&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/makingmusic4ever.com\/wp-content\/uploads\/2026\/06\/Musical_instruments_on_table_202606090832.jpeg?fit=1200%2C670&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/makingmusic4ever.com\/wp-content\/uploads\/2026\/06\/Musical_instruments_on_table_202606090832.jpeg?fit=1200%2C670&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/makingmusic4ever.com\/wp-content\/uploads\/2026\/06\/Musical_instruments_on_table_202606090832.jpeg?fit=1200%2C670&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":221,"url":"https:\/\/makingmusic4ever.com\/index.php\/home\/how-to-build-chords\/","url_meta":{"origin":1509,"position":1},"title":"How to Build Chords","author":"editor","date":"June 12, 2019","format":false,"excerpt":"Learn how to build major, minor, dominant seventh and major seventh chords In this course, you will learn how to build triads chords (major and minor) and also four notes chords adding the dominant seventh and the major seventh notes to them. Some knowledge of music is desirable, but not\u2026","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"How to build chords course","src":"https:\/\/i0.wp.com\/makingmusic4ever.com\/wp-content\/uploads\/2019\/05\/HowToBuildChordImage.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/makingmusic4ever.com\/wp-content\/uploads\/2019\/05\/HowToBuildChordImage.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/makingmusic4ever.com\/wp-content\/uploads\/2019\/05\/HowToBuildChordImage.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/makingmusic4ever.com\/wp-content\/uploads\/2019\/05\/HowToBuildChordImage.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":167,"url":"https:\/\/makingmusic4ever.com\/index.php\/play-piano-like-a-pro\/","url_meta":{"origin":1509,"position":2},"title":"Play the Piano like a Pro","author":"editor","date":"May 3, 2019","format":false,"excerpt":"Now YOU can Learn how to play! The first thing you need to learn anything in your life is to change your mind! several people just give up to play a musical instrument because the professional musician spent their lives learning and practice. There is a feeling that you need\u2026","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"Hands moving over piano keys","src":"https:\/\/i0.wp.com\/makingmusic4ever.com\/wp-content\/uploads\/2019\/05\/handsMovePiano.jpg?fit=1200%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/makingmusic4ever.com\/wp-content\/uploads\/2019\/05\/handsMovePiano.jpg?fit=1200%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/makingmusic4ever.com\/wp-content\/uploads\/2019\/05\/handsMovePiano.jpg?fit=1200%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/makingmusic4ever.com\/wp-content\/uploads\/2019\/05\/handsMovePiano.jpg?fit=1200%2C800&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/makingmusic4ever.com\/wp-content\/uploads\/2019\/05\/handsMovePiano.jpg?fit=1200%2C800&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":1373,"url":"https:\/\/makingmusic4ever.com\/index.php\/metronome\/","url_meta":{"origin":1509,"position":3},"title":"Metronome","author":"editor","date":"August 8, 2025","format":false,"excerpt":"Interactive Metronome Metronome 120 BPM Tap Tempo Time Signature 4\/4 3\/4 2\/4 6\/8 5\/4 7\/8 Subdivision Quarter (\u2669) Eighth (\u266a) Sixteenth (\u266c) Triplet (\u2669\u00b3) Start","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1383,"url":"https:\/\/makingmusic4ever.com\/index.php\/guitar-tuner-2\/","url_meta":{"origin":1509,"position":4},"title":"Guitar Tuner","author":"editor","date":"August 8, 2025","format":false,"excerpt":"Guitar Tuner Guitar Tuner Click \"Start Tuner\" to begin -- Waiting... Detected Frequency 0.0 Hz Start Tuner Standard Tuning (EADGBe)","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/makingmusic4ever.com\/index.php\/wp-json\/wp\/v2\/pages\/1509","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/makingmusic4ever.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/makingmusic4ever.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/makingmusic4ever.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/makingmusic4ever.com\/index.php\/wp-json\/wp\/v2\/comments?post=1509"}],"version-history":[{"count":1,"href":"https:\/\/makingmusic4ever.com\/index.php\/wp-json\/wp\/v2\/pages\/1509\/revisions"}],"predecessor-version":[{"id":1510,"href":"https:\/\/makingmusic4ever.com\/index.php\/wp-json\/wp\/v2\/pages\/1509\/revisions\/1510"}],"wp:attachment":[{"href":"https:\/\/makingmusic4ever.com\/index.php\/wp-json\/wp\/v2\/media?parent=1509"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1509,"date":"2025-08-26T17:33:46","date_gmt":"2025-08-26T17:33:46","guid":{"rendered":"https:\/\/makingmusic4ever.com\/?page_id=1509"},"modified":"2025-08-26T17:33:54","modified_gmt":"2025-08-26T17:33:54","slug":"chord-finder","status":"publish","type":"page","link":"https:\/\/makingmusic4ever.com\/index.php\/chord-finder\/","title":{"rendered":"Chord Finder"},"content":{"rendered":"\n

Piano Chords<\/h2>\n\n\n\n\n\n\n \n \n Piano Chord Visualizer<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n \/* Custom styles to complement Tailwind \/\n body {\n font-family: 'Inter', sans-serif;\n }\n .piano-key {\n position: relative;\n border: 1px solid #6b7280;\n box-shadow: 2px 2px 5px rgba(0,0,0,0.2);\n cursor: pointer;\n transition: background-color 0.1s ease;\n }\n .white-key {\n background-color: #f8fafc;\n height: 220px;\n width: 100%;\n }\n .white-key:hover {\n background-color: #e2e8f0;\n }\n .black-key {\n background-color: #1f2937;\n height: 130px;\n width: 60%;\n position: absolute;\n left: 70%;\n top: 0;\n z-index: 10;\n }\n .black-key:hover {\n background-color: #374151;\n }\n .note-dot {\n position: absolute;\n bottom: 15px;\n left: 50%;\n transform: translateX(-50%);\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n color: white;\n font-size: 12px;\n border: 2px solid rgba(255, 255, 255, 0.7);\n box-shadow: 0 4px 6px rgba(0,0,0,0.2);\n z-index: 20;\n }\n .black-key .note-dot {\n bottom: 10px;\n width: 28px;\n height: 28px;\n font-size: 11px;\n }\n <\/style>\n<\/head>\n<body data-rsssl=1 class=\"bg-gray-100 flex items-center justify-center min-h-screen p-4\">\n\n <div class=\"w-full max-w-4xl bg-white rounded-xl shadow-lg p-6 md:p-8\">\n \n <header class=\"text-center mb-6\">\n <h1 class=\"text-3xl md:text-4xl font-bold text-gray-800\">Chord Visualizer<\/h1>\n <p class=\"text-gray-600 mt-2\">Enter a chord (e.g., C, gm7, CM7, F4(6), A\/c#) and see it on the piano.<\/p>\n <\/header>\n\n \n <div class=\"flex flex-col sm:flex-row gap-3 mb-6\">\n <input type=\"text\" id=\"chordInput\" placeholder=\"Enter chord here...\" class=\"flex-grow text-lg p-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition\">\n <button id=\"findChordBtn\" class=\"bg-blue-600 text-white font-bold text-lg px-8 py-3 rounded-lg hover:bg-blue-700 transition shadow-md\">Draw Chord<\/button>\n <\/div>\n\n \n <div id=\"messageArea\" class=\"text-center min-h-[24px] mb-4 text-gray-700 font-medium\"><\/div>\n\n \n <div id=\"pianoContainer\" class=\"w-full bg-gray-800 p-4 rounded-lg shadow-inner select-none\">\n <div id=\"piano\" class=\"relative flex\">\n \n <\/div>\n <\/div>\n\n \n <div id=\"inversionControls\" class=\"mt-6 text-center\">\n \n <\/div>\n\n \n <div id=\"colorLegend\" class=\"mt-6 pt-4 border-t border-gray-200\">\n <h3 class=\"text-lg font-semibold text-center text-gray-700 mb-3\">Color Legend<\/h3>\n <div class=\"flex flex-wrap justify-center gap-x-4 gap-y-2\">\n \n <\/div>\n <\/div>\n\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n \/\/ --- CONSTANTS AND CORE DATA ---\n const noteValues = {\n 'C': 0, 'B#': 0, 'C#': 1, 'Db': 1, 'D': 2, 'D#': 3, 'Eb': 3, 'E': 4, 'Fb': 4,\n 'F': 5, 'E#': 5, 'F#': 6, 'Gb': 6, 'G': 7, 'G#': 8, 'Ab': 8, 'A': 9,\n 'A#': 10, 'Bb': 10, 'B': 11, 'Cb': 11,\n };\n const valueToNote = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];\n \n const chordFormulas = {\n 'M': [0, 4, 7], 'maj': [0, 4, 7], '': [0, 4, 7],\n 'M7': [0, 4, 7, 11], 'maj7': [0, 4, 7, 11], '7M': [0, 4, 7, 11],\n '6': [0, 4, 7, 9], 'M6': [0, 4, 7, 9],\n 'm': [0, 3, 7], 'min': [0, 3, 7],\n 'm7': [0, 3, 7, 10], \n 'm(maj7)': [0, 3, 7, 11], 'm7M': [0, 3, 7, 11], 'mM7': [0, 3, 7, 11],\n 'm6': [0, 3, 7, 9],\n 'm7b5': [0, 3, 6, 10], '\u00f8': [0, 3, 6, 10],\n '7': [0, 4, 7, 10],\n 'dim': [0, 3, 6, 9], '\u00b0': [0, 3, 6, 9],\n 'dim7': [0, 3, 6, 9], '\u00b07': [0, 3, 6, 9],\n 'aug': [0, 4, 8], '+': [0, 4, 8],\n 'sus4': [0, 5, 7], 'sus': [0, 5, 7], '4': [0, 5, 7],\n 'sus2': [0, 2, 7],\n '5': [0, 7],\n };\n\n const alterationIntervals = {\n 'b5': { find: 7, replace: 6 }, '5b': { find: 7, replace: 6 },\n '#5': { find: 7, replace: 8 }, '5#': { find: 7, replace: 8 },\n '6': { add: 9 },\n 'b9': { add: 13 },\n '9': { add: 14 }, 'add9': { add: 14 },\n '#9': { add: 15 },\n '11': { add: 17 },\n '#11': { add: 18 },\n 'b13': { add: 20 },\n '13': { add: 21 },\n };\n\n const intervalColors = {\n 0: { color: 'bg-gray-900', name: 'Root (R)', label: 'R' }, 1: { color: 'bg-purple-700', name: 'Minor 2nd (b9)', label: 'b9' },\n 2: { color: 'bg-purple-500', name: 'Major 2nd (9)', label: '9' }, 3: { color: 'bg-orange-600', name: 'Minor 3rd (m3)', label: 'm3' },\n 4: { color: 'bg-red-600', name: 'Major 3rd (M3)', label: 'M3' }, 5: { color: 'bg-yellow-500', name: 'Perfect 4th (4\/11)', label: '4' },\n 6: { color: 'bg-teal-600', name: 'Diminished 5th (b5)', label: 'b5' }, 7: { color: 'bg-green-600', name: 'Perfect 5th (5)', label: '5' },\n 8: { color: 'bg-teal-400', name: 'Augmented 5th (#5)', label: '#5' }, 9: { color: 'bg-sky-500', name: 'Major 6th (6\/13)', label: '6' },\n 10: { color: 'bg-blue-700', name: 'Minor 7th (m7)', label: 'm7' }, 11: { color: 'bg-blue-500', name: 'Major 7th (M7)', label: 'M7' },\n };\n\n \/\/ --- DOM ELEMENTS ---\n const piano = document.getElementById('piano');\n const chordInput = document.getElementById('chordInput');\n const findChordBtn = document.getElementById('findChordBtn');\n const messageArea = document.getElementById('messageArea');\n const inversionControls = document.getElementById('inversionControls');\n const colorLegend = document.getElementById('colorLegend').querySelector('div');\n\n \/\/ --- LOGIC FUNCTIONS ---\n\n function parseChordInput(input) {\n input = input.trim();\n if (!input) return null;\n\n let standardizedInput = input.charAt(0).toUpperCase() + input.slice(1);\n const chordRegex = \/^([A-G](?:#|b)?)([^\/()])(?:\$(.?)\$)?(?:\\\/([A-Ga-g](?:#|b)?))?$\/;\n const match = standardizedInput.match(chordRegex);\n\n if (!match) return null;\n\n let [, rootNoteStr, qualityStr, alterationsStr, bassNoteStr] = match;\n qualityStr = qualityStr.trim(); \n\n const rootValue = noteValues[rootNoteStr];\n if (rootValue === undefined) return null;\n\n const sortedQualities = Object.keys(chordFormulas).sort((a, b) => b.length - a.length);\n let baseQuality = null;\n let formula = null;\n for (const q of sortedQualities) {\n if (qualityStr === q) {\n baseQuality = q;\n formula = [...chordFormulas[q]];\n break;\n }\n }\n if (!formula) return null;\n\n if (alterationsStr) {\n const alterations = alterationsStr.match(\/(\\#|b)?\\d+\/g) || [];\n if (['', 'M', 'maj', '6'].includes(baseQuality) && alterations.some(alt => ['b9', '#9', '11', '#11', '13', 'b13'].includes(alt))) {\n if (!formula.includes(10) && !formula.includes(11)) {\n formula.push(10);\n }\n }\n for (const alt of alterations) {\n if (alterationIntervals[alt]) {\n const mod = alterationIntervals[alt];\n if (mod.replace !== undefined) {\n const index = formula.indexOf(mod.find);\n if (index > -1) formula[index] = mod.replace;\n }\n if (mod.add !== undefined && !formula.includes(mod.add)) {\n formula.push(mod.add);\n }\n }\n }\n }\n \n formula.sort((a, b) => a - b);\n\n let bassValue = null;\n if (bassNoteStr) {\n const standardizedBass = bassNoteStr.charAt(0).toUpperCase() + bassNoteStr.slice(1);\n bassValue = noteValues[standardizedBass];\n if (bassValue === undefined) return null;\n }\n\n return { rootValue, formula, bassValue, input };\n }\n\n function getInversions(rootPositionNotes) {\n if (!rootPositionNotes || rootPositionNotes.length === 0) {\n return [];\n }\n const inversions = [];\n let currentNotes = [...rootPositionNotes];\n for (let i = 0; i < rootPositionNotes.length; i++) {\n inversions.push(currentNotes);\n const firstNote = currentNotes[0];\n currentNotes = [...currentNotes.slice(1), firstNote + 12];\n }\n return inversions;\n }\n\n function normalizeNotesToKeyboard(notes) {\n let normalized = [...notes];\n const pianoMin = 3 12; \/\/ C3\n const pianoMax = (5 * 12) + 11; \/\/ B5\n\n while (Math.max(...normalized) > pianoMax) {\n normalized = normalized.map(n => n - 12);\n }\n while (Math.min(...normalized) < pianoMin) {\n normalized = normalized.map(n => n + 12);\n }\n return normalized;\n }\n \n function getOrdinal(n) {\n const s = [\"th\", \"st\", \"nd\", \"rd\"];\n const v = n % 100;\n return n + (s[(v - 20) % 10] || s[v] || s[0]);\n }\n\n \/\/ --- RENDERING (DOM) FUNCTIONS ---\n\n function drawPiano() {\n piano.innerHTML = '';\n const noteNames = ['C', 'D', 'E', 'F', 'G', 'A', 'B'];\n const blackKeyMap = { 'C': 'C#', 'D': 'D#', 'F': 'F#', 'G': 'G#', 'A': 'A#' };\n for (let octave = 3; octave <= 5; octave++) {\n for (const note of noteNames) {\n const keyContainer = document.createElement('div');\n keyContainer.className = 'relative flex-1';\n const whiteKey = document.createElement('div');\n whiteKey.className = 'piano-key white-key';\n whiteKey.dataset.note = `${note}${octave}`;\n keyContainer.appendChild(whiteKey);\n if (blackKeyMap[note]) {\n const blackKey = document.createElement('div');\n blackKey.className = 'piano-key black-key';\n blackKey.dataset.note = `${blackKeyMap[note]}${octave}`;\n keyContainer.appendChild(blackKey);\n }\n piano.appendChild(keyContainer);\n }\n }\n }\n\n function clearPiano() {\n document.querySelectorAll('.note-dot').forEach(dot => dot.remove());\n }\n\n function drawChord(noteValues, rootValue) {\n clearPiano();\n noteValues.forEach(noteValue => {\n const octave = Math.floor(noteValue \/ 12);\n const noteName = valueToNote[noteValue % 12];\n const key = document.querySelector(`[data-note=\"${noteName}${octave}\"]`);\n if (key) {\n let interval = (noteValue - rootValue);\n while(interval < 0) interval += 12;\n interval = interval % 12;\n \n const colorInfo = intervalColors[interval] || { color: 'bg-pink-500', label: '?' };\n const dot = document.createElement('div');\n dot.className = `note-dot ${colorInfo.color}`;\n dot.textContent = colorInfo.label;\n dot.title = colorInfo.name;\n key.appendChild(dot);\n }\n });\n }\n\n function generateLegend() {\n colorLegend.innerHTML = '';\n for (const key in intervalColors) {\n const { color, name } = intervalColors[key];\n const legendItem = document.createElement('div');\n legendItem.className = 'flex items-center';\n legendItem.innerHTML = `<span class=\"w-4 h-4 rounded-full ${color} mr-2 border border-gray-400\"><\/span><span>${name}<\/span>`;\n colorLegend.appendChild(legendItem);\n }\n }\n\n \/\/ --- MAIN FUNCTION ---\n\n function findAndDrawChord() {\n const input = chordInput.value;\n const parsedChord = parseChordInput(input);\n\n messageArea.textContent = '';\n inversionControls.innerHTML = '';\n\n if (!parsedChord) {\n clearPiano();\n messageArea.textContent = `Could not understand \"${input}\". Try: \"Am7\", \"CM7\", \"Cm7M\" or \"C\/g\".`;\n return;\n }\n\n const { rootValue, formula, bassValue, input: originalInput } = parsedChord;\n const startOctave = 4;\n const rootNote = rootValue + (startOctave * 12);\n const rootPositionNotes = formula.map(interval => rootNote + interval);\n\n if (bassValue !== null) {\n messageArea.textContent = `Showing ${originalInput}`;\n let bassNote = bassValue + (startOctave * 12);\n while (Math.abs(bassNote - rootNote) > 8) {\n if (bassNote > rootNote) bassNote -= 12; else bassNote += 12;\n }\n let notesToDraw = [bassNote];\n rootPositionNotes.forEach(note => {\n if ((note % 12) !== (bassValue % 12)) {\n let currentNote = note;\n while (currentNote < notesToDraw[notesToDraw.length - 1]) {\n currentNote += 12;\n }\n notesToDraw.push(currentNote);\n }\n });\n notesToDraw.sort((a, b) => a - b);\n drawChord(normalizeNotesToKeyboard(notesToDraw), rootValue);\n } else {\n messageArea.textContent = `Showing ${originalInput}. Want to see other inversions?`;\n const inversions = getInversions(rootPositionNotes);\n if (inversions && inversions.length > 0) {\n inversions.forEach((inversionNotes, index) => {\n const btn = document.createElement('button');\n btn.className = 'px-4 py-2 m-1 border border-blue-500 text-blue-600 font-semibold rounded-lg hover:bg-blue-100 transition';\n btn.textContent = (index === 0) ? 'Root Position' : `${getOrdinal(index)} Inversion`;\n btn.onclick = () => {\n document.querySelectorAll('#inversionControls button').forEach(b => b.classList.remove('bg-blue-100', 'font-bold'));\n btn.classList.add('bg-blue-100', 'font-bold');\n drawChord(normalizeNotesToKeyboard(inversionNotes), rootValue);\n };\n inversionControls.appendChild(btn);\n });\n const rootBtn = inversionControls.querySelector('button');\n if (rootBtn) {\n rootBtn.classList.add('bg-blue-100', 'font-bold');\n }\n drawChord(normalizeNotesToKeyboard(inversions[0]), rootValue);\n }\n }\n }\n\n \/\/ --- INITIALIZATION AND EVENTS ---\n drawPiano();\n generateLegend();\n findChordBtn.addEventListener('click', findAndDrawChord);\n chordInput.addEventListener('keyup', (event) => {\n if (event.key === 'Enter') findAndDrawChord();\n });\n \n \/\/ Initial example\n chordInput.value = 'C';\n findAndDrawChord();\n });\n <\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Piano Chords Piano Chord Visualizer Chord Visualizer Enter a chord (e.g., C, gm7, CM7, F4(6), A\/c#) and see it on the piano. Draw Chord Color Legend<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1509","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Chord Finder - Making Music 4 Ever<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/makingmusic4ever.com\/index.php\/chord-finder\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Chord Finder - Making Music 4 Ever\" \/>\n<meta property=\"og:description\" content=\"Piano Chords Piano Chord Visualizer Chord Visualizer Enter a chord (e.g., C, gm7, CM7, F4(6), A\/c#) and see it on the piano. Draw Chord Color Legend\" \/>\n<meta property=\"og:url\" content=\"https:\/\/makingmusic4ever.com\/index.php\/chord-finder\/\" \/>\n<meta property=\"og:site_name\" content=\"Making Music 4 Ever\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-26T17:33:54+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/makingmusic4ever.com\\\/index.php\\\/chord-finder\\\/\",\"url\":\"https:\\\/\\\/makingmusic4ever.com\\\/index.php\\\/chord-finder\\\/\",\"name\":\"Chord Finder - Making Music 4 Ever\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/makingmusic4ever.com\\\/#website\"},\"datePublished\":\"2025-08-26T17:33:46+00:00\",\"dateModified\":\"2025-08-26T17:33:54+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/makingmusic4ever.com\\\/index.php\\\/chord-finder\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/makingmusic4ever.com\\\/index.php\\\/chord-finder\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/makingmusic4ever.com\\\/index.php\\\/chord-finder\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/makingmusic4ever.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Chord Finder\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/makingmusic4ever.com\\\/#website\",\"url\":\"https:\\\/\\\/makingmusic4ever.com\\\/\",\"name\":\"Making Music 4 Ever\",\"description\":\"Music for everyone\",\"publisher\":{\"@id\":\"https:\\\/\\\/makingmusic4ever.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/makingmusic4ever.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/makingmusic4ever.com\\\/#organization\",\"name\":\"Making Music 4 Ever\",\"url\":\"https:\\\/\\\/makingmusic4ever.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/makingmusic4ever.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/makingmusic4ever.com\\\/wp-content\\\/uploads\\\/2019\\\/04\\\/cropped-MakinMusicLogo.aiRed_-2.jpg?fit=248%2C248&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/makingmusic4ever.com\\\/wp-content\\\/uploads\\\/2019\\\/04\\\/cropped-MakinMusicLogo.aiRed_-2.jpg?fit=248%2C248&ssl=1\",\"width\":248,\"height\":248,\"caption\":\"Making Music 4 Ever\"},\"image\":{\"@id\":\"https:\\\/\\\/makingmusic4ever.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Chord Finder - Making Music 4 Ever","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/makingmusic4ever.com\/index.php\/chord-finder\/","og_locale":"en_US","og_type":"article","og_title":"Chord Finder - Making Music 4 Ever","og_description":"Piano Chords Piano Chord Visualizer Chord Visualizer Enter a chord (e.g., C, gm7, CM7, F4(6), A\/c#) and see it on the piano. Draw Chord Color Legend","og_url":"https:\/\/makingmusic4ever.com\/index.php\/chord-finder\/","og_site_name":"Making Music 4 Ever","article_modified_time":"2025-08-26T17:33:54+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/makingmusic4ever.com\/index.php\/chord-finder\/","url":"https:\/\/makingmusic4ever.com\/index.php\/chord-finder\/","name":"Chord Finder - Making Music 4 Ever","isPartOf":{"@id":"https:\/\/makingmusic4ever.com\/#website"},"datePublished":"2025-08-26T17:33:46+00:00","dateModified":"2025-08-26T17:33:54+00:00","breadcrumb":{"@id":"https:\/\/makingmusic4ever.com\/index.php\/chord-finder\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/makingmusic4ever.com\/index.php\/chord-finder\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/makingmusic4ever.com\/index.php\/chord-finder\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/makingmusic4ever.com\/"},{"@type":"ListItem","position":2,"name":"Chord Finder"}]},{"@type":"WebSite","@id":"https:\/\/makingmusic4ever.com\/#website","url":"https:\/\/makingmusic4ever.com\/","name":"Making Music 4 Ever","description":"Music for everyone","publisher":{"@id":"https:\/\/makingmusic4ever.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/makingmusic4ever.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/makingmusic4ever.com\/#organization","name":"Making Music 4 Ever","url":"https:\/\/makingmusic4ever.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/makingmusic4ever.com\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/makingmusic4ever.com\/wp-content\/uploads\/2019\/04\/cropped-MakinMusicLogo.aiRed_-2.jpg?fit=248%2C248&ssl=1","contentUrl":"https:\/\/i0.wp.com\/makingmusic4ever.com\/wp-content\/uploads\/2019\/04\/cropped-MakinMusicLogo.aiRed_-2.jpg?fit=248%2C248&ssl=1","width":248,"height":248,"caption":"Making Music 4 Ever"},"image":{"@id":"https:\/\/makingmusic4ever.com\/#\/schema\/logo\/image\/"}}]}},"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/PamHgp-ol","jetpack-related-posts":[{"id":1387,"url":"https:\/\/makingmusic4ever.com\/index.php\/sheet-music\/","url_meta":{"origin":1509,"position":0},"title":"Sheet Music","author":"editor","date":"August 11, 2025","format":false,"excerpt":"Find sheet music with arrangements for various instruments. Search by composition and then check the available arrangements for several instruments, then click the respective instrument button. Search your Song Arrangement In-Page Search Search in this page: Press Enter to find next. All my Loving (Beatles) cLARINET & Guitar Violin &\u2026","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"studio with musica instruments and sheet music","src":"https:\/\/i0.wp.com\/makingmusic4ever.com\/wp-content\/uploads\/2026\/06\/Musical_instruments_on_table_202606090832.jpeg?fit=1200%2C670&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/makingmusic4ever.com\/wp-content\/uploads\/2026\/06\/Musical_instruments_on_table_202606090832.jpeg?fit=1200%2C670&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/makingmusic4ever.com\/wp-content\/uploads\/2026\/06\/Musical_instruments_on_table_202606090832.jpeg?fit=1200%2C670&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/makingmusic4ever.com\/wp-content\/uploads\/2026\/06\/Musical_instruments_on_table_202606090832.jpeg?fit=1200%2C670&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/makingmusic4ever.com\/wp-content\/uploads\/2026\/06\/Musical_instruments_on_table_202606090832.jpeg?fit=1200%2C670&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":221,"url":"https:\/\/makingmusic4ever.com\/index.php\/home\/how-to-build-chords\/","url_meta":{"origin":1509,"position":1},"title":"How to Build Chords","author":"editor","date":"June 12, 2019","format":false,"excerpt":"Learn how to build major, minor, dominant seventh and major seventh chords In this course, you will learn how to build triads chords (major and minor) and also four notes chords adding the dominant seventh and the major seventh notes to them. Some knowledge of music is desirable, but not\u2026","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"How to build chords course","src":"https:\/\/i0.wp.com\/makingmusic4ever.com\/wp-content\/uploads\/2019\/05\/HowToBuildChordImage.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/makingmusic4ever.com\/wp-content\/uploads\/2019\/05\/HowToBuildChordImage.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/makingmusic4ever.com\/wp-content\/uploads\/2019\/05\/HowToBuildChordImage.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/makingmusic4ever.com\/wp-content\/uploads\/2019\/05\/HowToBuildChordImage.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":167,"url":"https:\/\/makingmusic4ever.com\/index.php\/play-piano-like-a-pro\/","url_meta":{"origin":1509,"position":2},"title":"Play the Piano like a Pro","author":"editor","date":"May 3, 2019","format":false,"excerpt":"Now YOU can Learn how to play! The first thing you need to learn anything in your life is to change your mind! several people just give up to play a musical instrument because the professional musician spent their lives learning and practice. There is a feeling that you need\u2026","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"Hands moving over piano keys","src":"https:\/\/i0.wp.com\/makingmusic4ever.com\/wp-content\/uploads\/2019\/05\/handsMovePiano.jpg?fit=1200%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/makingmusic4ever.com\/wp-content\/uploads\/2019\/05\/handsMovePiano.jpg?fit=1200%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/makingmusic4ever.com\/wp-content\/uploads\/2019\/05\/handsMovePiano.jpg?fit=1200%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/makingmusic4ever.com\/wp-content\/uploads\/2019\/05\/handsMovePiano.jpg?fit=1200%2C800&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/makingmusic4ever.com\/wp-content\/uploads\/2019\/05\/handsMovePiano.jpg?fit=1200%2C800&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":1373,"url":"https:\/\/makingmusic4ever.com\/index.php\/metronome\/","url_meta":{"origin":1509,"position":3},"title":"Metronome","author":"editor","date":"August 8, 2025","format":false,"excerpt":"Interactive Metronome Metronome 120 BPM Tap Tempo Time Signature 4\/4 3\/4 2\/4 6\/8 5\/4 7\/8 Subdivision Quarter (\u2669) Eighth (\u266a) Sixteenth (\u266c) Triplet (\u2669\u00b3) Start","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1383,"url":"https:\/\/makingmusic4ever.com\/index.php\/guitar-tuner-2\/","url_meta":{"origin":1509,"position":4},"title":"Guitar Tuner","author":"editor","date":"August 8, 2025","format":false,"excerpt":"Guitar Tuner Guitar Tuner Click \"Start Tuner\" to begin -- Waiting... Detected Frequency 0.0 Hz Start Tuner Standard Tuning (EADGBe)","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/makingmusic4ever.com\/index.php\/wp-json\/wp\/v2\/pages\/1509","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/makingmusic4ever.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/makingmusic4ever.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/makingmusic4ever.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/makingmusic4ever.com\/index.php\/wp-json\/wp\/v2\/comments?post=1509"}],"version-history":[{"count":1,"href":"https:\/\/makingmusic4ever.com\/index.php\/wp-json\/wp\/v2\/pages\/1509\/revisions"}],"predecessor-version":[{"id":1510,"href":"https:\/\/makingmusic4ever.com\/index.php\/wp-json\/wp\/v2\/pages\/1509\/revisions\/1510"}],"wp:attachment":[{"href":"https:\/\/makingmusic4ever.com\/index.php\/wp-json\/wp\/v2\/media?parent=1509"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}