Hugging Face's logo

Spaces:
Robertogdl
/
technobeat-machine
Running

App Files Community
Robertogdl commited on
Commit
e84c097
·
verified ·
1 Parent(s): 96b03cd

Crea una caja de ritmos para musica techno funcional

Browse files
Files changed (2) hide show
  1. README.md +7 -4
  2. index.html +454 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Technobeat Machine
3
- emoji: 📚
4
  colorFrom: blue
5
- colorTo: green
 
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: TechnoBeat Machine 🎛️
 
3
  colorFrom: blue
4
+ colorTo: yellow
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,455 @@
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>TechnoBeat Machine - Drum Machine for Techno Music</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.7.77/Tone.js"></script>
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Inter:wght@300;400;500;600;700&display=swap');
14
+
15
+ body {
16
+ font-family: 'Inter', sans-serif;
17
+ background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
18
+ color: #e2e8f0;
19
+ overflow-x: hidden;
20
+ }
21
+
22
+ .orb-font {
23
+ font-family: 'Orbitron', monospace;
24
+ }
25
+
26
+ .glow {
27
+ box-shadow: 0 0 10px rgba(66, 153, 225, 0.5), 0 0 20px rgba(66, 153, 225, 0.3);
28
+ }
29
+
30
+ .pulse {
31
+ animation: pulse 0.5s ease-in-out;
32
+ }
33
+
34
+ @keyframes pulse {
35
+ 0% { transform: scale(1); }
36
+ 50% { transform: scale(1.05); }
37
+ 100% { transform: scale(1); }
38
+ }
39
+
40
+ .knob {
41
+ background: conic-gradient(from 0deg, #4299e1 0%, #4299e1 var(--rotation, 0%), #2d3748 var(--rotation, 0%), #2d3748 100%);
42
+ border-radius: 50%;
43
+ width: 60px;
44
+ height: 60px;
45
+ position: relative;
46
+ cursor: pointer;
47
+ }
48
+
49
+ .knob::after {
50
+ content: '';
51
+ position: absolute;
52
+ top: 5px;
53
+ left: 50%;
54
+ transform: translateX(-50%);
55
+ width: 4px;
56
+ height: 20px;
57
+ background: #e2e8f0;
58
+ border-radius: 2px;
59
+ }
60
+
61
+ .sequencer-cell {
62
+ transition: all 0.1s ease;
63
+ border-radius: 4px;
64
+ }
65
+
66
+ .sequencer-cell.active {
67
+ background-color: #4299e1;
68
+ transform: scale(1.05);
69
+ box-shadow: 0 0 10px rgba(66, 153, 225, 0.7);
70
+ }
71
+
72
+ .sequencer-cell.playing {
73
+ background-color: #ed64a6;
74
+ transform: scale(1.1);
75
+ box-shadow: 0 0 15px rgba(237, 100, 166, 0.8);
76
+ }
77
+
78
+ .beat-visualizer {
79
+ height: 4px;
80
+ background: linear-gradient(90deg, #4299e1, #ed64a6, #48bb78, #f6ad55);
81
+ border-radius: 2px;
82
+ width: 100%;
83
+ transform-origin: left;
84
+ transition: transform 0.1s ease;
85
+ }
86
+
87
+ /* Custom scrollbar */
88
+ ::-webkit-scrollbar {
89
+ width: 8px;
90
+ }
91
+
92
+ ::-webkit-scrollbar-track {
93
+ background: #1a202c;
94
+ border-radius: 4px;
95
+ }
96
+
97
+ ::-webkit-scrollbar-thumb {
98
+ background: #4299e1;
99
+ border-radius: 4px;
100
+ }
101
+
102
+ /* Responsive adjustments */
103
+ @media (max-width: 768px) {
104
+ .drum-pad {
105
+ width: 70px;
106
+ height: 70px;
107
+ }
108
+
109
+ .knob {
110
+ width: 50px;
111
+ height: 50px;
112
+ }
113
+ }
114
+ </style>
115
+ </head>
116
+ <body class="min-h-screen flex flex-col">
117
+ <!-- Header -->
118
+ <header class="py-6 px-4 sm:px-6 lg:px-8 bg-black bg-opacity-30 backdrop-blur-lg border-b border-gray-800">
119
+ <div class="max-w-7xl mx-auto flex flex-col sm:flex-row justify-between items-center">
120
+ <div class="flex items-center mb-4 sm:mb-0">
121
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center mr-3">
122
+ <i data-feather="music" class="text-white"></i>
123
+ </div>
124
+ <h1 class="text-2xl sm:text-3xl font-bold orb-font">TechnoBeat <span class="text-blue-400">Machine</span></h1>
125
+ </div>
126
+ <div class="flex items-center space-x-4">
127
+ <div class="flex items-center bg-gray-900 rounded-full px-4 py-2">
128
+ <i data-feather="clock" class="text-blue-400 mr-2"></i>
129
+ <span class="orb-font" id="bpm-display">120 BPM</span>
130
+ </div>
131
+ <button id="play-pause" class="bg-blue-600 hover:bg-blue-700 text-white rounded-full w-12 h-12 flex items-center justify-center transition-all duration-200 glow">
132
+ <i data-feather="play" id="play-icon"></i>
133
+ </button>
134
+ </div>
135
+ </div>
136
+ </header>
137
+
138
+ <!-- Main Content -->
139
+ <main class="flex-grow py-8 px-4 sm:px-6 lg:px-8">
140
+ <div class="max-w-7xl mx-auto">
141
+ <!-- Beat Visualizer -->
142
+ <div class="mb-8">
143
+ <div class="beat-visualizer" id="beat-visualizer"></div>
144
+ </div>
145
+
146
+ <!-- Drum Pads -->
147
+ <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-8">
148
+ <div class="drum-pad bg-gray-800 rounded-xl p-4 flex flex-col items-center justify-center cursor-pointer transition-all duration-200 hover:bg-gray-700 glow" data-sound="kick">
149
+ <div class="w-16 h-16 rounded-full bg-gradient-to-br from-gray-700 to-gray-900 flex items-center justify-center mb-2">
150
+ <i data-feather="square" class="text-blue-400"></i>
151
+ </div>
152
+ <span class="orb-font text-sm">KICK</span>
153
+ </div>
154
+ <div class="drum-pad bg-gray-800 rounded-xl p-4 flex flex-col items-center justify-center cursor-pointer transition-all duration-200 hover:bg-gray-700 glow" data-sound="snare">
155
+ <div class="w-16 h-16 rounded-full bg-gradient-to-br from-gray-700 to-gray-900 flex items-center justify-center mb-2">
156
+ <i data-feather="circle" class="text-pink-500"></i>
157
+ </div>
158
+ <span class="orb-font text-sm">SNARE</span>
159
+ </div>
160
+ <div class="drum-pad bg-gray-800 rounded-xl p-4 flex flex-col items-center justify-center cursor-pointer transition-all duration-200 hover:bg-gray-700 glow" data-sound="hihat">
161
+ <div class="w-16 h-16 rounded-full bg-gradient-to-br from-gray-700 to-gray-900 flex items-center justify-center mb-2">
162
+ <i data-feather="star" class="text-green-400"></i>
163
+ </div>
164
+ <span class="orb-font text-sm">HIHAT</span>
165
+ </div>
166
+ <div class="drum-pad bg-gray-800 rounded-xl p-4 flex flex-col items-center justify-center cursor-pointer transition-all duration-200 hover:bg-gray-700 glow" data-sound="clap">
167
+ <div class="w-16 h-16 rounded-full bg-gradient-to-br from-gray-700 to-gray-900 flex items-center justify-center mb-2">
168
+ <i data-feather="zap" class="text-yellow-400"></i>
169
+ </div>
170
+ <span class="orb-font text-sm">CLAP</span>
171
+ </div>
172
+ </div>
173
+
174
+ <!-- Sequencer -->
175
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 mb-8 border border-gray-800">
176
+ <h2 class="text-xl font-bold mb-4 orb-font">SEQUENCER</h2>
177
+ <div class="overflow-x-auto">
178
+ <div class="min-w-max">
179
+ <!-- Step labels -->
180
+ <div class="flex mb-2">
181
+ <div class="w-24"></div>
182
+ <div class="flex">
183
+ <?php for ($i = 1; $i <= 16; $i++): ?>
184
+ <div class="w-10 text-center orb-font text-sm opacity-70"><?php echo $i; ?></div>
185
+ <?php endfor; ?>
186
+ </div>
187
+ </div>
188
+
189
+ <!-- Sequencer rows -->
190
+ <div class="sequencer-grid">
191
+ <?php
192
+ $sounds = ['kick', 'snare', 'hihat', 'clap'];
193
+ foreach ($sounds as $sound):
194
+ ?>
195
+ <div class="flex items-center mb-3">
196
+ <div class="w-24 orb-font text-sm uppercase"><?php echo $sound; ?></div>
197
+ <div class="flex">
198
+ <?php for ($i = 1; $i <= 16; $i++): ?>
199
+ <div class="sequencer-cell w-8 h-8 mx-1 bg-gray-800 cursor-pointer transition-all duration-200" data-sound="<?php echo $sound; ?>" data-step="<?php echo $i; ?>"></div>
200
+ <?php endfor; ?>
201
+ </div>
202
+ </div>
203
+ <?php endforeach; ?>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ </div>
208
+
209
+ <!-- Controls -->
210
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
211
+ <!-- BPM Control -->
212
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 border border-gray-800">
213
+ <h3 class="text-lg font-bold mb-4 orb-font">TEMPO</h3>
214
+ <div class="flex flex-col items-center">
215
+ <div class="knob mb-4" id="bpm-knob" style="--rotation: 180deg"></div>
216
+ <div class="flex items-center">
217
+ <button class="bg-gray-800 rounded-full w-8 h-8 flex items-center justify-center mr-2" id="bpm-down">
218
+ <i data-feather="minus" class="text-white"></i>
219
+ </button>
220
+ <span class="orb-font text-2xl" id="bpm-value">120</span>
221
+ <button class="bg-gray-800 rounded-full w-8 h-8 flex items-center justify-center ml-2" id="bpm-up">
222
+ <i data-feather="plus" class="text-white"></i>
223
+ </button>
224
+ </div>
225
+ </div>
226
+ </div>
227
+
228
+ <!-- Effects -->
229
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 border border-gray-800">
230
+ <h3 class="text-lg font-bold mb-4 orb-font">EFFECTS</h3>
231
+ <div class="grid grid-cols-2 gap-4">
232
+ <div class="flex flex-col items-center">
233
+ <span class="text-sm mb-2">FILTER</span>
234
+ <div class="knob" style="--rotation: 120deg"></div>
235
+ </div>
236
+ <div class="flex flex-col items-center">
237
+ <span class="text-sm mb-2">DELAY</span>
238
+ <div class="knob" style="--rotation: 60deg"></div>
239
+ </div>
240
+ <div class="flex flex-col items-center">
241
+ <span class="text-sm mb-2">REVERB</span>
242
+ <div class="knob" style="--rotation: 240deg"></div>
243
+ </div>
244
+ <div class="flex flex-col items-center">
245
+ <span class="text-sm mb-2">DISTORTION</span>
246
+ <div class="knob" style="--rotation: 300deg"></div>
247
+ </div>
248
+ </div>
249
+ </div>
250
+
251
+ <!-- Pattern Control -->
252
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 border border-gray-800">
253
+ <h3 class="text-lg font-bold mb-4 orb-font">PATTERNS</h3>
254
+ <div class="grid grid-cols-4 gap-2">
255
+ <?php for ($i = 1; $i <= 8; $i++): ?>
256
+ <button class="bg-gray-800 rounded-lg py-2 orb-font transition-all duration-200 hover:bg-gray-700 <?php echo $i === 1 ? 'bg-blue-600' : ''; ?>">P<?php echo $i; ?></button>
257
+ <?php endfor; ?>
258
+ </div>
259
+ <div class="mt-4 flex space-x-2">
260
+ <button class="flex-1 bg-gray-800 rounded-lg py-2 orb-font text-sm transition-all duration-200 hover:bg-gray-700">SAVE</button>
261
+ <button class="flex-1 bg-gray-800 rounded-lg py-2 orb-font text-sm transition-all duration-200 hover:bg-gray-700">CLEAR</button>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ </main>
267
+
268
+ <!-- Footer -->
269
+ <footer class="py-6 px-4 sm:px-6 lg:px-8 bg-black bg-opacity-30 backdrop-blur-lg border-t border-gray-800">
270
+ <div class="max-w-7xl mx-auto flex flex-col sm:flex-row justify-between items-center">
271
+ <div class="text-sm text-gray-400 mb-4 sm:mb-0">
272
+ &copy; 2023 TechnoBeat Machine. Create your own techno beats.
273
+ </div>
274
+ <div class="flex space-x-4">
275
+ <a href="#" class="text-gray-400 hover:text-blue-400 transition-colors duration-200">
276
+ <i data-feather="github"></i>
277
+ </a>
278
+ <a href="#" class="text-gray-400 hover:text-blue-400 transition-colors duration-200">
279
+ <i data-feather="twitter"></i>
280
+ </a>
281
+ <a href="#" class="text-gray-400 hover:text-blue-400 transition-colors duration-200">
282
+ <i data-feather="mail"></i>
283
+ </a>
284
+ </div>
285
+ </div>
286
+ </footer>
287
+
288
+ <script>
289
+ // Initialize Feather Icons
290
+ feather.replace();
291
+
292
+ // Drum Machine Logic
293
+ document.addEventListener('DOMContentLoaded', function() {
294
+ let isPlaying = false;
295
+ let bpm = 120;
296
+ let currentStep = 0;
297
+ let sequencerInterval;
298
+
299
+ // Initialize Tone.js
300
+ const kick = new Tone.MembraneSynth().toDestination();
301
+ const snare = new Tone.NoiseSynth({
302
+ noise: { type: "white" },
303
+ envelope: { attack: 0.005, decay: 0.1, sustain: 0 }
304
+ }).toDestination();
305
+
306
+ const hihat = new Tone.MetalSynth({
307
+ frequency: 200,
308
+ envelope: { attack: 0.001, decay: 0.1, sustain: 0 },
309
+ harmonicity: 5.1,
310
+ modulationIndex: 32,
311
+ resonance: 4000,
312
+ octaves: 1.5
313
+ }).toDestination();
314
+
315
+ const clap = new Tone.NoiseSynth({
316
+ noise: { type: "white" },
317
+ envelope: { attack: 0.005, decay: 0.1, sustain: 0 }
318
+ }).toDestination();
319
+
320
+ // Play/Pause button
321
+ const playPauseBtn = document.getElementById('play-pause');
322
+ const playIcon = document.getElementById('play-icon');
323
+
324
+ playPauseBtn.addEventListener('click', function() {
325
+ if (!isPlaying) {
326
+ startSequencer();
327
+ playIcon.setAttribute('data-feather', 'square');
328
+ feather.replace();
329
+ playPauseBtn.classList.add('bg-red-500', 'hover:bg-red-600');
330
+ playPauseBtn.classList.remove('bg-blue-600', 'hover:bg-blue-700');
331
+ } else {
332
+ stopSequencer();
333
+ playIcon.setAttribute('data-feather', 'play');
334
+ feather.replace();
335
+ playPauseBtn.classList.remove('bg-red-500', 'hover:bg-red-600');
336
+ playPauseBtn.classList.add('bg-blue-600', 'hover:bg-blue-700');
337
+ }
338
+ isPlaying = !isPlaying;
339
+ });
340
+
341
+ // Drum pad clicks
342
+ document.querySelectorAll('.drum-pad').forEach(pad => {
343
+ pad.addEventListener('click', function() {
344
+ const sound = this.getAttribute('data-sound');
345
+ playSound(sound);
346
+ this.classList.add('pulse');
347
+ setTimeout(() => {
348
+ this.classList.remove('pulse');
349
+ }, 200);
350
+ });
351
+ });
352
+
353
+ // Sequencer cell clicks
354
+ document.querySelectorAll('.sequencer-cell').forEach(cell => {
355
+ cell.addEventListener('click', function() {
356
+ this.classList.toggle('active');
357
+ });
358
+ });
359
+
360
+ // BPM controls
361
+ const bpmValue = document.getElementById('bpm-value');
362
+ const bpmDisplay = document.getElementById('bpm-display');
363
+ const bpmUp = document.getElementById('bpm-up');
364
+ const bpmDown = document.getElementById('bpm-down');
365
+ const bpmKnob = document.getElementById('bpm-knob');
366
+
367
+ bpmUp.addEventListener('click', function() {
368
+ if (bpm < 200) {
369
+ bpm += 5;
370
+ updateBPM();
371
+ }
372
+ });
373
+
374
+ bpmDown.addEventListener('click', function() {
375
+ if (bpm > 60) {
376
+ bpm -= 5;
377
+ updateBPM();
378
+ }
379
+ });
380
+
381
+ function updateBPM() {
382
+ bpmValue.textContent = bpm;
383
+ bpmDisplay.textContent = `${bpm} BPM`;
384
+ const rotation = ((bpm - 60) / 140) * 360;
385
+ bpmKnob.style.setProperty('--rotation', `${rotation}deg`);
386
+
387
+ if (isPlaying) {
388
+ stopSequencer();
389
+ startSequencer();
390
+ }
391
+ }
392
+
393
+ // Sequencer functions
394
+ function startSequencer() {
395
+ const stepDuration = 60 / bpm / 4; // 16th notes
396
+ currentStep = 0;
397
+
398
+ sequencerInterval = setInterval(() => {
399
+ // Reset previous step
400
+ document.querySelectorAll('.sequencer-cell.playing').forEach(cell => {
401
+ cell.classList.remove('playing');
402
+ });
403
+
404
+ // Highlight current step
405
+ document.querySelectorAll(`.sequencer-cell[data-step="${currentStep + 1}"]`).forEach(cell => {
406
+ cell.classList.add('playing');
407
+
408
+ // Play sound if active
409
+ if (cell.classList.contains('active')) {
410
+ const sound = cell.getAttribute('data-sound');
411
+ playSound(sound);
412
+ }
413
+ });
414
+
415
+ // Animate beat visualizer
416
+ const visualizer = document.getElementById('beat-visualizer');
417
+ visualizer.style.transform = `scaleX(${(currentStep + 1) / 16})`;
418
+
419
+ currentStep = (currentStep + 1) % 16;
420
+ }, stepDuration * 1000);
421
+ }
422
+
423
+ function stopSequencer() {
424
+ clearInterval(sequencerInterval);
425
+ document.querySelectorAll('.sequencer-cell.playing').forEach(cell => {
426
+ cell.classList.remove('playing');
427
+ });
428
+ document.getElementById('beat-visualizer').style.transform = 'scaleX(0)';
429
+ }
430
+
431
+ function playSound(sound) {
432
+ const now = Tone.now();
433
+
434
+ switch(sound) {
435
+ case 'kick':
436
+ kick.triggerAttackRelease("C1", "8n", now);
437
+ break;
438
+ case 'snare':
439
+ snare.triggerAttackRelease("8n", now);
440
+ break;
441
+ case 'hihat':
442
+ hihat.triggerAttackRelease("8n", now);
443
+ break;
444
+ case 'clap':
445
+ clap.triggerAttackRelease("8n", now);
446
+ break;
447
+ }
448
+ }
449
+
450
+ // Initialize BPM display
451
+ updateBPM();
452
+ });
453
+ </script>
454
+ </body>
455
  </html>