Spaces:

lonestar108
/

sonic-canvas

Running

App Files Files Community

lonestar108 commited on Oct 3, 2025

Commit

1bbafd0

verified ·

1 Parent(s): d839c0b

enhance it, fix the keys offset rendering issue, improve everything

Browse files

Files changed (2) hide show

about.html +139 -0
index.html +326 -78

about.html ADDED Viewed

	@@ -0,0 +1,139 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About - 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>
+</head>
+<body class="bg-gray-900 text-white">
+    <!-- Header -->
+    <header class="absolute top-0 left-0 right-0 z-50 p-4 flex justify-between items-center bg-gray-900 bg-opacity-80 backdrop-blur-sm">
+        <div class="flex items-center space-x-3">
+            <div class="p-2 rounded-lg bg-gradient-to-r from-purple-500 to-indigo-600">
+                <i data-feather="music" class="text-white"></i>
+            </div>
+            <h1 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-400 to-indigo-300">
+                Sonic Canvas
+            </h1>
+        </div>
+        <nav class="flex space-x-4">
+            <a href="index.html" class="px-4 py-2 rounded-lg hover:bg-gray-800 transition">Home</a>
+            <a href="about.html" class="px-4 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-indigo-600">About</a>
+        </nav>
+    </header>
+    <!-- Main Content -->
+    <div id="content" class="min-h-screen flex items-center justify-center p-8 pt-24">
+        <div class="max-w-4xl mx-auto">
+            <div class="text-center mb-12">
+                <h1 class="text-5xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-indigo-300">
+                    About Sonic Canvas
+                </h1>
+                <p class="text-xl text-gray-300 max-w-2xl mx-auto">
+                    An innovative step sequencer that transforms your browser into a musical playground
+                </p>
+            </div>
+            <div class="grid md:grid-cols-2 gap-8 mb-12">
+                <div class="bg-gray-800 bg-opacity-50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
+                    <div class="flex items-center mb-4">
+                        <div class="p-3 rounded-lg bg-gradient-to-r from-purple-500 to-indigo-600 mr-4">
+                            <i data-feather="grid" class="w-6 h-6"></i>
+                        </div>
+                        <h2 class="text-2xl font-bold">Interactive Grid</h2>
+                    </div>
+                    <p class="text-gray-300">
+                        Our 12x16 grid interface allows you to visually compose music by activating cells.
+                        Each row represents a different note, and each column represents a step in time.
+                    </p>
+                </div>
+                <div class="bg-gray-800 bg-opacity-50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
+                    <div class="flex items-center mb-4">
+                        <div class="p-3 rounded-lg bg-gradient-to-r from-pink-500 to-rose-600 mr-4">
+                            <i data-feather="music" class="w-6 h-6"></i>
+                        </div>
+                        <h2 class="text-2xl font-bold">Musical Scales</h2>
+                    </div>
+                    <p class="text-gray-300">
+                        Choose from various musical scales including Major, Minor, Pentatonic, Blues,
+                        Dorian, and Mixolydian to create different moods and styles.
+                    </p>
+                </div>
+                <div class="bg-gray-800 bg-opacity-50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
+                    <div class="flex items-center mb-4">
+                        <div class="p-3 rounded-lg bg-gradient-to-r from-blue-500 to-cyan-600 mr-4">
+                            <i data-feather="sliders" class="w-6 h-6"></i>
+                        </div>
+                        <h2 class="text-2xl font-bold">Precise Control</h2>
+                    </div>
+                    <p class="text-gray-300">
+                        Adjust tempo, volume, and octave range to fine-tune your composition.
+                        The virtual keyboard lets you preview notes before adding them to your sequence.
+                    </p>
+                </div>
+                <div class="bg-gray-800 bg-opacity-50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
+                    <div class="flex items-center mb-4">
+                        <div class="p-3 rounded-lg bg-gradient-to-r from-green-500 to-emerald-600 mr-4">
+                            <i data-feather="code" class="w-6 h-6"></i>
+                        </div>
+                        <h2 class="text-2xl font-bold">Web Audio API</h2>
+                    </div>
+                    <p class="text-gray-300">
+                        Built with modern web technologies including Web Audio API for high-quality
+                        sound synthesis and smooth performance directly in your browser.
+                    </p>
+                </div>
+            </div>
+            <div class="text-center">
+                <h2 class="text-3xl font-bold mb-6">How to Use</h2>
+                <div class="bg-gray-800 bg-opacity-50 backdrop-blur-sm rounded-xl p-8 border border-gray-700">
+                    <ol class="list-decimal list-inside space-y-4 text-left max-w-2xl mx-auto text-gray-300">
+                        <li>Click cells in the grid to activate notes</li>
+                        <li>Adjust tempo and volume using the sliders</li>
+                        <li>Change octaves and musical scales for different sounds</li>
+                        <li>Use the virtual keyboard to preview notes</li>
+                        <li>Press Play to hear your composition come to life</li>
+                        <li>Press Clear to start a new sequence</li>
+                    </ol>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Footer -->
+    <footer class="py-8 text-center text-gray-500 text-sm border-t border-gray-800 mt-12">
+        <div class="container mx-auto px-4">
+            <p>© 2023 Sonic Canvas - A modern step sequencer experience</p>
+        </div>
+    </footer>
+    <script>
+        // Initialize Feather Icons
+        feather.replace();
+        // Initialize Vanta.js background
+        VANTA.WAVES({
+            el: "#content",
+            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
+        });
+    </script>
+</body>
+</html>

