Hugging Face's logo

Spaces:
DmitryYarov
/
sonificator
Running

App Files Community
DmitryYarov commited on
Commit
9998059
·
verified ·
1 Parent(s): 5bcca9f

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +674 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Sonificator
3
- emoji: 👁
4
- colorFrom: blue
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: sonificator
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: blue
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,674 @@
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>Shamanic Data Sonification</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.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
+ @import url('https://fonts.googleapis.com/css2?family=Almendra+Display&family=IM+Fell+DW+Pica&display=swap');
13
+
14
+ body {
15
+ background-color: #0a0a0a;
16
+ color: #e2d5b6;
17
+ font-family: 'IM Fell DW Pica', serif;
18
+ }
19
+
20
+ .title-font {
21
+ font-family: 'Almendra Display', cursive;
22
+ text-shadow: 0 0 10px #8a5a44;
23
+ }
24
+
25
+ .drum-circle {
26
+ background: radial-gradient(circle, #1a0f0b 0%, #0a0603 100%);
27
+ border: 2px solid #5a3921;
28
+ box-shadow: 0 0 20px #5a3921;
29
+ }
30
+
31
+ .pulse {
32
+ animation: pulse 2s infinite;
33
+ }
34
+
35
+ @keyframes pulse {
36
+ 0% { box-shadow: 0 0 5px #8a5a44; }
37
+ 50% { box-shadow: 0 0 20px #c77d3e; }
38
+ 100% { box-shadow: 0 0 5px #8a5a44; }
39
+ }
40
+
41
+ .data-node {
42
+ position: absolute;
43
+ width: 12px;
44
+ height: 12px;
45
+ background-color: #c77d3e;
46
+ border-radius: 50%;
47
+ transform: translate(-50%, -50%);
48
+ opacity: 0.7;
49
+ }
50
+
51
+ canvas {
52
+ background-color: rgba(26, 15, 11, 0.7);
53
+ border-radius: 8px;
54
+ }
55
+
56
+ .upload-area {
57
+ border: 2px dashed #5a3921;
58
+ transition: all 0.3s;
59
+ }
60
+
61
+ .upload-area:hover {
62
+ border-color: #c77d3e;
63
+ background-color: rgba(90, 57, 33, 0.2);
64
+ }
65
+
66
+ .control-btn {
67
+ transition: all 0.3s;
68
+ background-color: #1a0f0b;
69
+ border: 1px solid #5a3921;
70
+ }
71
+
72
+ .control-btn:hover {
73
+ background-color: #5a3921;
74
+ transform: scale(1.05);
75
+ }
76
+
77
+ .tooltip {
78
+ position: relative;
79
+ }
80
+
81
+ .tooltip-text {
82
+ visibility: hidden;
83
+ width: 200px;
84
+ background-color: #1a0f0b;
85
+ color: #e2d5b6;
86
+ text-align: center;
87
+ border-radius: 6px;
88
+ padding: 5px;
89
+ position: absolute;
90
+ z-index: 1;
91
+ bottom: 125%;
92
+ left: 50%;
93
+ transform: translateX(-50%);
94
+ opacity: 0;
95
+ transition: opacity 0.3s;
96
+ border: 1px solid #5a3921;
97
+ font-size: 0.9rem;
98
+ }
99
+
100
+ .tooltip:hover .tooltip-text {
101
+ visibility: visible;
102
+ opacity: 1;
103
+ }
104
+ </style>
105
+ </head>
106
+ <body class="min-h-screen flex flex-col">
107
+ <div class="container mx-auto px-4 py-8 flex-grow">
108
+ <!-- Header -->
109
+ <header class="text-center mb-12">
110
+ <h1 class="title-font text-5xl md:text-6xl mb-4">Shamanic Data Sonification</h1>
111
+ <p class="text-xl max-w-2xl mx-auto">Transform your spreadsheet data into sacred drum rhythms from the spirit world</p>
112
+ </header>
113
+
114
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
115
+ <!-- Left Column -->
116
+ <div class="space-y-8">
117
+ <!-- File Upload -->
118
+ <div class="upload-area rounded-lg p-8 text-center cursor-pointer" id="dropArea">
119
+ <div class="flex flex-col items-center justify-center">
120
+ <i class="fas fa-file-excel text-5xl mb-4 text-amber-700"></i>
121
+ <h3 class="text-2xl mb-2">Upload Your Data</h3>
122
+ <p class="mb-4">Drag & drop an Excel file or click to browse</p>
123
+ <input type="file" id="fileInput" accept=".xlsx, .xls, .csv" class="hidden" />
124
+ <button id="uploadBtn" class="px-6 py-2 rounded-full bg-amber-800 hover:bg-amber-700 transition">
125
+ Select File
126
+ </button>
127
+ </div>
128
+ </div>
129
+
130
+ <!-- Data Visualization -->
131
+ <div class="bg-black bg-opacity-30 rounded-lg p-6">
132
+ <h3 class="text-2xl mb-4 flex items-center">
133
+ <i class="fas fa-chart-line mr-2"></i> Data Visualization
134
+ </h3>
135
+ <div class="relative h-64 w-full" id="dataVizContainer">
136
+ <canvas id="dataCanvas"></canvas>
137
+ </div>
138
+ </div>
139
+
140
+ <!-- Parameters -->
141
+ <div class="bg-black bg-opacity-30 rounded-lg p-6">
142
+ <h3 class="text-2xl mb-4 flex items-center">
143
+ <i class="fas fa-sliders-h mr-2"></i> Sonification Parameters
144
+ </h3>
145
+ <div class="space-y-4">
146
+ <div>
147
+ <label class="block mb-2">Rhythm Intensity</label>
148
+ <input type="range" min="0" max="100" value="50" class="w-full accent-amber-700" id="intensitySlider">
149
+ </div>
150
+ <div>
151
+ <label class="block mb-2">Tempo (BPM)</label>
152
+ <input type="range" min="40" max="200" value="120" class="w-full accent-amber-700" id="tempoSlider">
153
+ </div>
154
+ <div>
155
+ <label class="block mb-2">Spiritual Resonance</label>
156
+ <input type="range" min="0" max="100" value="30" class="w-full accent-amber-700" id="resonanceSlider">
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </div>
161
+
162
+ <!-- Right Column -->
163
+ <div class="space-y-8">
164
+ <!-- Drum Visualization -->
165
+ <div class="drum-circle rounded-full mx-auto p-8 flex items-center justify-center relative" id="drumCircle">
166
+ <div class="w-64 h-64 rounded-full bg-gradient-to-br from-amber-900 to-black flex items-center justify-center pulse">
167
+ <div class="w-48 h-48 rounded-full bg-gradient-to-br from-black to-amber-900 flex items-center justify-center">
168
+ <div class="w-32 h-32 rounded-full bg-amber-900 flex items-center justify-center">
169
+ <div class="w-16 h-16 rounded-full bg-black"></div>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ <div id="dataNodes"></div>
174
+ </div>
175
+
176
+ <!-- Controls -->
177
+ <div class="bg-black bg-opacity-30 rounded-lg p-6">
178
+ <h3 class="text-2xl mb-4 flex items-center">
179
+ <i class="fas fa-compact-disc mr-2 animate-spin"></i> Rhythm Controls
180
+ </h3>
181
+ <div class="grid grid-cols-3 gap-4">
182
+ <button id="playBtn" class="control-btn py-3 rounded-lg flex flex-col items-center justify-center tooltip">
183
+ <i class="fas fa-play text-2xl mb-1"></i>
184
+ <span>Play</span>
185
+ <span class="tooltip-text">Begin the sacred rhythm journey</span>
186
+ </button>
187
+ <button id="stopBtn" class="control-btn py-3 rounded-lg flex flex-col items-center justify-center tooltip">
188
+ <i class="fas fa-stop text-2xl mb-1"></i>
189
+ <span>Stop</span>
190
+ <span class="tooltip-text">Silence the spirits</span>
191
+ </button>
192
+ <button id="exportBtn" class="control-btn py-3 rounded-lg flex flex-col items-center justify-center tooltip">
193
+ <i class="fas fa-download text-2xl mb-1"></i>
194
+ <span>Export</span>
195
+ <span class="tooltip-text">Save the rhythm as audio</span>
196
+ </button>
197
+ <button id="randomBtn" class="control-btn py-3 rounded-lg flex flex-col items-center justify-center tooltip">
198
+ <i class="fas fa-random text-2xl mb-1"></i>
199
+ <span>Randomize</span>
200
+ <span class="tooltip-text">Let the spirits choose</span>
201
+ </button>
202
+ <button id="loopBtn" class="control-btn py-3 rounded-lg flex flex-col items-center justify-center tooltip">
203
+ <i class="fas fa-redo text-2xl mb-1"></i>
204
+ <span>Loop</span>
205
+ <span class="tooltip-text">Create eternal rhythm</span>
206
+ </button>
207
+ <button id="helpBtn" class="control-btn py-3 rounded-lg flex flex-col items-center justify-center tooltip">
208
+ <i class="fas fa-question text-2xl mb-1"></i>
209
+ <span>Guide</span>
210
+ <span class="tooltip-text">Learn the ways of data sonification</span>
211
+ </button>
212
+ </div>
213
+ </div>
214
+
215
+ <!-- Rhythm Pattern -->
216
+ <div class="bg-black bg-opacity-30 rounded-lg p-6">
217
+ <h3 class="text-2xl mb-4 flex items-center">
218
+ <i class="fas fa-drum mr-2"></i> Rhythm Pattern
219
+ </h3>
220
+ <div class="overflow-x-auto">
221
+ <table class="w-full text-center" id="patternTable">
222
+ <thead>
223
+ <tr>
224
+ <th class="px-4 py-2">Beat</th>
225
+ <th class="px-4 py-2">Type</th>
226
+ <th class="px-4 py-2">Pitch</th>
227
+ <th class="px-4 py-2">Volume</th>
228
+ </tr>
229
+ </thead>
230
+ <tbody id="patternBody">
231
+ <!-- Will be populated by JavaScript -->
232
+ </tbody>
233
+ </table>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </div>
239
+
240
+ <!-- Footer -->
241
+ <footer class="bg-black bg-opacity-50 py-6 mt-12">
242
+ <div class="container mx-auto px-4 text-center">
243
+ <p class="mb-2">Shamanic Data Sonification - Connect with the spirit of your data</p>
244
+ <p class="text-sm opacity-70">Created with Tone.js and the wisdom of ancient rhythms</p>
245
+ </div>
246
+ </footer>
247
+
248
+ <script>
249
+ // Initialize Tone.js
250
+ document.addEventListener('DOMContentLoaded', function() {
251
+ // Audio context initialization
252
+ let isPlaying = false;
253
+ let currentData = null;
254
+ let tempo = 120;
255
+ let loop = false;
256
+ let sequence = null;
257
+
258
+ // Drum sounds
259
+ const drumSounds = {
260
+ bass: new Tone.MembraneSynth().toDestination(),
261
+ tom: new Tone.MembraneSynth({
262
+ pitchDecay: 0.05,
263
+ octaves: 2,
264
+ oscillator: {
265
+ type: "sine"
266
+ },
267
+ envelope: {
268
+ attack: 0.001,
269
+ decay: 0.5,
270
+ sustain: 0.01,
271
+ release: 0.5,
272
+ attackCurve: "exponential"
273
+ }
274
+ }).toDestination(),
275
+ snare: new Tone.NoiseSynth({
276
+ noise: {
277
+ type: "white"
278
+ },
279
+ envelope: {
280
+ attack: 0.001,
281
+ decay: 0.2,
282
+ sustain: 0.01,
283
+ release: 0.2
284
+ }
285
+ }).toDestination(),
286
+ shaker: new Tone.NoiseSynth({
287
+ noise: {
288
+ type: "pink"
289
+ },
290
+ envelope: {
291
+ attack: 0.001,
292
+ decay: 0.5,
293
+ sustain: 0.01,
294
+ release: 0.5
295
+ }
296
+ }).toDestination()
297
+ };
298
+
299
+ // Set up canvas
300
+ const canvas = document.getElementById('dataCanvas');
301
+ const ctx = canvas.getContext('2d');
302
+
303
+ function resizeCanvas() {
304
+ const container = document.getElementById('dataVizContainer');
305
+ canvas.width = container.clientWidth;
306
+ canvas.height = container.clientHeight;
307
+ }
308
+
309
+ window.addEventListener('resize', resizeCanvas);
310
+ resizeCanvas();
311
+
312
+ // File upload handling
313
+ const dropArea = document.getElementById('dropArea');
314
+ const fileInput = document.getElementById('fileInput');
315
+ const uploadBtn = document.getElementById('uploadBtn');
316
+
317
+ uploadBtn.addEventListener('click', () => fileInput.click());
318
+
319
+ fileInput.addEventListener('change', handleFiles);
320
+
321
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
322
+ dropArea.addEventListener(eventName, preventDefaults, false);
323
+ });
324
+
325
+ function preventDefaults(e) {
326
+ e.preventDefault();
327
+ e.stopPropagation();
328
+ }
329
+
330
+ ['dragenter', 'dragover'].forEach(eventName => {
331
+ dropArea.addEventListener(eventName, highlight, false);
332
+ });
333
+
334
+ ['dragleave', 'drop'].forEach(eventName => {
335
+ dropArea.addEventListener(eventName, unhighlight, false);
336
+ });
337
+
338
+ function highlight() {
339
+ dropArea.classList.add('border-amber-600');
340
+ }
341
+
342
+ function unhighlight() {
343
+ dropArea.classList.remove('border-amber-600');
344
+ }
345
+
346
+ dropArea.addEventListener('drop', handleDrop, false);
347
+
348
+ function handleDrop(e) {
349
+ const dt = e.dataTransfer;
350
+ const files = dt.files;
351
+ handleFiles({ target: { files } });
352
+ }
353
+
354
+ function handleFiles(e) {
355
+ const files = e.target.files;
356
+ if (files.length === 0) return;
357
+
358
+ const file = files[0];
359
+ const reader = new FileReader();
360
+
361
+ reader.onload = function(e) {
362
+ const data = new Uint8Array(e.target.result);
363
+ processExcel(data);
364
+ };
365
+
366
+ reader.readAsArrayBuffer(file);
367
+ }
368
+
369
+ function processExcel(data) {
370
+ const workbook = XLSX.read(data, { type: 'array' });
371
+ const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
372
+ const jsonData = XLSX.utils.sheet_to_json(firstSheet, { header: 1 });
373
+
374
+ currentData = jsonData;
375
+ visualizeData(jsonData);
376
+ generatePattern(jsonData);
377
+ }
378
+
379
+ function visualizeData(data) {
380
+ // Clear previous visualization
381
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
382
+
383
+ // Draw some visualization based on data
384
+ if (data.length === 0) return;
385
+
386
+ const rowsToShow = Math.min(20, data.length);
387
+ const colWidth = canvas.width / data[0].length;
388
+ const rowHeight = canvas.height / rowsToShow;
389
+
390
+ // Draw grid
391
+ ctx.strokeStyle = '#5a3921';
392
+ ctx.lineWidth = 0.5;
393
+
394
+ // Vertical lines
395
+ for (let i = 0; i <= data[0].length; i++) {
396
+ ctx.beginPath();
397
+ ctx.moveTo(i * colWidth, 0);
398
+ ctx.lineTo(i * colWidth, canvas.height);
399
+ ctx.stroke();
400
+ }
401
+
402
+ // Horizontal lines
403
+ for (let i = 0; i <= rowsToShow; i++) {
404
+ ctx.beginPath();
405
+ ctx.moveTo(0, i * rowHeight);
406
+ ctx.lineTo(canvas.width, i * rowHeight);
407
+ ctx.stroke();
408
+ }
409
+
410
+ // Draw data points
411
+ for (let row = 0; row < rowsToShow; row++) {
412
+ for (let col = 0; col < data[row].length; col++) {
413
+ const value = data[row][col];
414
+ if (value === undefined || value === null) continue;
415
+
416
+ // Convert value to a number if possible
417
+ let numValue = typeof value === 'string' ? parseFloat(value) : Number(value);
418
+ if (isNaN(numValue)) {
419
+ // For non-numeric values, use a hash of the string
420
+ numValue = hashString(value) % 100;
421
+ }
422
+
423
+ const x = col * colWidth + colWidth / 2;
424
+ const y = row * rowHeight + rowHeight / 2;
425
+ const radius = Math.max(2, (numValue % 10) + 2);
426
+
427
+ // Color based on value
428
+ const hue = (numValue * 3.6) % 360;
429
+ ctx.fillStyle = `hsla(${hue}, 70%, 50%, 0.7)`;
430
+
431
+ ctx.beginPath();
432
+ ctx.arc(x, y, radius, 0, Math.PI * 2);
433
+ ctx.fill();
434
+ }
435
+ }
436
+
437
+ // Also create data nodes in the drum circle
438
+ const drumCircle = document.getElementById('dataNodes');
439
+ drumCircle.innerHTML = '';
440
+
441
+ for (let row = 0; row < rowsToShow; row++) {
442
+ for (let col = 0; col < data[row].length; col++) {
443
+ const value = data[row][col];
444
+ if (value === undefined || value === null) continue;
445
+
446
+ let numValue = typeof value === 'string' ? parseFloat(value) : Number(value);
447
+ if (isNaN(numValue)) {
448
+ numValue = hashString(value) % 100;
449
+ }
450
+
451
+ // Position nodes in a spiral pattern within the drum circle
452
+ const angle = (col / data[row].length) * Math.PI * 2;
453
+ const distance = 0.3 + (row / rowsToShow) * 0.5;
454
+
455
+ const x = 50 + Math.cos(angle) * distance * 50;
456
+ const y = 50 + Math.sin(angle) * distance * 50;
457
+
458
+ const node = document.createElement('div');
459
+ node.className = 'data-node';
460
+ node.style.left = `${x}%`;
461
+ node.style.top = `${y}%`;
462
+ node.style.width = `${Math.max(5, (numValue % 10) + 5)}px`;
463
+ node.style.height = `${Math.max(5, (numValue % 10) + 5)}px`;
464
+ node.style.backgroundColor = `hsla(${(numValue * 3.6) % 360}, 70%, 50%, 0.7)`;
465
+
466
+ drumCircle.appendChild(node);
467
+ }
468
+ }
469
+ }
470
+
471
+ function hashString(str) {
472
+ let hash = 0;
473
+ for (let i = 0; i < str.length; i++) {
474
+ const char = str.charCodeAt(i);
475
+ hash = ((hash << 5) - hash) + char;
476
+ hash = hash & hash; // Convert to 32bit integer
477
+ }
478
+ return Math.abs(hash);
479
+ }
480
+
481
+ function generatePattern(data) {
482
+ if (!data || data.length === 0) return;
483
+
484
+ // Clear previous pattern
485
+ const patternBody = document.getElementById('patternBody');
486
+ patternBody.innerHTML = '';
487
+
488
+ // Generate rhythm pattern based on data
489
+ const pattern = [];
490
+ const rowsToUse = Math.min(16, data.length);
491
+
492
+ for (let i = 0; i < rowsToUse; i++) {
493
+ const row = data[i];
494
+ if (!row || row.length === 0) continue;
495
+
496
+ // Determine drum type based on column
497
+ const drumTypes = ['bass', 'tom', 'snare', 'shaker'];
498
+ const drumType = drumTypes[i % drumTypes.length];
499
+
500
+ // Get a numeric value from the row
501
+ let value = 0;
502
+ for (let j = 0; j < row.length; j++) {
503
+ const cell = row[j];
504
+ if (typeof cell === 'number') {
505
+ value += cell;
506
+ } else if (typeof cell === 'string') {
507
+ const num = parseFloat(cell);
508
+ if (!isNaN(num)) {
509
+ value += num;
510
+ } else {
511
+ value += hashString(cell) % 100;
512
+ }
513
+ }
514
+ }
515
+
516
+ // Normalize value
517
+ value = Math.abs(value) % 100;
518
+
519
+ // Create pattern item
520
+ const patternItem = {
521
+ beat: i + 1,
522
+ type: drumType,
523
+ pitch: 30 + (value % 40),
524
+ volume: 0.3 + (value % 70) / 100
525
+ };
526
+
527
+ pattern.push(patternItem);
528
+
529
+ // Add to table
530
+ const rowElement = document.createElement('tr');
531
+ rowElement.className = i % 2 === 0 ? 'bg-amber-900 bg-opacity-20' : '';
532
+ rowElement.innerHTML = `
533
+ <td class="px-4 py-2">${patternItem.beat}</td>
534
+ <td class="px-4 py-2 capitalize">${patternItem.type}</td>
535
+ <td class="px-4 py-2">${patternItem.pitch.toFixed(1)}</td>
536
+ <td class="px-4 py-2">${Math.round(patternItem.volume * 100)}%</td>
537
+ `;
538
+ patternBody.appendChild(rowElement);
539
+ }
540
+
541
+ // Create Tone.js sequence
542
+ if (sequence) {
543
+ sequence.dispose();
544
+ }
545
+
546
+ sequence = new Tone.Sequence((time, item) => {
547
+ if (!item) return;
548
+
549
+ // Play the drum sound
550
+ if (item.type === 'bass' || item.type === 'tom') {
551
+ drumSounds[item.type].triggerAttackRelease(item.pitch, "8n", time, item.volume);
552
+ } else {
553
+ drumSounds[item.type].triggerAttackRelease("8n", time, item.volume);
554
+ }
555
+
556
+ // Visual feedback
557
+ animateDrumHit(item.type);
558
+
559
+ }, pattern, "8n");
560
+
561
+ // Set tempo
562
+ Tone.Transport.bpm.value = tempo;
563
+ }
564
+
565
+ function animateDrumHit(type) {
566
+ const drumCircle = document.getElementById('drumCircle');
567
+ let color;
568
+
569
+ switch(type) {
570
+ case 'bass': color = '#8a5a44'; break;
571
+ case 'tom': color = '#c77d3e'; break;
572
+ case 'snare': color = '#e2d5b6'; break;
573
+ case 'shaker': color = '#5a3921'; break;
574
+ default: color = '#8a5a44';
575
+ }
576
+
577
+ drumCircle.style.boxShadow = `0 0 30px ${color}`;
578
+
579
+ setTimeout(() => {
580
+ drumCircle.style.boxShadow = '0 0 20px #5a3921';
581
+ }, 200);
582
+ }
583
+
584
+ // Control buttons
585
+ document.getElementById('playBtn').addEventListener('click', () => {
586
+ if (!currentData) {
587
+ alert('Please upload an Excel file first');
588
+ return;
589
+ }
590
+
591
+ if (!isPlaying) {
592
+ Tone.start();
593
+ Tone.Transport.start();
594
+ sequence.start();
595
+ isPlaying = true;
596
+ document.getElementById('playBtn').querySelector('i').className = 'fas fa-pause text-2xl mb-1';
597
+ } else {
598
+ Tone.Transport.pause();
599
+ isPlaying = false;
600
+ document.getElementById('playBtn').querySelector('i').className = 'fas fa-play text-2xl mb-1';
601
+ }
602
+ });
603
+
604
+ document.getElementById('stopBtn').addEventListener('click', () => {
605
+ Tone.Transport.stop();
606
+ sequence.stop();
607
+ isPlaying = false;
608
+ document.getElementById('playBtn').querySelector('i').className = 'fas fa-play text-2xl mb-1';
609
+ });
610
+
611
+ document.getElementById('exportBtn').addEventListener('click', () => {
612
+ if (!currentData) {
613
+ alert('Please upload an Excel file and generate a rhythm first');
614
+ return;
615
+ }
616
+
617
+ alert('Audio export would be implemented here with Tone.js offline rendering');
618
+ // In a real implementation, you would use:
619
+ // Tone.Offline(() => {
620
+ // // Play your sequence
621
+ // }, duration).then(buffer => {
622
+ // // Save buffer as WAV file
623
+ // });
624
+ });
625
+
626
+ document.getElementById('randomBtn').addEventListener('click', () => {
627
+ if (!currentData) {
628
+ alert('Please upload an Excel file first');
629
+ return;
630
+ }
631
+
632
+ // Randomize some parameters
633
+ document.getElementById('intensitySlider').value = Math.floor(Math.random() * 100);
634
+ document.getElementById('tempoSlider').value = 40 + Math.floor(Math.random() * 160);
635
+ document.getElementById('resonanceSlider').value = Math.floor(Math.random() * 100);
636
+
637
+ // Regenerate pattern
638
+ generatePattern(currentData);
639
+ });
640
+
641
+ document.getElementById('loopBtn').addEventListener('click', function() {
642
+ loop = !loop;
643
+ sequence.loop = loop;
644
+ this.classList.toggle('bg-amber-800');
645
+ this.querySelector('i').classList.toggle('text-amber-500');
646
+ });
647
+
648
+ document.getElementById('helpBtn').addEventListener('click', () => {
649
+ alert('Shamanic Data Sonification Guide:\n\n1. Upload your Excel file\n2. Adjust parameters to taste\n3. Play the rhythm\n4. Connect with the spirit world\n\nColumns become drum types, rows become beats, and values affect pitch and volume.');
650
+ });
651
+
652
+ // Slider events
653
+ document.getElementById('tempoSlider').addEventListener('input', function() {
654
+ tempo = this.value;
655
+ Tone.Transport.bpm.value = tempo;
656
+ });
657
+
658
+ document.getElementById('intensitySlider').addEventListener('input', function() {
659
+ if (currentData) {
660
+ generatePattern(currentData);
661
+ }
662
+ });
663
+
664
+ document.getElementById('resonanceSlider').addEventListener('input', function() {
665
+ // This would affect reverb/delay in a more complete implementation
666
+ // For now just regenerate pattern
667
+ if (currentData) {
668
+ generatePattern(currentData);
669
+ }
670
+ });
671
+ });
672
+ </script>
673
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=DmitryYarov/sonificator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
674
+ </html>