Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Chord Extractor - Piano Chord Recognition Tool</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| min-height: 100vh; | |
| } | |
| .piano-key { | |
| transition: all 0.2s ease; | |
| } | |
| .piano-key.active { | |
| transform: scale(0.98); | |
| box-shadow: 0 0 10px rgba(0,0,0,0.2); | |
| } | |
| .progress-bar { | |
| transition: width 0.3s ease; | |
| } | |
| .chord-chip { | |
| transition: all 0.3s ease; | |
| } | |
| .chord-chip:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); | |
| } | |
| .waveform { | |
| background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); | |
| height: 120px; | |
| border-radius: 8px; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .analyzing { | |
| animation: pulse 1.5s infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="text-gray-800"> | |
| <div class="container mx-auto px-4 py-8 max-w-6xl"> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-4xl font-bold text-indigo-800 mb-2">Chord Extractor</h1> | |
| <p class="text-lg text-gray-600">Extract piano chords from YouTube videos or MP3 files with real-time analysis</p> | |
| </header> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Input Section --> | |
| <div class="bg-white rounded-xl shadow-lg p-6 lg:col-span-2"> | |
| <h2 class="text-2xl font-semibold mb-4 text-indigo-700">Audio Source</h2> | |
| <div class="flex mb-6"> | |
| <button id="youtube-tab" class="tab-btn active px-4 py-2 rounded-l-lg bg-indigo-600 text-white font-medium">YouTube</button> | |
| <button id="mp3-tab" class="tab-btn px-4 py-2 rounded-r-lg bg-gray-200 text-gray-700 font-medium">MP3 File</button> | |
| </div> | |
| <!-- YouTube Input --> | |
| <div id="youtube-input" class="tab-content"> | |
| <div class="mb-4"> | |
| <label for="youtube-url" class="block text-sm font-medium text-gray-700 mb-1">YouTube URL</label> | |
| <div class="flex"> | |
| <input type="text" id="youtube-url" placeholder="https://www.youtube.com/watch?v=..." class="flex-1 px-4 py-2 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <button id="load-youtube" class="px-4 py-2 bg-indigo-600 text-white rounded-r-lg hover:bg-indigo-700 transition">Load</button> | |
| </div> | |
| </div> | |
| <div id="youtube-preview" class="hidden"> | |
| <div class="flex items-center mb-4"> | |
| <img id="yt-thumbnail" src="" alt="Video thumbnail" class="w-16 h-12 rounded mr-3"> | |
| <div> | |
| <h3 id="yt-title" class="font-medium"></h3> | |
| <p id="yt-channel" class="text-sm text-gray-600"></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- MP3 Input --> | |
| <div id="mp3-input" class="tab-content hidden"> | |
| <div class="mb-4"> | |
| <label for="mp3-file" class="block text-sm font-medium text-gray-700 mb-1">Upload MP3 File</label> | |
| <div class="flex items-center"> | |
| <input type="file" id="mp3-file" accept="audio/mp3" class="hidden"> | |
| <button id="mp3-upload-btn" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition mr-3">Choose File</button> | |
| <span id="mp3-filename" class="text-sm text-gray-600">No file selected</span> | |
| </div> | |
| </div> | |
| <div id="mp3-preview" class="hidden"> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-music text-2xl text-indigo-600 mr-3"></i> | |
| <div> | |
| <h3 id="mp3-title" class="font-medium"></h3> | |
| <p id="mp3-duration" class="text-sm text-gray-600"></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Audio Controls --> | |
| <div id="audio-controls" class="hidden"> | |
| <div class="waveform mb-4" id="waveform"></div> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center"> | |
| <button id="play-btn" class="w-10 h-10 rounded-full bg-indigo-600 text-white flex items-center justify-center hover:bg-indigo-700 transition mr-3"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <button id="pause-btn" class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300 transition mr-3"> | |
| <i class="fas fa-pause"></i> | |
| </button> | |
| <span id="current-time" class="text-sm">0:00</span> | |
| <span class="mx-2">/</span> | |
| <span id="total-time" class="text-sm">0:00</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-sm mr-2">Volume:</span> | |
| <input type="range" id="volume" min="0" max="1" step="0.01" value="0.7" class="w-24"> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <button id="analyze-btn" class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center"> | |
| <i class="fas fa-search mr-2"></i> Analyze Chords | |
| </button> | |
| <div id="analyzing-indicator" class="ml-4 hidden"> | |
| <div class="flex items-center text-indigo-600"> | |
| <div class="w-4 h-4 rounded-full bg-indigo-600 mr-2 analyzing"></div> | |
| <span>Analyzing...</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Results Section --> | |
| <div class="bg-white rounded-xl shadow-lg p-6"> | |
| <h2 class="text-2xl font-semibold mb-4 text-indigo-700">Chord Analysis</h2> | |
| <div id="no-results" class="text-center py-8"> | |
| <i class="fas fa-music text-4xl text-gray-300 mb-4"></i> | |
| <p class="text-gray-500">Load a song and click "Analyze Chords" to detect the chords</p> | |
| </div> | |
| <div id="results" class="hidden"> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-medium mb-2">Detected Key</h3> | |
| <div class="flex items-center"> | |
| <span id="detected-key" class="px-4 py-2 bg-indigo-100 text-indigo-800 rounded-lg font-bold text-lg mr-4">C Major</span> | |
| <span class="text-sm text-gray-600">Confidence: <span id="key-confidence" class="font-medium">85%</span></span> | |
| </div> | |
| </div> | |
| <div | |
| </html> |