|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>YouTube Chord Analyzer</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/tonal@4.6.2/dist/tonal.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/@magenta/music@1.23.1/es6/core.js"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.piano-key { |
|
|
position: relative; |
|
|
border: 1px solid #333; |
|
|
display: flex; |
|
|
align-items: flex-end; |
|
|
justify-content: center; |
|
|
cursor: pointer; |
|
|
user-select: none; |
|
|
} |
|
|
|
|
|
.white-key { |
|
|
width: 40px; |
|
|
height: 160px; |
|
|
background-color: white; |
|
|
z-index: 1; |
|
|
border-radius: 0 0 5px 5px; |
|
|
box-shadow: 0 5px 5px rgba(0,0,0,0.2); |
|
|
} |
|
|
|
|
|
.black-key { |
|
|
width: 24px; |
|
|
height: 100px; |
|
|
background-color: black; |
|
|
margin-left: -12px; |
|
|
margin-right: -12px; |
|
|
z-index: 2; |
|
|
border-radius: 0 0 3px 3px; |
|
|
} |
|
|
|
|
|
.active-key { |
|
|
background-color: #3b82f6; |
|
|
} |
|
|
|
|
|
.active-black-key { |
|
|
background-color: #1d4ed8; |
|
|
} |
|
|
|
|
|
.chord-progression { |
|
|
background-color: rgba(59, 130, 246, 0.2); |
|
|
border-left: 3px solid #3b82f6; |
|
|
} |
|
|
|
|
|
.visualizer-container { |
|
|
position: relative; |
|
|
height: 200px; |
|
|
background-color: #1e293b; |
|
|
border-radius: 8px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.audio-wave { |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
display: flex; |
|
|
align-items: flex-end; |
|
|
} |
|
|
|
|
|
.audio-bar { |
|
|
flex-grow: 1; |
|
|
background-color: rgba(59, 130, 246, 0.6); |
|
|
margin-right: 2px; |
|
|
transition: height 0.05s ease; |
|
|
} |
|
|
|
|
|
.audio-bar:last-child { |
|
|
margin-right: 0; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
|
|
|
.analyzing { |
|
|
animation: pulse 1.5s infinite; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
<header class="mb-8 text-center"> |
|
|
<h1 class="text-4xl font-bold text-blue-600 mb-2">YouTube Chord Analyzer</h1> |
|
|
<p class="text-gray-600 text-lg">Detect chords and keys from any YouTube video in real-time</p> |
|
|
</header> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-6 mb-8"> |
|
|
<div class="flex flex-col md:flex-row gap-6"> |
|
|
<div class="flex-1"> |
|
|
<div class="mb-4"> |
|
|
<label for="youtube-url" class="block text-sm font-medium text-gray-700 mb-1">YouTube Video URL</label> |
|
|
<div class="flex gap-2"> |
|
|
<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-lg focus:ring-blue-500 focus:border-blue-500"> |
|
|
<button id="analyze-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium transition-colors"> |
|
|
<i class="fas fa-play mr-2"></i> Analyze |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="video-container" class="aspect-w-16 aspect-h-9 bg-gray-200 rounded-lg overflow-hidden mb-4"> |
|
|
<div class="flex items-center justify-center h-full text-gray-500"> |
|
|
<i class="fas fa-music text-4xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<div class="flex items-center gap-2"> |
|
|
<button id="play-btn" class="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-full disabled:opacity-50" disabled> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
<button id="pause-btn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 p-2 rounded-full disabled:opacity-50" disabled> |
|
|
<i class="fas fa-pause"></i> |
|
|
</button> |
|
|
<span id="time-display" class="text-sm text-gray-600">00:00 / 00:00</span> |
|
|
</div> |
|
|
<div id="status-indicator" class="flex items-center gap-2"> |
|
|
<span class="text-sm font-medium text-gray-500">Ready</span> |
|
|
<div class="w-3 h-3 rounded-full bg-gray-400"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="visualizer-container mb-4"> |
|
|
<div id="audio-wave" class="audio-wave"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex-1"> |
|
|
<div class="bg-gray-50 rounded-lg p-4 mb-4"> |
|
|
<h3 class="font-medium text-lg text-gray-800 mb-3">Current Analysis</h3> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-4 mb-4"> |
|
|
<div class="bg-white p-3 rounded-lg shadow-sm"> |
|
|
<p class="text-sm text-gray-500 mb-1">Detected Key</p> |
|
|
<p id="current-key" class="text-2xl font-bold text-blue-600">-</p> |
|
|
</div> |
|
|
<div class="bg-white p-3 rounded-lg shadow-sm"> |
|
|
<p class="text-sm text-gray-500 mb-1">Current Chord</p> |
|
|
<p id="current-chord" class="text-2xl font-bold text-blue-600">-</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<p class="text-sm text-gray-500 mb-2">Chord Notes</p> |
|
|
<div id="piano" class="flex relative h-40 mb-2"></div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<p class="text-sm text-gray-500 mb-2">Chord Progression</p> |
|
|
<div id="chord-progression" class="flex gap-2 overflow-x-auto py-2"> |
|
|
<div class="text-center"> |
|
|
<div class="w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center mx-auto mb-1"> |
|
|
<span class="text-gray-600">?</span> |
|
|
</div> |
|
|
<span class="text-xs text-gray-500">0:00</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-6"> |
|
|
<h2 class="text-xl font-bold text-gray-800 mb-4">Chord Analysis Results</h2> |
|
|
|
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Bar</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Measure</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Chord</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Notes</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody id="results-table" class="bg-white divide-y divide-gray-200"> |
|
|
<tr> |
|
|
<td colspan="6" class="px-6 py-4 text-center text-gray-500">No analysis data yet. Enter a YouTube URL and click "Analyze"</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
let player; |
|
|
let audioContext; |
|
|
let analyser; |
|
|
let dataArray; |
|
|
let animationId; |
|
|
let currentChord = ''; |
|
|
let detectedKey = ''; |
|
|
let chordHistory = []; |
|
|
let barCount = 1; |
|
|
let measureCount = 1; |
|
|
let lastChordChangeTime = 0; |
|
|
|
|
|
|
|
|
const youtubeUrlInput = document.getElementById('youtube-url'); |
|
|
const analyzeBtn = document.getElementById('analyze-btn'); |
|
|
const videoContainer = document.getElementById('video-container'); |
|
|
const playBtn = document.getElementById('play-btn'); |
|
|
const pauseBtn = document.getElementById('pause-btn'); |
|
|
const timeDisplay = document.getElementById('time-display'); |
|
|
const statusIndicator = document.getElementById('status-indicator'); |
|
|
const statusText = statusIndicator.querySelector('span'); |
|
|
const statusDot = statusIndicator.querySelector('div'); |
|
|
const audioWave = document.getElementById('audio-wave'); |
|
|
const currentKeyDisplay = document.getElementById('current-key'); |
|
|
const currentChordDisplay = document.getElementById('current-chord'); |
|
|
const piano = document.getElementById('piano'); |
|
|
const chordProgression = document.getElementById('chord-progression'); |
|
|
const resultsTable = document.getElementById('results-table'); |
|
|
|
|
|
|
|
|
function initPiano() { |
|
|
piano.innerHTML = ''; |
|
|
|
|
|
const whiteKeys = ['C', 'D', 'E', 'F', 'G', 'A', 'B']; |
|
|
const blackKeys = ['C#', 'D#', '', 'F#', 'G#', 'A#', '']; |
|
|
|
|
|
whiteKeys.forEach((note, i) => { |
|
|
const key = document.createElement('div'); |
|
|
key.className = 'piano-key white-key'; |
|
|
key.dataset.note = note; |
|
|
key.innerHTML = `<span class="text-xs text-gray-500 mb-1">${note}</span>`; |
|
|
piano.appendChild(key); |
|
|
|
|
|
|
|
|
if (i < 6 && blackKeys[i] !== '') { |
|
|
const blackKey = document.createElement('div'); |
|
|
blackKey.className = 'piano-key black-key'; |
|
|
blackKey.dataset.note = blackKeys[i]; |
|
|
piano.appendChild(blackKey); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function highlightChord(chord) { |
|
|
|
|
|
document.querySelectorAll('.piano-key').forEach(key => { |
|
|
if (key.classList.contains('white-key')) { |
|
|
key.classList.remove('active-key'); |
|
|
} else { |
|
|
key.classList.remove('active-black-key'); |
|
|
} |
|
|
}); |
|
|
|
|
|
if (!chord |
|
|
</html> |
