Guitar Tab Chord Finder

{"name":"Guitar Tab Chord Finder","description":"Discover the chords within your favorite songs with our Guitar Tab Chord Finder! This app helps budding guitarists by analyzing the song's tabs and identifying the chords used. With a simple interface and easy-to-follow instructions, you'll be strumming along to your favorite tunes in no time. Whether you're learning a new song or writing your own, this tool is perfect for enhancing your guitar skills.","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/ywjuuxfygftf6cbkzz3j","view_count":10,"fork_count":2,"expires_at":null,"created_at":"2025-04-29T18:37:40.687857Z","updated_at":"2025-04-29T18:37:40.687858Z","user_id":359,"status":"PUBLIC","parent_id":null,"id":6688,"user":{"username":"testuser4","id":359,"password_hash":"$2b$12$1bfbXAx/wNDtiX3B7pP00OoFloL6RnEtNDLYjtXDiFCYu.bwxiVSe","updated_at":"2025-03-02T04:54:01.926097Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":"uobdfu+8sr00o67mwooc@sharklasers.com","recess_id":null,"created_at":"2025-03-02T04:54:01.926092Z","reset_token":null,"stripe_customer_id":null,"seats":0},"code":{"script.js":"const songs = [\n { title: \"Wonderwall\", artist: \"Oasis\" },\n { title: \"Shape of You\", artist: \"Ed Sheeran\" },\n { title: \"Blinding Lights\", artist: \"The Weeknd\" },\n { title: \"Someone Like You\", artist: \"Adele\" },\n { title: \"Stairway to Heaven\", artist: \"Led Zeppelin\" },\n { title: \"Hotel California\", artist: \"Eagles\" },\n { title: \"Hey Jude\", artist: \"The Beatles\" },\n { title: \"Sweet Child O' Mine\", artist: \"Guns N' Roses\" },\n { title: \"Back to December\", artist: \"Taylor Swift\" },\n { title: \"Rolling in the Deep\", artist: \"Adele\" },\n { title: \"Someone You Loved\", artist: \"Lewis Capaldi\" },\n { title: \"Creep\", artist: \"Radiohead\" },\n { title: \"Let It Be\", artist: \"The Beatles\" },\n { title: \"Thinking Out Loud\", artist: \"Ed Sheeran\" },\n { title: \"I Will Always Love You\", artist: \"Whitney Houston\" }\n];\n\nconst fullSongChords = {\n \"Wonderwall\": [\"Em\", \"G\", \"D\", \"A7\", \"Em\", \"G\", \"D\", \"A7\"],\n \"Shape of You\": [\"C#m\", \"F#m\", \"A\", \"E\", \"C#m\", \"F#m\", \"A\", \"E\"],\n \"Blinding Lights\": [\"C\", \"G\", \"Am\", \"F\", \"C\", \"G\", \"Am\", \"F\"],\n \"Someone Like You\": [\"A\", \"E\", \"C#m\", \"D\", \"A\", \"E\", \"C#m\", \"D\"],\n \"Stairway to Heaven\": [\"Am\", \"C\", \"D\", \"F\", \"G\", \"Am\", \"C\", \"D\"],\n \"Hotel California\": [\"Bm\", \"F#\", \"A\", \"E\", \"G\", \"D\", \"Em\", \"Bm\"],\n \"Hey Jude\": [\"F\", \"C\", \"C7\", \"Bb\", \"F\", \"C\", \"C7\", \"Bb\"],\n \"Sweet Child O' Mine\": [\"D\", \"C\", \"G\", \"A\", \"D\", \"C\", \"G\", \"A\"],\n \"Back to December\": [\"C\", \"G\", \"Am\", \"F\", \"C\", \"G\", \"Am\", \"F\"],\n \"Rolling in the Deep\": [\"Am\", \"Em\", \"G\", \"F\", \"Am\", \"Em\", \"G\", \"F\"],\n \"Someone You Loved\": [\"C\", \"G\", \"Am\", \"F\", \"C\", \"G\", \"Am\", \"F\"],\n \"Creep\": [\"G\", \"B\", \"C\", \"Cm\", \"G\", \"B\", \"C\", \"Cm\"],\n \"Let It Be\": [\"C\", \"G\", \"Am\", \"F\", \"C\", \"G\", \"Am\", \"F\"],\n \"Thinking Out Loud\": [\"D\", \"G\", \"A\", \"Bm\", \"D\", \"G\", \"A\", \"Bm\"],\n \"I Will Always Love You\": [\"G\", \"D\", \"C\", \"Em\", \"G\", \"D\", \"C\", \"Em\"]\n};\n\nlet currentChords = [];\n\nlet currentChord = \"\";\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight + 200); // Increased canvas height for more space\n background(0); // Set background to black\n}\n\nfunction draw() {\n background(0); // Clear the background each frame to black\n\n // Only draw the guitar tab if a chord is selected\n if (currentChord) {\n drawGuitarTab(currentChord); // Draw the current chord if it's selected\n }\n}\n\nfunction filterSongs() {\n const input = document.getElementById('songInput').value.toLowerCase();\n const datalist = document.getElementById('songs');\n\n // Clear previous options\n datalist.innerHTML = '';\n\n // Filter and add matching songs to the datalist\n songs.forEach(song => {\n if (song.title.toLowerCase().includes(input)) {\n const option = document.createElement('option');\n option.value = song.title;\n option.textContent = `${song.title} - ${song.artist}`; // Display title and artist\n datalist.appendChild(option);\n }\n });\n}\n\ndocument.getElementById('songInput').addEventListener('input', filterSongs);\n\nfunction windowResized() {\n resizeCanvas(windowWidth, windowHeight + 200); // Adjust canvas size on window resize\n}\n\nfunction findChords() {\n const songTitle = document.getElementById('songInput').value;\n console.log(\"Searching for chords for:\", songTitle);\n\n // Clear the canvas for a new drawing\n background(0); // Set background to black\n\n // Check if the song title exists in the fullSongChords object\n if (fullSongChords[songTitle]) {\n currentChords = fullSongChords[songTitle]; // Get the chords for the selected song\n currentChord = currentChords[0]; // Display the first chord of the song\n } else {\n textSize(40);\n fill(255); // Set error message color to white\n text(\"Chords not found\", width / 2 - 100, height / 2);\n }\n\n // Clear the input field after search\n document.getElementById('songInput').value = \"\"; // Reset the input field\n}\n\nfunction mousePressed() {\n // Check if the back button is pressed\n if (mouseX > width - 150 && mouseX < width - 30 && mouseY > 50 && mouseY < 90) {\n currentChord = \"\"; // Clear current chord to go back\n return;\n }\n\n // Check if a chord is clicked and replace the current chord\n for (let i = 0; i < currentChords.length; i++) {\n const buttonX = 80 + i * 100; // Calculate X position for each button\n const buttonY = 30; // Fixed Y position for the buttons\n if (mouseX > buttonX - 10 && mouseX < buttonX + 90 && mouseY > buttonY && mouseY < buttonY + 50) {\n currentChord = currentChords[i]; // Set the current chord to the clicked one\n return;\n }\n }\n}\n\nfunction drawGuitarTab() {\n const stringY = [200, 230, 260, 290, 320, 350]; // Y positions for the 6 strings\n const stringNames = [\"e\", \"B\", \"G\", \"D\", \"A\", \"E\"]; // Flipped guitar string names\n const stringThickness = [1, 2, 3, 4, 5, 6]; // Thickness of the strings from high e to low E\n const fretCount = 13; // Total number of frets, including 0 to 12\n const fretX = Array.from({ length: fretCount }, (_, i) => 50 + i * ((width - 100) / (fretCount - 1))); // X positions for the frets\n\n // Draw the bubble rectangle around the guitar tab\n fill(255); // Set fill color to white\n noStroke();\n rect(30, 170, width - 60, 220, 20); // Draw a rounded rectangle\n\n // Draw the strings with varying thickness\n for (let i = 0; i < stringY.length; i++) {\n strokeWeight(stringThickness[i]); // Set the thickness of each string\n stroke(0);\n line(50, stringY[i], width - 50, stringY[i]); // Draw strings\n text(stringNames[i], 20, stringY[i] + 5); // Label strings\n }\n\n // Draw the frets\n strokeWeight(1); // Reset stroke weight for frets\n for (let i = 0; i < fretCount; i++) {\n line(fretX[i], stringY[0] - 20, fretX[i], stringY[stringY.length - 1] + 20); // Draw frets\n text(i, fretX[i] - 10, stringY[0] - 30); // Label frets starting from 0\n }\n\n // Draw the current chord if it is selected\n if (currentChord) {\n const chordPositions = {\n \"Em\": [{ string: 5, fret: 2 }, { string: 4, fret: 2 }],\n \"G\": [{ string: 6, fret: 3 }, { string: 5, fret: 2 }, { string: 1, fret: 3 }],\n \"D\": [{ string: 2, fret: 3 }, { string: 3, fret: 2 }, { string: 1, fret: 2 }],\n \"A7\": [{ string: 4, fret: 2 }, { string: 2, fret: 2 }],\n \"C#m\": [{ string: 5, fret: 4 }, { string: 4, fret: 2 }, { string: 3, fret: 2 }, { string: 2, fret: 2 }],\n \"F#m\": [{ string: 6, fret: 2 }, { string: 5, fret: 4 }],\n \"A\": [{ string: 5, fret: 2 }, { string: 4, fret: 2 }, { string: 3, fret: 2 }],\n \"E\": [{ string: 6, fret: 0 }, { string: 5, fret: 2 }, { string: 4, fret: 2 }],\n \"C\": [{ string: 5, fret: 3 }, { string: 4, fret: 2 }, { string: 2, fret: 1 }],\n \"Am\": [{ string: 5, fret: 0 }, { string: 4, fret: 2 }, { string: 3, fret: 2 }],\n \"Bm\": [{ string: 5, fret: 2 }, { string: 4, fret: 4 }, { string: 3, fret: 4 }],\n \"F\": [{ string: 6, fret: 1 }, { string: 5, fret: 3 }, { string: 4, fret: 3 }, { string: 3, fret: 2 }],\n \"B\": [{ string: 6, fret: 2 }, { string: 5, fret: 4 }, { string: 4, fret: 4 }],\n \"C7\": [{ string: 5, fret: 3 }, { string: 4, fret: 2 }, { string: 3, fret: 1 }, { string: 2, fret: 1 }],\n \"Bb\": [{ string: 6, fret: 1 }, { string: 5, fret: 3 }, { string: 4, fret: 3 }],\n \"Cm\": [{ string: 5, fret: 3 }, { string: 4, fret: 1 }, { string: 3, fret: 1 }],\n \"F#\": [{ string: 6, fret: 1 }, { string: 5, fret: 4 }, { string: 4, fret: 4 }, { string: 3, fret: 3 }, { string: 2, fret: 1 }, { string: 1, fret: 1 }]\n };\n\n if (chordPositions[currentChord]) {\n // Draw barre line for barre chords\n if ([\"B\", \"F\", \"Bm\", \"C#m\", \"F#m\"].includes(currentChord)) {\n const barreFret = chordPositions[currentChord][0].fret; // Get the fret number for barre\n strokeWeight(5); // Set a thicker line for the barre\n stroke(0); // Set color to black\n // Draw the barre line vertically behind the chord\n line(fretX[barreFret], stringY[0] - 20, fretX[barreFret], stringY[stringY.length - 1] + 20); // Draw vertical barre line\n }\n\n chordPositions[currentChord].forEach(position => {\n const fretIndex = position.fret; // Get the fret number\n const stringIndex = position.string - 1; // Convert string to 0-indexed\n\n // Move the dot between the current and previous fret\n const x = (fretX[fretIndex] + fretX[fretIndex - 1]) / 2;\n const y = stringY[stringIndex];\n\n fill(0); // Set fill color to black for dots\n ellipse(x, y, 10, 10); // Draw a dot for finger position\n });\n }\n }\n\n // Draw all chord names above the strings as buttons\n textSize(24);\n for (let i = 0; i < currentChords.length; i++) {\n const buttonX = 80 + i * 100; // X position for the button\n const buttonY = 30; // Y position for the button\n\n // Draw a bubble rectangle for each chord name\n fill(255); // Set fill color to white\n noStroke();\n rect(buttonX - 10, buttonY, 100, 50, 10); // Draw a rounded rectangle around the chord name\n\n fill(0); // Set text color to black\n text(currentChords[i], buttonX, buttonY + 30); // Display chords above strings\n\n // Check for mouse press within the button bounds\n if (mouseIsPressed && mouseX > buttonX - 10 && mouseX < buttonX + 90 && mouseY > buttonY && mouseY < buttonY + 50) {\n currentChord = currentChords[i]; // Set the current chord to the clicked one\n }\n }\n\n // Button to go back to full song\n fill(255); // Set button color to white\n rect(width - 150, 50, 120, 40); // Draw button rectangle\n fill(0); // Set text color to black\n textSize(16);\n text(\"Back to Song\", width - 140, 75); // Draw button text\n}\n\n","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n\n\n \n \n Guitar Tab Chord Finder\n \n \n\n\n\n \n \n \n\n \n \n\n \n\n\n"},"chat_history":[{"project_id":6688,"message":"can you add a dropdown search box for just the chords next to the search bar for the songs","created_at":"2025-04-03T18:30:59.380536Z","output_tokens":null,"deleted":0,"code_id":228790,"sender":"human","input_tokens":null,"id":129795},{"project_id":6688,"message":"

\n# Reasoning\nAdding a dropdown search box for chords next to the search bar for songs is a feasible task. It involves creating a new input element with a datalist similar to the one used for songs. This will allow users to search and select chords easily.\n

\n\n

\n# Answer: \n

\n\nSure, we can add a dropdown search box for chords next to the song search bar. Do you want the chords to be searched and displayed for all songs, or would you like to focus on specific chords only?","created_at":"2025-04-03T18:30:59.524421Z","output_tokens":134,"deleted":0,"code_id":228790,"sender":"ai","input_tokens":5656,"id":129796},{"project_id":6688,"message":"display all of the chords that are in the chord positions variable","created_at":"2025-04-03T18:32:17.194050Z","output_tokens":null,"deleted":0,"code_id":228790,"sender":"human","input_tokens":null,"id":129805},{"project_id":6688,"message":"

\n# Reasoning\nTo display all the chords available in the `chordPositions` variable, we can create a dropdown list similar to the song search feature. This will allow users to see and select the available chords easily. \n

\n\n

\n# Answer: \n

\n\nWe can definitely display all the chords from the `chordPositions` variable in a dropdown list. Would you like this dropdown to filter chords as you type, or display all chords at once in a list?","created_at":"2025-04-03T18:32:17.325411Z","output_tokens":124,"deleted":0,"code_id":228790,"sender":"ai","input_tokens":5649,"id":129806},{"project_id":6688,"message":"just have it as a dropdown box. so as a list","created_at":"2025-04-03T18:32:41.506931Z","output_tokens":null,"deleted":0,"code_id":228790,"sender":"human","input_tokens":null,"id":129810},{"project_id":6688,"message":"Let's add a dropdown list to display all the chords from the `chordPositions` variable. We'll modify the HTML to include a new dropdown list and update the JavaScript to populate it with the chord names.\n\nHere's how you can do it:\n\n```html\n\n\n\n\n\n \n \n Guitar Tab Chord Finder\n \n \n\n\n\n \n \n \n \n \n \n\n \n\n\n\n```\n\n```javascript\n// script.js\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n const chordDropdown = document.getElementById('chordDropdown');\n const chordPositions = {\n \"Em\": [{ string: 5, fret: 2 }, { string: 4, fret: 2 }],\n \"G\": [{ string: 6, fret: 3 }, { string: 5, fret: 2 }, { string: 1, fret: 3 }],\n \"D\": [{ string: 2, fret: 3 }, { string: 3, fret: 2 }, { string: 1, fret: 2 }],\n \"A7\": [{ string: 4, fret: 2 }, { string: 2, fret: 2 }],\n \"C#m\": [{ string: 5, fret: 4 }, { string: 4, fret: 2 }, { string: 3, fret: 2 }, { string: 2, fret: 2 }],\n \"F#m\": [{ string: 6, fret: 2 }, { string: 5, fret: 4 }],\n \"A\": [{ string: 5, fret: 2 }, { string: 4, fret: 2 }, { string: 3, fret: 2 }],\n \"E\": [{ string: 6, fret: 0 }, { string: 5, fret: 2 }, { string: 4, fret: 2 }],\n \"C\": [{ string: 5, fret: 3 }, { string: 4, fret: 2 }, { string: 2, fret: 1 }],\n \"Am\": [{ string: 5, fret: 0 }, { string: 4, fret: 2 }, { string: 3, fret: 2 }],\n \"Bm\": [{ string: 5, fret: 2 }, { string: 4, fret: 4 }, { string: 3, fret: 4 }],\n \"F\": [{ string: 6, fret: 1 }, { string: 5, fret: 3 }, { string: 4, fret: 3 }, { string: 3, fret: 2 }],\n \"B\": [{ string: 6, fret: 2 }, { string: 5, fret: 4 }, { string: 4, fret: 4 }],\n \"C7\": [{ string: 5, fret: 3 }, { string: 4, fret: 2 }, { string: 3, fret: 1 }, { string: 2, fret: 1 }],\n \"Bb\": [{ string: 6, fret: 1 }, { string: 5, fret: 3 }, { string: 4, fret: 3 }],\n \"Cm\": [{ string: 5, fret: 3 }, { string: 4, fret: 1 }, { string: 3, fret: 1 }],\n \"F#\": [{ string: 6, fret: 1 }, { string: 5, fret: 4 }, { string: 4, fret: 4 }, { string: 3, fret: 3 }, { string: 2, fret: 1 }, { string: 1, fret: 1 }]\n };\n\n // Populate the dropdown with chord names\n for (let chord in chordPositions) {\n const option = document.createElement('option');\n option.value = chord;\n option.textContent = chord;\n chordDropdown.appendChild(option);\n }\n});\n```\n\n### How it works:\n- **HTML Update**: Added a `