index.html CHANGED Viewed

@@ -12,91 +12,236 @@
         .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();
@@ -116,11 +261,15 @@
             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;
@@ -128,9 +277,11 @@
         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 = {
@@ -153,7 +304,27 @@
             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
@@ -162,24 +333,29 @@
             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);
                 }
@@ -199,6 +375,11 @@
         function toggleNote(row, col) {
             grid[row][col] = grid[row][col] ? 0 : 1;
             updateGridDisplay();
         }
         // Update grid display
@@ -208,27 +389,30 @@
                 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();
@@ -239,15 +423,14 @@
         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
@@ -255,8 +438,10 @@
                 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}"]`);
@@ -266,7 +451,13 @@
             }
             currentStep = (currentStep + 1) % cols;
-            setTimeout(playSequence, (60 / tempo) * 1000);
         }
         // Create virtual keyboard
@@ -275,25 +466,33 @@
             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);
                 }
             });
@@ -302,18 +501,47 @@
         // 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' :
@@ -322,7 +550,13 @@
             if (isPlaying) {
                 currentStep = 0;
-                playSequence();
             }
         });
@@ -334,6 +568,15 @@
         document.getElementById('tempo').addEventListener('input', (e) => {
             tempo = e.target.value;
             document.getElementById('tempo-value').textContent = `${tempo} BPM`;
         });
         document.getElementById('octave-down').addEventListener('click', () => {
@@ -358,9 +601,14 @@
             createKeyboard();
         });
         // Initialize
         createGrid();
         createKeyboard();
     </script>
 </body>
 </html>

         .note-cell {
             transition: all 0.2s ease;
             cursor: pointer;
+            position: relative;
+            overflow: hidden;
+        }
+        .note-cell::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 80%);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        .note-cell:hover::before {
+            opacity: 1;
         }
         .note-cell:hover {
+            transform: scale(1.05);
             z-index: 10;
         }
         .active-note {
             animation: pulse 0.5s ease-in-out;
+            box-shadow: 0 0 15px rgba(139, 92, 246, 0.7);
         }
         @keyframes pulse {
             0% { transform: scale(1); }
+            50% { transform: scale(1.15); }
             100% { transform: scale(1); }
         }
