Spaces:

DmitryYarov
/

sonificator

Running

File size: 30,015 Bytes
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shamanic Data Sonification</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Almendra+Display&family=IM+Fell+DW+Pica&display=swap');
        
        body {
            background-color: #0a0a0a;
            color: #e2d5b6;
            font-family: 'IM Fell DW Pica', serif;
        }
        
        .title-font {
            font-family: 'Almendra Display', cursive;
            text-shadow: 0 0 10px #8a5a44;
        }
        
        .drum-circle {
            background: radial-gradient(circle, #1a0f0b 0%, #0a0603 100%);
            border: 2px solid #5a3921;
            box-shadow: 0 0 20px #5a3921;
        }
        
        .pulse {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 0 5px #8a5a44; }
            50% { box-shadow: 0 0 20px #c77d3e; }
            100% { box-shadow: 0 0 5px #8a5a44; }
        }
        
        .data-node {
            position: absolute;
            width: 12px;
            height: 12px;
            background-color: #c77d3e;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            opacity: 0.7;
        }
        
        canvas {
            background-color: rgba(26, 15, 11, 0.7);
            border-radius: 8px;
        }
        
        .upload-area {
            border: 2px dashed #5a3921;
            transition: all 0.3s;
        }
        
        .upload-area:hover {
            border-color: #c77d3e;
            background-color: rgba(90, 57, 33, 0.2);
        }
        
        .control-btn {
            transition: all 0.3s;
            background-color: #1a0f0b;
            border: 1px solid #5a3921;
        }
        
        .control-btn:hover {
            background-color: #5a3921;
            transform: scale(1.05);
        }
        
        .tooltip {
            position: relative;
        }
        
        .tooltip-text {
            visibility: hidden;
            width: 200px;
            background-color: #1a0f0b;
            color: #e2d5b6;
            text-align: center;
            border-radius: 6px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 0.3s;
            border: 1px solid #5a3921;
            font-size: 0.9rem;
        }
        
        .tooltip:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>
<body class="min-h-screen flex flex-col">
    <div class="container mx-auto px-4 py-8 flex-grow">
        <!-- Header -->
        <header class="text-center mb-12">
            <h1 class="title-font text-5xl md:text-6xl mb-4">Shamanic Data Sonification</h1>
            <p class="text-xl max-w-2xl mx-auto">Transform your spreadsheet data into sacred drum rhythms from the spirit world</p>
        </header>
        
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- Left Column -->
            <div class="space-y-8">
                <!-- File Upload -->
                <div class="upload-area rounded-lg p-8 text-center cursor-pointer" id="dropArea">
                    <div class="flex flex-col items-center justify-center">
                        <i class="fas fa-file-excel text-5xl mb-4 text-amber-700"></i>
                        <h3 class="text-2xl mb-2">Upload Your Data</h3>
                        <p class="mb-4">Drag & drop an Excel file or click to browse</p>
                        <input type="file" id="fileInput" accept=".xlsx, .xls, .csv" class="hidden" />
                        <button id="uploadBtn" class="px-6 py-2 rounded-full bg-amber-800 hover:bg-amber-700 transition">
                            Select File
                        </button>
                    </div>
                </div>
                
                <!-- Data Visualization -->
                <div class="bg-black bg-opacity-30 rounded-lg p-6">
                    <h3 class="text-2xl mb-4 flex items-center">
                        <i class="fas fa-chart-line mr-2"></i> Data Visualization
                    </h3>
                    <div class="relative h-64 w-full" id="dataVizContainer">
                        <canvas id="dataCanvas"></canvas>
                    </div>
                </div>
                
                <!-- Parameters -->
                <div class="bg-black bg-opacity-30 rounded-lg p-6">
                    <h3 class="text-2xl mb-4 flex items-center">
                        <i class="fas fa-sliders-h mr-2"></i> Sonification Parameters
                    </h3>
                    <div class="space-y-4">
                        <div>
                            <label class="block mb-2">Rhythm Intensity</label>
                            <input type="range" min="0" max="100" value="50" class="w-full accent-amber-700" id="intensitySlider">
                        </div>
                        <div>
                            <label class="block mb-2">Tempo (BPM)</label>
                            <input type="range" min="40" max="200" value="120" class="w-full accent-amber-700" id="tempoSlider">
                        </div>
                        <div>
                            <label class="block mb-2">Spiritual Resonance</label>
                            <input type="range" min="0" max="100" value="30" class="w-full accent-amber-700" id="resonanceSlider">
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Right Column -->
            <div class="space-y-8">
                <!-- Drum Visualization -->
                <div class="drum-circle rounded-full mx-auto p-8 flex items-center justify-center relative" id="drumCircle">
                    <div class="w-64 h-64 rounded-full bg-gradient-to-br from-amber-900 to-black flex items-center justify-center pulse">
                        <div class="w-48 h-48 rounded-full bg-gradient-to-br from-black to-amber-900 flex items-center justify-center">
                            <div class="w-32 h-32 rounded-full bg-amber-900 flex items-center justify-center">
                                <div class="w-16 h-16 rounded-full bg-black"></div>
                            </div>
                        </div>
                    </div>
                    <div id="dataNodes"></div>
                </div>
                
                <!-- Controls -->
                <div class="bg-black bg-opacity-30 rounded-lg p-6">
                    <h3 class="text-2xl mb-4 flex items-center">
                        <i class="fas fa-compact-disc mr-2 animate-spin"></i> Rhythm Controls
                    </h3>
                    <div class="grid grid-cols-3 gap-4">
                        <button id="playBtn" class="control-btn py-3 rounded-lg flex flex-col items-center justify-center tooltip">
                            <i class="fas fa-play text-2xl mb-1"></i>
                            <span>Play</span>
                            <span class="tooltip-text">Begin the sacred rhythm journey</span>
                        </button>
                        <button id="stopBtn" class="control-btn py-3 rounded-lg flex flex-col items-center justify-center tooltip">
                            <i class="fas fa-stop text-2xl mb-1"></i>
                            <span>Stop</span>
                            <span class="tooltip-text">Silence the spirits</span>
                        </button>
                        <button id="exportBtn" class="control-btn py-3 rounded-lg flex flex-col items-center justify-center tooltip">
                            <i class="fas fa-download text-2xl mb-1"></i>
                            <span>Export</span>
                            <span class="tooltip-text">Save the rhythm as audio</span>
                        </button>
                        <button id="randomBtn" class="control-btn py-3 rounded-lg flex flex-col items-center justify-center tooltip">
                            <i class="fas fa-random text-2xl mb-1"></i>
                            <span>Randomize</span>
                            <span class="tooltip-text">Let the spirits choose</span>
                        </button>
                        <button id="loopBtn" class="control-btn py-3 rounded-lg flex flex-col items-center justify-center tooltip">
                            <i class="fas fa-redo text-2xl mb-1"></i>
                            <span>Loop</span>
                            <span class="tooltip-text">Create eternal rhythm</span>
                        </button>
                        <button id="helpBtn" class="control-btn py-3 rounded-lg flex flex-col items-center justify-center tooltip">
                            <i class="fas fa-question text-2xl mb-1"></i>
                            <span>Guide</span>
                            <span class="tooltip-text">Learn the ways of data sonification</span>
                        </button>
                    </div>
                </div>
                
                <!-- Rhythm Pattern -->
                <div class="bg-black bg-opacity-30 rounded-lg p-6">
                    <h3 class="text-2xl mb-4 flex items-center">
                        <i class="fas fa-drum mr-2"></i> Rhythm Pattern
                    </h3>
                    <div class="overflow-x-auto">
                        <table class="w-full text-center" id="patternTable">
                            <thead>
                                <tr>
                                    <th class="px-4 py-2">Beat</th>
                                    <th class="px-4 py-2">Type</th>
                                    <th class="px-4 py-2">Pitch</th>
                                    <th class="px-4 py-2">Volume</th>
                                </tr>
                            </thead>
                            <tbody id="patternBody">
                                <!-- Will be populated by JavaScript -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Footer -->
    <footer class="bg-black bg-opacity-50 py-6 mt-12">
        <div class="container mx-auto px-4 text-center">
            <p class="mb-2">Shamanic Data Sonification - Connect with the spirit of your data</p>
            <p class="text-sm opacity-70">Created with Tone.js and the wisdom of ancient rhythms</p>
        </div>
    </footer>
    
    <script>
        // Initialize Tone.js
        document.addEventListener('DOMContentLoaded', function() {
            // Audio context initialization
            let isPlaying = false;
            let currentData = null;
            let tempo = 120;
            let loop = false;
            let sequence = null;
            
            // Drum sounds
            const drumSounds = {
                bass: new Tone.MembraneSynth().toDestination(),
                tom: new Tone.MembraneSynth({
                    pitchDecay: 0.05,
                    octaves: 2,
                    oscillator: {
                        type: "sine"
                    },
                    envelope: {
                        attack: 0.001,
                        decay: 0.5,
                        sustain: 0.01,
                        release: 0.5,
                        attackCurve: "exponential"
                    }
                }).toDestination(),
                snare: new Tone.NoiseSynth({
                    noise: {
                        type: "white"
                    },
                    envelope: {
                        attack: 0.001,
                        decay: 0.2,
                        sustain: 0.01,
                        release: 0.2
                    }
                }).toDestination(),
                shaker: new Tone.NoiseSynth({
                    noise: {
                        type: "pink"
                    },
                    envelope: {
                        attack: 0.001,
                        decay: 0.5,
                        sustain: 0.01,
                        release: 0.5
                    }
                }).toDestination()
            };
            
            // Set up canvas
            const canvas = document.getElementById('dataCanvas');
            const ctx = canvas.getContext('2d');
            
            function resizeCanvas() {
                const container = document.getElementById('dataVizContainer');
                canvas.width = container.clientWidth;
                canvas.height = container.clientHeight;
            }
            
            window.addEventListener('resize', resizeCanvas);
            resizeCanvas();
            
            // File upload handling
            const dropArea = document.getElementById('dropArea');
            const fileInput = document.getElementById('fileInput');
            const uploadBtn = document.getElementById('uploadBtn');
            
            uploadBtn.addEventListener('click', () => fileInput.click());
            
            fileInput.addEventListener('change', handleFiles);
            
            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                dropArea.addEventListener(eventName, preventDefaults, false);
            });
            
            function preventDefaults(e) {
                e.preventDefault();
                e.stopPropagation();
            }
            
            ['dragenter', 'dragover'].forEach(eventName => {
                dropArea.addEventListener(eventName, highlight, false);
            });
            
            ['dragleave', 'drop'].forEach(eventName => {
                dropArea.addEventListener(eventName, unhighlight, false);
            });
            
            function highlight() {
                dropArea.classList.add('border-amber-600');
            }
            
            function unhighlight() {
                dropArea.classList.remove('border-amber-600');
            }
            
            dropArea.addEventListener('drop', handleDrop, false);
            
            function handleDrop(e) {
                const dt = e.dataTransfer;
                const files = dt.files;
                handleFiles({ target: { files } });
            }
            
            function handleFiles(e) {
                const files = e.target.files;
                if (files.length === 0) return;
                
                const file = files[0];
                const reader = new FileReader();
                
                reader.onload = function(e) {
                    const data = new Uint8Array(e.target.result);
                    processExcel(data);
                };
                
                reader.readAsArrayBuffer(file);
            }
            
            function processExcel(data) {
                const workbook = XLSX.read(data, { type: 'array' });
                const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
                const jsonData = XLSX.utils.sheet_to_json(firstSheet, { header: 1 });
                
                currentData = jsonData;
                visualizeData(jsonData);
                generatePattern(jsonData);
            }
            
            function visualizeData(data) {
                // Clear previous visualization
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                // Draw some visualization based on data
                if (data.length === 0) return;
                
                const rowsToShow = Math.min(20, data.length);
                const colWidth = canvas.width / data[0].length;
                const rowHeight = canvas.height / rowsToShow;
                
                // Draw grid
                ctx.strokeStyle = '#5a3921';
                ctx.lineWidth = 0.5;
                
                // Vertical lines
                for (let i = 0; i <= data[0].length; i++) {
                    ctx.beginPath();
                    ctx.moveTo(i * colWidth, 0);
                    ctx.lineTo(i * colWidth, canvas.height);
                    ctx.stroke();
                }
                
                // Horizontal lines
                for (let i = 0; i <= rowsToShow; i++) {
                    ctx.beginPath();
                    ctx.moveTo(0, i * rowHeight);
                    ctx.lineTo(canvas.width, i * rowHeight);
                    ctx.stroke();
                }
                
                // Draw data points
                for (let row = 0; row < rowsToShow; row++) {
                    for (let col = 0; col < data[row].length; col++) {
                        const value = data[row][col];
                        if (value === undefined || value === null) continue;
                        
                        // Convert value to a number if possible
                        let numValue = typeof value === 'string' ? parseFloat(value) : Number(value);
                        if (isNaN(numValue)) {
                            // For non-numeric values, use a hash of the string
                            numValue = hashString(value) % 100;
                        }
                        
                        const x = col * colWidth + colWidth / 2;
                        const y = row * rowHeight + rowHeight / 2;
                        const radius = Math.max(2, (numValue % 10) + 2);
                        
                        // Color based on value
                        const hue = (numValue * 3.6) % 360;
                        ctx.fillStyle = `hsla(${hue}, 70%, 50%, 0.7)`;
                        
                        ctx.beginPath();
                        ctx.arc(x, y, radius, 0, Math.PI * 2);
                        ctx.fill();
                    }
                }
                
                // Also create data nodes in the drum circle
                const drumCircle = document.getElementById('dataNodes');
                drumCircle.innerHTML = '';
                
                for (let row = 0; row < rowsToShow; row++) {
                    for (let col = 0; col < data[row].length; col++) {
                        const value = data[row][col];
                        if (value === undefined || value === null) continue;
                        
                        let numValue = typeof value === 'string' ? parseFloat(value) : Number(value);
                        if (isNaN(numValue)) {
                            numValue = hashString(value) % 100;
                        }
                        
                        // Position nodes in a spiral pattern within the drum circle
                        const angle = (col / data[row].length) * Math.PI * 2;
                        const distance = 0.3 + (row / rowsToShow) * 0.5;
                        
                        const x = 50 + Math.cos(angle) * distance * 50;
                        const y = 50 + Math.sin(angle) * distance * 50;
                        
                        const node = document.createElement('div');
                        node.className = 'data-node';
                        node.style.left = `${x}%`;
                        node.style.top = `${y}%`;
                        node.style.width = `${Math.max(5, (numValue % 10) + 5)}px`;
                        node.style.height = `${Math.max(5, (numValue % 10) + 5)}px`;
                        node.style.backgroundColor = `hsla(${(numValue * 3.6) % 360}, 70%, 50%, 0.7)`;
                        
                        drumCircle.appendChild(node);
                    }
                }
            }
            
            function hashString(str) {
                let hash = 0;
                for (let i = 0; i < str.length; i++) {
                    const char = str.charCodeAt(i);
                    hash = ((hash << 5) - hash) + char;
                    hash = hash & hash; // Convert to 32bit integer
                }
                return Math.abs(hash);
            }
            
            function generatePattern(data) {
                if (!data || data.length === 0) return;
                
                // Clear previous pattern
                const patternBody = document.getElementById('patternBody');
                patternBody.innerHTML = '';
                
                // Generate rhythm pattern based on data
                const pattern = [];
                const rowsToUse = Math.min(16, data.length);
                
                for (let i = 0; i < rowsToUse; i++) {
                    const row = data[i];
                    if (!row || row.length === 0) continue;
                    
                    // Determine drum type based on column
                    const drumTypes = ['bass', 'tom', 'snare', 'shaker'];
                    const drumType = drumTypes[i % drumTypes.length];
                    
                    // Get a numeric value from the row
                    let value = 0;
                    for (let j = 0; j < row.length; j++) {
                        const cell = row[j];
                        if (typeof cell === 'number') {
                            value += cell;
                        } else if (typeof cell === 'string') {
                            const num = parseFloat(cell);
                            if (!isNaN(num)) {
                                value += num;
                            } else {
                                value += hashString(cell) % 100;
                            }
                        }
                    }
                    
                    // Normalize value
                    value = Math.abs(value) % 100;
                    
                    // Create pattern item
                    const patternItem = {
                        beat: i + 1,
                        type: drumType,
                        pitch: 30 + (value % 40),
                        volume: 0.3 + (value % 70) / 100
                    };
                    
                    pattern.push(patternItem);
                    
                    // Add to table
                    const rowElement = document.createElement('tr');
                    rowElement.className = i % 2 === 0 ? 'bg-amber-900 bg-opacity-20' : '';
                    rowElement.innerHTML = `
                        <td class="px-4 py-2">${patternItem.beat}</td>
                        <td class="px-4 py-2 capitalize">${patternItem.type}</td>
                        <td class="px-4 py-2">${patternItem.pitch.toFixed(1)}</td>
                        <td class="px-4 py-2">${Math.round(patternItem.volume * 100)}%</td>
                    `;
                    patternBody.appendChild(rowElement);
                }
                
                // Create Tone.js sequence
                if (sequence) {
                    sequence.dispose();
                }
                
                sequence = new Tone.Sequence((time, item) => {
                    if (!item) return;
                    
                    // Play the drum sound
                    if (item.type === 'bass' || item.type === 'tom') {
                        drumSounds[item.type].triggerAttackRelease(item.pitch, "8n", time, item.volume);
                    } else {
                        drumSounds[item.type].triggerAttackRelease("8n", time, item.volume);
                    }
                    
                    // Visual feedback
                    animateDrumHit(item.type);
                    
                }, pattern, "8n");
                
                // Set tempo
                Tone.Transport.bpm.value = tempo;
            }
            
            function animateDrumHit(type) {
                const drumCircle = document.getElementById('drumCircle');
                let color;
                
                switch(type) {
                    case 'bass': color = '#8a5a44'; break;
                    case 'tom': color = '#c77d3e'; break;
                    case 'snare': color = '#e2d5b6'; break;
                    case 'shaker': color = '#5a3921'; break;
                    default: color = '#8a5a44';
                }
                
                drumCircle.style.boxShadow = `0 0 30px ${color}`;
                
                setTimeout(() => {
                    drumCircle.style.boxShadow = '0 0 20px #5a3921';
                }, 200);
            }
            
            // Control buttons
            document.getElementById('playBtn').addEventListener('click', () => {
                if (!currentData) {
                    alert('Please upload an Excel file first');
                    return;
                }
                
                if (!isPlaying) {
                    Tone.start();
                    Tone.Transport.start();
                    sequence.start();
                    isPlaying = true;
                    document.getElementById('playBtn').querySelector('i').className = 'fas fa-pause text-2xl mb-1';
                } else {
                    Tone.Transport.pause();
                    isPlaying = false;
                    document.getElementById('playBtn').querySelector('i').className = 'fas fa-play text-2xl mb-1';
                }
            });
            
            document.getElementById('stopBtn').addEventListener('click', () => {
                Tone.Transport.stop();
                sequence.stop();
                isPlaying = false;
                document.getElementById('playBtn').querySelector('i').className = 'fas fa-play text-2xl mb-1';
            });
            
            document.getElementById('exportBtn').addEventListener('click', () => {
                if (!currentData) {
                    alert('Please upload an Excel file and generate a rhythm first');
                    return;
                }
                
                alert('Audio export would be implemented here with Tone.js offline rendering');
                // In a real implementation, you would use:
                // Tone.Offline(() => {
                //     // Play your sequence
                // }, duration).then(buffer => {
                //     // Save buffer as WAV file
                // });
            });
            
            document.getElementById('randomBtn').addEventListener('click', () => {
                if (!currentData) {
                    alert('Please upload an Excel file first');
                    return;
                }
                
                // Randomize some parameters
                document.getElementById('intensitySlider').value = Math.floor(Math.random() * 100);
                document.getElementById('tempoSlider').value = 40 + Math.floor(Math.random() * 160);
                document.getElementById('resonanceSlider').value = Math.floor(Math.random() * 100);
                
                // Regenerate pattern
                generatePattern(currentData);
            });
            
            document.getElementById('loopBtn').addEventListener('click', function() {
                loop = !loop;
                sequence.loop = loop;
                this.classList.toggle('bg-amber-800');
                this.querySelector('i').classList.toggle('text-amber-500');
            });
            
            document.getElementById('helpBtn').addEventListener('click', () => {
                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.');
            });
            
            // Slider events
            document.getElementById('tempoSlider').addEventListener('input', function() {
                tempo = this.value;
                Tone.Transport.bpm.value = tempo;
            });
            
            document.getElementById('intensitySlider').addEventListener('input', function() {
                if (currentData) {
                    generatePattern(currentData);
                }
            });
            
            document.getElementById('resonanceSlider').addEventListener('input', function() {
                // This would affect reverb/delay in a more complete implementation
                // For now just regenerate pattern
                if (currentData) {
                    generatePattern(currentData);
                }
            });
        });
    </script>
<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>
</html>