Spaces:

lonestar108
/

sonic-canvas

Running

App Files Files Community

lonestar108 commited on Oct 3, 2025

Commit

d839c0b

verified ·

1 Parent(s): ea26ebf

A responsive and dynamic musical surface

Browse files

Files changed (2) hide show

README.md +7 -4
index.html +365 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
 title: Sonic Canvas
-emoji: 🏃
-colorFrom: pink
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
 title: Sonic Canvas
+colorFrom: red
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,366 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sonic Canvas</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
+    <style>
+        .note-cell {
+            transition: all 0.2s ease;
+            cursor: pointer;
+        }
+        .note-cell:hover {
+            transform: scale(1.1);
+            z-index: 10;
+        }
+        .active-note {
+            animation: pulse 0.5s ease-in-out;
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.3); }
+            100% { transform: scale(1); }
+        }
+        .keyboard-key {
+            transition: all 0.1s ease;
+        }
+        .keyboard-key.active {
+            transform: translateY(5px);
+            box-shadow: inset 0 4px 8px rgba(0,0,0,0.2);
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white overflow-hidden">
+    <!-- Header -->
+    <header class="absolute top-0 left-0 right-0 z-50 p-4 flex justify-between items-center">
+        <div class="flex items-center space-x-2">
+            <i data-feather="music" class="text-indigo-400"></i>
+            <h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-indigo-300">Sonic Canvas</h1>
+        </div>
+        <div class="flex space-x-4">
+            <button id="playBtn" class="px-4 py-2 bg-indigo-600 rounded-lg hover:bg-indigo-700 transition flex items-center">
+                <i data-feather="play" class="mr-2"></i> Play
+            </button>
+            <button id="clearBtn" class="px-4 py-2 bg-purple-600 rounded-lg hover:bg-purple-700 transition flex items-center">
+                <i data-feather="trash-2" class="mr-2"></i> Clear
+            </button>
+        </div>
+    </header>
+    <!-- Main Grid -->
+    <div id="grid-container" class="grid grid-cols-16 grid-rows-12 h-screen w-screen p-8 pt-20">
+        <!-- Grid will be generated by JS -->
+    </div>
+    <!-- Controls -->
+    <div class="absolute bottom-0 left-0 right-0 bg-gray-800 bg-opacity-80 p-4 backdrop-blur-sm">
+        <div class="max-w-6xl mx-auto">
+            <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
+                <div class="flex items-center space-x-4">
+                    <label class="flex items-center">
+                        <span class="mr-2">Tempo:</span>
+                        <input type="range" id="tempo" min="60" max="240" value="120" class="w-32">
+                        <span id="tempo-value" class="ml-2">120 BPM</span>
+                    </label>
+                </div>
+                <div class="flex space-x-2">
+                    <button id="octave-down" class="p-2 bg-gray-700 rounded hover:bg-gray-600">
+                        <i data-feather="chevrons-down"></i>
+                    </button>
+                    <span id="octave-display" class="px-3 py-2 bg-gray-700 rounded">Octave 4</span>
+                    <button id="octave-up" class="p-2 bg-gray-700 rounded hover:bg-gray-600">
+                        <i data-feather="chevrons-up"></i>
+                    </button>
+                </div>
+                <div class="flex items-center space-x-2">
+                    <span>Scale:</span>
+                    <select id="scale-select" class="bg-gray-700 rounded px-3 py-2">
+                        <option value="major">Major</option>
+                        <option value="minor">Minor</option>
+                        <option value="pentatonic">Pentatonic</option>
+                        <option value="blues">Blues</option>
+                    </select>
+                </div>
+            </div>
+            <!-- Virtual Keyboard -->
+            <div id="keyboard" class="mt-4 flex justify-center">
+                <!-- Keyboard will be generated by JS -->
+            </div>
+        </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script>
+        // Initialize Feather Icons
+        feather.replace();
+        // Initialize Vanta.js background
+        VANTA.WAVES({
+            el: "#grid-container",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x1a1a2e,
+            shininess: 15.00,
+            waveHeight: 10.00,
+            waveSpeed: 0.50
+        });
+        // Audio context
+        const AudioContext = window.AudioContext || window.webkitAudioContext;
+        const audioCtx = new AudioContext();
+        // Grid configuration
+        const rows = 12;
+        const cols = 16;
+        const gridContainer = document.getElementById('grid-container');
+        let grid = Array(rows).fill().map(() => Array(cols).fill(0));
+        let isPlaying = false;
+        let tempo = 120;
+        let currentStep = 0;
+        let octave = 4;
+        let scale = 'major';
+        // Note frequencies (C4 = 261.63 Hz)
+        const noteFrequencies = {
+            'C': 261.63,
+            'C#': 277.18,
+            'D': 293.66,
+            'D#': 311.13,
+            'E': 329.63,
+            'F': 349.23,
+            'F#': 369.99,
+            'G': 392.00,
+            'G#': 415.30,
+            'A': 440.00,
+            'A#': 466.16,
+            'B': 493.88
+        };
+        // Scales
+        const scales = {
+            major: [0, 2, 4, 5, 7, 9, 11],
+            minor: [0, 2, 3, 5, 7, 8, 10],
+            pentatonic: [0, 2, 4, 7, 9],
+            blues: [0, 3, 5, 6, 7, 10]
+        };
+        // Create grid
+        function createGrid() {
+            gridContainer.innerHTML = '';
+            for (let row = 0; row < rows; row++) {
+                for (let col = 0; col < cols; col++) {
+                    const cell = document.createElement('div');
+                    cell.className = `note-cell border border-gray-700 rounded relative`;
+                    cell.dataset.row = row;
+                    cell.dataset.col = col;
+                    // Add note label
+                    const noteLabel = document.createElement('span');
+                    noteLabel.className = 'absolute top-1 left-1 text-xs opacity-50';
+                    noteLabel.textContent = getNoteName(row);
+                    cell.appendChild(noteLabel);
+                    // Add step indicator
+                    if (row === 0) {
+                        const stepLabel = document.createElement('span');
+                        stepLabel.className = 'absolute bottom-1 right-1 text-xs opacity-50';
+                        stepLabel.textContent = col + 1;
+                        cell.appendChild(stepLabel);
+                    }
+                    cell.addEventListener('click', () => toggleNote(row, col));
+                    gridContainer.appendChild(cell);
+                }
+            }
+            updateGridDisplay();
+        }
+        // Get note name based on row and scale
+        function getNoteName(row) {
+            const scaleNotes = scales[scale];
+            const noteIndex = scaleNotes[11 - row] || 0;
+            const noteNames = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
+            return noteNames[noteIndex];
+        }
+        // Toggle note on/off
+        function toggleNote(row, col) {
+            grid[row][col] = grid[row][col] ? 0 : 1;
+            updateGridDisplay();
+        }
+        // Update grid display
+        function updateGridDisplay() {
+            const cells = document.querySelectorAll('.note-cell');
+            cells.forEach(cell => {
+                const row = parseInt(cell.dataset.row);
+                const col = parseInt(cell.dataset.col);
+                if (grid[row][col]) {
+                    cell.classList.add('bg-indigo-500');
+                    cell.classList.remove('bg-gray-800');
+                } else {
+                    cell.classList.remove('bg-indigo-500');
+                    cell.classList.add('bg-gray-800');
+                }
+            });
+        }
+        // Play a note
+        function playNote(frequency, duration = 0.5) {
+            const oscillator = audioCtx.createOscillator();
+            const gainNode = audioCtx.createGain();
+            oscillator.connect(gainNode);
+            gainNode.connect(audioCtx.destination);
+            oscillator.type = 'sine';
+            oscillator.frequency.value = frequency;
+            gainNode.gain.setValueAtTime(0.3, audioCtx.currentTime);
+            gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + duration);
+            oscillator.start();
+            oscillator.stop(audioCtx.currentTime + duration);
+        }
+        // Play sequence
+        function playSequence() {
+            if (!isPlaying) return;
+            // Highlight current column
+            const cells = document.querySelectorAll('.note-cell');
+            cells.forEach(cell => {
+                const col = parseInt(cell.dataset.col);
+                if (col === currentStep) {
+                    cell.classList.add('bg-purple-500');
+                } else {
+                    cell.classList.remove('bg-purple-500');
+                }
+            });
+            // Play notes in current column
+            for (let row = 0; row < rows; row++) {
+                if (grid[row][currentStep]) {
+                    const scaleNotes = scales[scale];
+                    const noteIndex = scaleNotes[11 - row] || 0;
+                    const frequency = noteFrequencies[getNoteName(row)] * Math.pow(2, octave - 4);
+                    playNote(frequency, 60 / tempo);
+                    // Add visual feedback
+                    const cell = document.querySelector(`.note-cell[data-row="${row}"][data-col="${currentStep}"]`);
+                    cell.classList.add('active-note');
+                    setTimeout(() => cell.classList.remove('active-note'), 300);
+                }
+            }
+            currentStep = (currentStep + 1) % cols;
+            setTimeout(playSequence, (60 / tempo) * 1000);
+        }
+        // Create virtual keyboard
+        function createKeyboard() {
+            const keyboard = document.getElementById('keyboard');
+            keyboard.innerHTML = '';
+            const whiteKeys = ['C', 'D', 'E', 'F', 'G', 'A', 'B'];
+            const blackKeys = ['C#', 'D#', null, 'F#', 'G#', 'A#', null];
+            // Create white keys
+            whiteKeys.forEach((note, i) => {
+                const key = document.createElement('div');
+                key.className = 'keyboard-key w-12 h-32 bg-white border border-gray-300 rounded-b-md flex items-end justify-center pb-2 relative';
+                key.dataset.note = note;
+                key.textContent = note;
+                key.addEventListener('mousedown', () => playKeyNote(note));
+                keyboard.appendChild(key);
+                // Add black key if needed
+                if (blackKeys[i]) {
+                    const blackKey = document.createElement('div');
+                    blackKey.className = 'keyboard-key absolute w-8 h-20 bg-gray-900 rounded-b-md flex items-end justify-center pb-2 text-white -ml-6';
+                    blackKey.dataset.note = blackKeys[i];
+                    blackKey.textContent = blackKeys[i];
+                    blackKey.style.left = `${i * 48 + 36}px`;
+                    blackKey.addEventListener('mousedown', () => playKeyNote(blackKeys[i]));
+                    keyboard.appendChild(blackKey);
+                }
+            });
+        }
+        // Play note from keyboard
+        function playKeyNote(note) {
+            const frequency = noteFrequencies[note] * Math.pow(2, octave - 4);
+            playNote(frequency, 0.5);
+            // Visual feedback
+            const key = document.querySelector(`.keyboard-key[data-note="${note}"]`);
+            if (key) {
+                key.classList.add('active');
+                setTimeout(() => key.classList.remove('active'), 200);
+            }
+        }
+        // Event listeners
+        document.getElementById('playBtn').addEventListener('click', () => {
+            isPlaying = !isPlaying;
+            document.getElementById('playBtn').innerHTML = isPlaying ?
+                '<i data-feather="pause" class="mr-2"></i> Pause' :
+                '<i data-feather="play" class="mr-2"></i> Play';
+            feather.replace();
+            if (isPlaying) {
+                currentStep = 0;
+                playSequence();
+            }
+        });
+        document.getElementById('clearBtn').addEventListener('click', () => {
+            grid = Array(rows).fill().map(() => Array(cols).fill(0));
+            updateGridDisplay();
+        });
+        document.getElementById('tempo').addEventListener('input', (e) => {
+            tempo = e.target.value;
+            document.getElementById('tempo-value').textContent = `${tempo} BPM`;
+        });
+        document.getElementById('octave-down').addEventListener('click', () => {
+            if (octave > 2) {
+                octave--;
+                document.getElementById('octave-display').textContent = `Octave ${octave}`;
+                createKeyboard();
+            }
+        });
+        document.getElementById('octave-up').addEventListener('click', () => {
+            if (octave < 6) {
+                octave++;
+                document.getElementById('octave-display').textContent = `Octave ${octave}`;
+                createKeyboard();
+            }
+        });
+        document.getElementById('scale-select').addEventListener('change', (e) => {
+            scale = e.target.value;
+            createGrid();
+            createKeyboard();
+        });
+        // Initialize
+        createGrid();
+        createKeyboard();
+    </script>
+</body>
 </html>