+        .playing-column {
+            background-color: rgba(139, 92, 246, 0.3) !important;
+            box-shadow: inset 0 0 10px rgba(139, 92, 246, 0.5);
+        }
+        .keyboard-container {
+            position: relative;
+            height: 150px;
+            display: flex;
+            padding: 0 10px;
+        }
+        .white-key {
+            position: relative;
+            width: 50px;
+            height: 100%;
+            background: linear-gradient(to bottom, #fff 0%, #f5f5f5 100%);
+            border: 1px solid #ccc;
+            border-radius: 0 0 5px 5px;
+            margin-right: -1px;
+            z-index: 1;
+            display: flex;
+            align-items: flex-end;
+            justify-content: center;
+            padding-bottom: 10px;
+            font-size: 12px;
+            color: #333;
+            cursor: pointer;
+            transition: all 0.1s ease;
+            box-shadow: 0 5px 5px rgba(0,0,0,0.2);
+        }
+        .white-key.active {
+            background: linear-gradient(to bottom, #e0e0e0 0%, #d0d0d0 100%);
+            transform: translateY(3px);
+            box-shadow: 0 2px 2px rgba(0,0,0,0.2);
+        }
+        .black-key {
+            position: absolute;
+            width: 30px;
+            height: 60%;
+            background: linear-gradient(to bottom, #000 0%, #333 100%);
+            border: 1px solid #000;
+            border-radius: 0 0 3px 3px;
+            z-index: 2;
+            display: flex;
+            align-items: flex-end;
+            justify-content: center;
+            padding-bottom: 10px;
+            font-size: 10px;
+            color: #fff;
+            cursor: pointer;
             transition: all 0.1s ease;
+            box-shadow: 0 3px 3px rgba(0,0,0,0.3);
+        }
+        .black-key.active {
+            background: linear-gradient(to bottom, #333 0%, #555 100%);
+            transform: translateY(2px);
+            box-shadow: 0 1px 1px rgba(0,0,0,0.3);
+        }
+        .control-panel {
+            background: rgba(31, 41, 55, 0.85);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .btn-primary {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border: none;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         }
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+        }
+        .btn-secondary {
+            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+            border: none;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        .btn-secondary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+        }
+        .slider {
+            -webkit-appearance: none;
+            width: 100%;
+            height: 6px;
+            border-radius: 3px;
+            background: linear-gradient(90deg, #667eea, #764ba2);
+            outline: none;
+        }
+        .slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            background: #fff;
+            cursor: pointer;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+        }
+        .pulse-animation {
+            animation: pulse-glow 2s infinite;
+        }
+        @keyframes pulse-glow {
+            0% { box-shadow: 0 0 5px rgba(139, 92, 246, 0.5); }
+            50% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.8); }
+            100% { box-shadow: 0 0 5px rgba(139, 92, 246, 0.5); }
         }
     </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 bg-gray-900 bg-opacity-80 backdrop-blur-sm">
+        <div class="flex items-center space-x-3">
+            <div class="p-2 rounded-lg bg-gradient-to-r from-purple-500 to-indigo-600">
+                <i data-feather="music" class="text-white"></i>
+            </div>
+            <h1 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-400 to-indigo-300">
+                Sonic Canvas
+            </h1>
         </div>
+        <div class="flex space-x-3">
+            <button id="playBtn" class="px-5 py-2 btn-primary rounded-lg flex items-center font-medium">
                 <i data-feather="play" class="mr-2"></i> Play
             </button>
+            <button id="clearBtn" class="px-5 py-2 btn-secondary rounded-lg flex items-center font-medium">
                 <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-6 pt-24 pb-40">
         <!-- Grid will be generated by JS -->
     </div>
     <!-- Controls -->
+    <div class="absolute bottom-0 left-0 right-0 control-panel p-5">
+        <div class="max-w-7xl mx-auto">
+            <div class="flex flex-col lg:flex-row justify-between items-center space-y-4 lg:space-y-0">
+                <div class="flex items-center space-x-6">
+                    <div class="flex items-center space-x-3">
+                        <i data-feather="clock" class="text-indigo-400"></i>
+                        <label class="flex items-center">
+                            <span class="mr-3 text-sm">Tempo:</span>
+                            <input type="range" id="tempo" min="40" max="240" value="120" class="slider w-32">
+                            <span id="tempo-value" class="ml-3 text-sm font-mono bg-gray-700 px-2 py-1 rounded">120 BPM</span>
+                        </label>
+                    </div>
+                    <div class="flex items-center space-x-3">
+                        <i data-feather="sliders" class="text-indigo-400"></i>
+                        <span class="text-sm">Volume:</span>
+                        <input type="range" id="volume" min="0" max="100" value="70" class="slider w-24">
+                        <span id="volume-value" class="text-sm font-mono bg-gray-700 px-2 py-1 rounded">70%</span>
+                    </div>
                 </div>
+                <div class="flex space-x-4">
+                    <div class="flex items-center space-x-2 bg-gray-700 rounded-lg px-3 py-2">
+                        <button id="octave-down" class="p-1 hover:bg-gray-600 rounded">
+                            <i data-feather="minus" class="w-4 h-4"></i>
+                        </button>
+                        <span id="octave-display" class="text-sm font-medium px-2">Octave 4</span>
+                        <button id="octave-up" class="p-1 hover:bg-gray-600 rounded">
+                            <i data-feather="plus" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                    <div class="flex items-center space-x-2 bg-gray-700 rounded-lg px-3 py-2">
+                        <span class="text-sm">Scale:</span>
+                        <select id="scale-select" class="bg-gray-600 rounded px-2 py-1 text-sm">
+                            <option value="major">Major</option>
+                            <option value="minor">Minor</option>
+                            <option value="pentatonic">Pentatonic</option>
+                            <option value="blues">Blues</option>
+                            <option value="dorian">Dorian</option>
+                            <option value="mixolydian">Mixolydian</option>
+                        </select>
+                    </div>
                 </div>
             </div>
             <!-- Virtual Keyboard -->
+            <div id="keyboard-container" class="mt-6">
+                <div class="flex justify-between items-center mb-3">
+                    <h3 class="text-lg font-semibold flex items-center">
+                        <i data-feather="keyboard" class="mr-2 text-indigo-400"></i>
+                        Virtual Keyboard
+                    </h3>
+                    <div class="text-sm text-gray-400">
+                        Click or press keys A-S-D-F-G-H-J-K-L-; (white keys) and W-E-T-Y-U-O-P (black keys)
+                    </div>
+                </div>
+                <div id="keyboard" class="keyboard-container">
+                    <!-- Keyboard will be generated by JS -->
+                </div>
             </div>
         </div>
     </div>
+<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script>
         // Initialize Feather Icons
         feather.replace();
             waveHeight: 10.00,
             waveSpeed: 0.50
         });
         // Audio context
         const AudioContext = window.AudioContext || window.webkitAudioContext;
         const audioCtx = new AudioContext();
