Hugging Face's logo

Spaces:
NativeAngels
/
youtube-chord-analyser
Running

App Files Community
NativeAngels commited on
Commit
ddd03df
·
verified ·
1 Parent(s): e4ba25c

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +270 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Youtube Chord Analyser
3
- emoji: 🏆
4
- colorFrom: yellow
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: youtube-chord-analyser
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,270 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>YouTube Chord Analyzer</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/tonal@4.6.2/dist/tonal.min.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/@magenta/music@1.23.1/es6/core.js"></script>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <style>
12
+ .piano-key {
13
+ position: relative;
14
+ border: 1px solid #333;
15
+ display: flex;
16
+ align-items: flex-end;
17
+ justify-content: center;
18
+ cursor: pointer;
19
+ user-select: none;
20
+ }
21
+
22
+ .white-key {
23
+ width: 40px;
24
+ height: 160px;
25
+ background-color: white;
26
+ z-index: 1;
27
+ border-radius: 0 0 5px 5px;
28
+ box-shadow: 0 5px 5px rgba(0,0,0,0.2);
29
+ }
30
+
31
+ .black-key {
32
+ width: 24px;
33
+ height: 100px;
34
+ background-color: black;
35
+ margin-left: -12px;
36
+ margin-right: -12px;
37
+ z-index: 2;
38
+ border-radius: 0 0 3px 3px;
39
+ }
40
+
41
+ .active-key {
42
+ background-color: #3b82f6;
43
+ }
44
+
45
+ .active-black-key {
46
+ background-color: #1d4ed8;
47
+ }
48
+
49
+ .chord-progression {
50
+ background-color: rgba(59, 130, 246, 0.2);
51
+ border-left: 3px solid #3b82f6;
52
+ }
53
+
54
+ .visualizer-container {
55
+ position: relative;
56
+ height: 200px;
57
+ background-color: #1e293b;
58
+ border-radius: 8px;
59
+ overflow: hidden;
60
+ }
61
+
62
+ .audio-wave {
63
+ position: absolute;
64
+ bottom: 0;
65
+ left: 0;
66
+ width: 100%;
67
+ height: 100%;
68
+ display: flex;
69
+ align-items: flex-end;
70
+ }
71
+
72
+ .audio-bar {
73
+ flex-grow: 1;
74
+ background-color: rgba(59, 130, 246, 0.6);
75
+ margin-right: 2px;
76
+ transition: height 0.05s ease;
77
+ }
78
+
79
+ .audio-bar:last-child {
80
+ margin-right: 0;
81
+ }
82
+
83
+ @keyframes pulse {
84
+ 0% { transform: scale(1); }
85
+ 50% { transform: scale(1.05); }
86
+ 100% { transform: scale(1); }
87
+ }
88
+
89
+ .analyzing {
90
+ animation: pulse 1.5s infinite;
91
+ }
92
+ </style>
93
+ </head>
94
+ <body class="bg-gray-100 min-h-screen">
95
+ <div class="container mx-auto px-4 py-8">
96
+ <header class="mb-8 text-center">
97
+ <h1 class="text-4xl font-bold text-blue-600 mb-2">YouTube Chord Analyzer</h1>
98
+ <p class="text-gray-600 text-lg">Detect chords and keys from any YouTube video in real-time</p>
99
+ </header>
100
+
101
+ <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
102
+ <div class="flex flex-col md:flex-row gap-6">
103
+ <div class="flex-1">
104
+ <div class="mb-4">
105
+ <label for="youtube-url" class="block text-sm font-medium text-gray-700 mb-1">YouTube Video URL</label>
106
+ <div class="flex gap-2">
107
+ <input type="text" id="youtube-url" placeholder="https://www.youtube.com/watch?v=..."
108
+ class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
109
+ <button id="analyze-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium transition-colors">
110
+ <i class="fas fa-play mr-2"></i> Analyze
111
+ </button>
112
+ </div>
113
+ </div>
114
+
115
+ <div id="video-container" class="aspect-w-16 aspect-h-9 bg-gray-200 rounded-lg overflow-hidden mb-4">
116
+ <div class="flex items-center justify-center h-full text-gray-500">
117
+ <i class="fas fa-music text-4xl"></i>
118
+ </div>
119
+ </div>
120
+
121
+ <div class="flex items-center justify-between mb-4">
122
+ <div class="flex items-center gap-2">
123
+ <button id="play-btn" class="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-full disabled:opacity-50" disabled>
124
+ <i class="fas fa-play"></i>
125
+ </button>
126
+ <button id="pause-btn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 p-2 rounded-full disabled:opacity-50" disabled>
127
+ <i class="fas fa-pause"></i>
128
+ </button>
129
+ <span id="time-display" class="text-sm text-gray-600">00:00 / 00:00</span>
130
+ </div>
131
+ <div id="status-indicator" class="flex items-center gap-2">
132
+ <span class="text-sm font-medium text-gray-500">Ready</span>
133
+ <div class="w-3 h-3 rounded-full bg-gray-400"></div>
134
+ </div>
135
+ </div>
136
+
137
+ <div class="visualizer-container mb-4">
138
+ <div id="audio-wave" class="audio-wave"></div>
139
+ </div>
140
+ </div>
141
+
142
+ <div class="flex-1">
143
+ <div class="bg-gray-50 rounded-lg p-4 mb-4">
144
+ <h3 class="font-medium text-lg text-gray-800 mb-3">Current Analysis</h3>
145
+
146
+ <div class="grid grid-cols-2 gap-4 mb-4">
147
+ <div class="bg-white p-3 rounded-lg shadow-sm">
148
+ <p class="text-sm text-gray-500 mb-1">Detected Key</p>
149
+ <p id="current-key" class="text-2xl font-bold text-blue-600">-</p>
150
+ </div>
151
+ <div class="bg-white p-3 rounded-lg shadow-sm">
152
+ <p class="text-sm text-gray-500 mb-1">Current Chord</p>
153
+ <p id="current-chord" class="text-2xl font-bold text-blue-600">-</p>
154
+ </div>
155
+ </div>
156
+
157
+ <div class="mb-4">
158
+ <p class="text-sm text-gray-500 mb-2">Chord Notes</p>
159
+ <div id="piano" class="flex relative h-40 mb-2"></div>
160
+ </div>
161
+
162
+ <div>
163
+ <p class="text-sm text-gray-500 mb-2">Chord Progression</p>
164
+ <div id="chord-progression" class="flex gap-2 overflow-x-auto py-2">
165
+ <div class="text-center">
166
+ <div class="w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center mx-auto mb-1">
167
+ <span class="text-gray-600">?</span>
168
+ </div>
169
+ <span class="text-xs text-gray-500">0:00</span>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </div>
177
+
178
+ <div class="bg-white rounded-xl shadow-lg p-6">
179
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Chord Analysis Results</h2>
180
+
181
+ <div class="overflow-x-auto">
182
+ <table class="min-w-full divide-y divide-gray-200">
183
+ <thead class="bg-gray-50">
184
+ <tr>
185
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
186
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Bar</th>
187
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Measure</th>
188
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Chord</th>
189
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Notes</th>
190
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th>
191
+ </tr>
192
+ </thead>
193
+ <tbody id="results-table" class="bg-white divide-y divide-gray-200">
194
+ <tr>
195
+ <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>
196
+ </tr>
197
+ </tbody>
198
+ </table>
199
+ </div>
200
+ </div>
201
+ </div>
202
+
203
+ <script>
204
+ // Initialize variables
205
+ let player;
206
+ let audioContext;
207
+ let analyser;
208
+ let dataArray;
209
+ let animationId;
210
+ let currentChord = '';
211
+ let detectedKey = '';
212
+ let chordHistory = [];
213
+ let barCount = 1;
214
+ let measureCount = 1;
215
+ let lastChordChangeTime = 0;
216
+
217
+ // DOM elements
218
+ const youtubeUrlInput = document.getElementById('youtube-url');
219
+ const analyzeBtn = document.getElementById('analyze-btn');
220
+ const videoContainer = document.getElementById('video-container');
221
+ const playBtn = document.getElementById('play-btn');
222
+ const pauseBtn = document.getElementById('pause-btn');
223
+ const timeDisplay = document.getElementById('time-display');
224
+ const statusIndicator = document.getElementById('status-indicator');
225
+ const statusText = statusIndicator.querySelector('span');
226
+ const statusDot = statusIndicator.querySelector('div');
227
+ const audioWave = document.getElementById('audio-wave');
228
+ const currentKeyDisplay = document.getElementById('current-key');
229
+ const currentChordDisplay = document.getElementById('current-chord');
230
+ const piano = document.getElementById('piano');
231
+ const chordProgression = document.getElementById('chord-progression');
232
+ const resultsTable = document.getElementById('results-table');
233
+
234
+ // Initialize piano keyboard
235
+ function initPiano() {
236
+ piano.innerHTML = '';
237
+
238
+ const whiteKeys = ['C', 'D', 'E', 'F', 'G', 'A', 'B'];
239
+ const blackKeys = ['C#', 'D#', '', 'F#', 'G#', 'A#', ''];
240
+
241
+ whiteKeys.forEach((note, i) => {
242
+ const key = document.createElement('div');
243
+ key.className = 'piano-key white-key';
244
+ key.dataset.note = note;
245
+ key.innerHTML = `<span class="text-xs text-gray-500 mb-1">${note}</span>`;
246
+ piano.appendChild(key);
247
+
248
+ // Add black keys between appropriate white keys
249
+ if (i < 6 && blackKeys[i] !== '') {
250
+ const blackKey = document.createElement('div');
251
+ blackKey.className = 'piano-key black-key';
252
+ blackKey.dataset.note = blackKeys[i];
253
+ piano.appendChild(blackKey);
254
+ }
255
+ });
256
+ }
257
+
258
+ // Highlight piano keys for current chord
259
+ function highlightChord(chord) {
260
+ // Reset all keys
261
+ document.querySelectorAll('.piano-key').forEach(key => {
262
+ if (key.classList.contains('white-key')) {
263
+ key.classList.remove('active-key');
264
+ } else {
265
+ key.classList.remove('active-black-key');
266
+ }
267
+ });
268
+
269
+ if (!chord
270
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Create a web application that analysis any YouTube video in real-time detecting the song chord and key outputting the piano chord including the bar and measure in a table format