Hugging Face's logo

Spaces:
DmitryYarov
/
sonificator
Running

App Files Community
sonificator / index.html
DmitryYarov's picture
DmitryYarov
Add 2 files
9998059 verified
raw
history blame contribute delete
30 kB
 <!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>