+        // Global variables
+        let masterGain = audioCtx.createGain();
+        masterGain.connect(audioCtx.destination);
+        masterGain.gain.value = 0.7;
         // Grid configuration
         const rows = 12;
         const cols = 16;
         let grid = Array(rows).fill().map(() => Array(cols).fill(0));
         let isPlaying = false;
         let tempo = 120;
+        let volume = 70;
         let currentStep = 0;
         let octave = 4;
         let scale = 'major';
+        let schedulerInterval;
         // Note frequencies (C4 = 261.63 Hz)
         const noteFrequencies = {
             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],
+            dorian: [0, 2, 3, 5, 7, 9, 10],
+            mixolydian: [0, 2, 4, 5, 7, 9, 10]
+        };
+        // Keyboard mapping
+        const keyMap = {
+            // White keys
+            'a': 'C',
+            's': 'D',
+            'd': 'E',
+            'f': 'F',
+            'g': 'G',
+            'h': 'A',
+            'j': 'B',
+            // Black keys
+            'w': 'C#',
+            'e': 'D#',
+            't': 'F#',
+            'y': 'G#',
+            'u': 'A#'
         };
         // Create grid
             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-lg relative flex items-center justify-center`;
                     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-70 font-medium';
                     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-70 font-medium';
                         stepLabel.textContent = col + 1;
                         cell.appendChild(stepLabel);
                     }
+                    // Add glow effect element
+                    const glow = document.createElement('div');
+                    glow.className = 'absolute inset-0 rounded-lg opacity-0 bg-gradient-to-br from-purple-500 to-indigo-600';
+                    cell.appendChild(glow);
                     cell.addEventListener('click', () => toggleNote(row, col));
                     gridContainer.appendChild(cell);
                 }
         function toggleNote(row, col) {
             grid[row][col] = grid[row][col] ? 0 : 1;
             updateGridDisplay();
+            // Visual feedback
+            const cell = document.querySelector(`.note-cell[data-row="${row}"][data-col="${col}"]`);
+            cell.classList.add('pulse-animation');
+            setTimeout(() => cell.classList.remove('pulse-animation'), 200);
         }
         // Update grid display
                 const row = parseInt(cell.dataset.row);
                 const col = parseInt(cell.dataset.col);
                 if (grid[row][col]) {
+                    cell.classList.add('bg-gradient-to-br', 'from-purple-600', 'to-indigo-700');
                     cell.classList.remove('bg-gray-800');
                 } else {
+                    cell.classList.remove('bg-gradient-to-br', 'from-purple-600', 'to-indigo-700');
                     cell.classList.add('bg-gray-800');
                 }
             });
         }
         // Play a note
+        function playNote(frequency, duration = 0.5, volumeLevel = 1) {
             const oscillator = audioCtx.createOscillator();
             const gainNode = audioCtx.createGain();
             oscillator.connect(gainNode);
+            gainNode.connect(masterGain);
             oscillator.type = 'sine';
             oscillator.frequency.value = frequency;
+            // Apply volume setting
+            const adjustedVolume = (volume / 100) * volumeLevel;
+            gainNode.gain.setValueAtTime(adjustedVolume, audioCtx.currentTime);
             gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + duration);
             oscillator.start();
         function playSequence() {
             if (!isPlaying) return;
+            // Remove previous column highlight
+            document.querySelectorAll('.note-cell').forEach(cell => {
+                cell.classList.remove('playing-column');
+            });
             // Highlight current column
+            document.querySelectorAll(`.note-cell[data-col="${currentStep}"]`).forEach(cell => {
+                cell.classList.add('playing-column');
             });
             // Play notes in current column
                 if (grid[row][currentStep]) {
                     const scaleNotes = scales[scale];
                     const noteIndex = scaleNotes[11 - row] || 0;
+                    const noteNames = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
+                    const noteName = noteNames[noteIndex];
+                    const frequency = noteFrequencies[noteName] * Math.pow(2, octave - 4);
+                    playNote(frequency, (60 / tempo) * 0.8);
                     // Add visual feedback
                     const cell = document.querySelector(`.note-cell[data-row="${row}"][data-col="${currentStep}"]`);
             }
             currentStep = (currentStep + 1) % cols;
+        }
+        // Scheduler for precise timing
+        function schedulePlayback() {
+            clearInterval(schedulerInterval);
+            const interval = (60 / tempo) * 1000;
+            schedulerInterval = setInterval(playSequence, interval);
         }
         // Create virtual keyboard
             keyboard.innerHTML = '';
             const whiteKeys = ['C', 'D', 'E', 'F', 'G', 'A', 'B'];
+            const blackKeys = {
+                1: 'C#',
+                2: 'D#',
+                4: 'F#',
+                5: 'G#',
+                6: 'A#'
+            };
             // Create white keys
             whiteKeys.forEach((note, i) => {
                 const key = document.createElement('div');
+                key.className = 'white-key';
                 key.dataset.note = note;
+                key.dataset.key = Object.keys(keyMap).find(key => keyMap[key] === note);
+                key.innerHTML = `<span>${note}<br><small>${key.dataset.key || ''}</small></span>`;
                 key.addEventListener('mousedown', () => playKeyNote(note));
                 keyboard.appendChild(key);
                 // Add black key if needed
+                if (blackKeys[i+1]) {
                     const blackKey = document.createElement('div');
+                    blackKey.className = 'black-key';
+                    blackKey.dataset.note = blackKeys[i+1];
+                    blackKey.dataset.key = Object.keys(keyMap).find(key => keyMap[key] === blackKeys[i+1]);
+                    blackKey.innerHTML = `<span>${blackKeys[i+1]}<br><small>${blackKey.dataset.key || ''}</small></span>`;
+                    blackKey.style.left = `${(i * 50) + 35}px`;
+                    blackKey.addEventListener('mousedown', () => playKeyNote(blackKeys[i+1]));
                     keyboard.appendChild(blackKey);
                 }
             });
         // Play note from keyboard
         function playKeyNote(note) {
             const frequency = noteFrequencies[note] * Math.pow(2, octave - 4);
+            playNote(frequency, 0.5, 0.8);
             // Visual feedback
+            const key = document.querySelector(`.white-key[data-note="${note}"], .black-key[data-note="${note}"]`);
             if (key) {
                 key.classList.add('active');
                 setTimeout(() => key.classList.remove('active'), 200);
             }
         }
+        // Handle keyboard events
+        function handleKeyDown(e) {
+            const key = e.key.toLowerCase();
+            if (keyMap[key]) {
+                playKeyNote(keyMap[key]);
+                // Visual feedback
+                const keyElement = document.querySelector(`.white-key[data-key="${key}"], .black-key[data-key="${key}"]`);
+                if (keyElement) {
+                    keyElement.classList.add('active');
+                }
+            }
+        }
+        function handleKeyUp(e) {
+            const key = e.key.toLowerCase();
+            if (keyMap[key]) {
+                const keyElement = document.querySelector(`.white-key[data-key="${key}"], .black-key[data-key="${key}"]`);
+                if (keyElement) {
+                    keyElement.classList.remove('active');
+                }
+            }
+        }
         // Event listeners
         document.getElementById('playBtn').addEventListener('click', () => {
+            // Resume audio context on first interaction
+            if (audioCtx.state === 'suspended') {
+                audioCtx.resume();
+            }
             isPlaying = !isPlaying;
             document.getElementById('playBtn').innerHTML = isPlaying ?
                 '<i data-feather="pause" class="mr-2"></i> Pause' :
             if (isPlaying) {
                 currentStep = 0;
+                schedulePlayback();
+            } else {
+                clearInterval(schedulerInterval);
+                // Remove column highlights
+                document.querySelectorAll('.note-cell').forEach(cell => {
+                    cell.classList.remove('playing-column');
+                });
             }
         });
         document.getElementById('tempo').addEventListener('input', (e) => {
             tempo = e.target.value;
             document.getElementById('tempo-value').textContent = `${tempo} BPM`;
+            if (isPlaying) {
+                schedulePlayback();
+            }
+        });
+        document.getElementById('volume').addEventListener('input', (e) => {
+            volume = e.target.value;
+            document.getElementById('volume-value').textContent = `${volume}%`;
+            masterGain.gain.value = volume / 100;
         });
         document.getElementById('octave-down').addEventListener('click', () => {
             createKeyboard();
         });
+        // Keyboard event listeners
+        document.addEventListener('keydown', handleKeyDown);
+        document.addEventListener('keyup', handleKeyUp);
         // Initialize
         createGrid();
         createKeyboard();
+        feather.replace();
     </script>
 </body>
 </html>