Update index.html

index.html

@@ -110,6 +110,7 @@
             height: 500px;
             position: relative;
             overflow: hidden;
+            transform: scaleY(-1);
         }
 
         .grid {
@@ -288,196 +289,206 @@
 
     <script>
         class MelodyGenerator {
-            constructor() {
-                this.synth = new Tone.PolySynth(Tone.Synth).toDestination();
-                this.sequence = [];
-                this.isPlaying = false;
-                this.currentWaveform = 'sine';
-                
-                this.initUI();
-                this.setupEventListeners();
-            }
-
-            initUI() {
-                // Initialize grid
-                const grid = document.getElementById('grid');
-                for (let i = 0; i < 88; i++) {
-                    for (let j = 0; j < 32; j++) {
-                        const cell = document.createElement('div');
-                        cell.className = 'cell';
-                        cell.dataset.note = i;
-                        cell.dataset.time = j;
-                        cell.onclick = () => this.toggleCell(cell);
-                        grid.appendChild(cell);
-                    }
-                }
-
-                // Initialize value displays
-                document.querySelectorAll('input[type="range"]').forEach(input => {
-                    const display = document.getElementById(`${input.id}-value`);
-                    if (display) display.textContent = input.value;
-                });
-            }
-
-            setupEventListeners() {
-                document.getElementById('generate').onclick = () => this.generateMelody();
-                document.getElementById('play').onclick = () => this.togglePlay();
-                document.getElementById('stop').onclick = () => this.stop();
-                document.getElementById('download').onclick = () => this.downloadMIDI();
-
-                // Waveform selection
-                document.querySelectorAll('.wave-btn').forEach(btn => {
-                    btn.onclick = (e) => {
-                        document.querySelectorAll('.wave-btn').forEach(b => b.classList.remove('active'));
-                        e.target.classList.add('active');
-                        this.currentWaveform = e.target.dataset.wave;
-                        this.updateSynthSettings();
-                    };
-                });
-
-                // Range input updates
-                document.querySelectorAll('input[type="range"]').forEach(input => {
-                    input.oninput = (e) => {
-                        const display = document.getElementById(`${input.id}-value`);
-                        if (display) {
-                            display.textContent = input.id === 'tempo' ? 
-                                `${e.target.value} BPM` : e.target.value;
-                        }
-                    };
-                });
-            }
-
-            updateSynthSettings() {
-                this.synth.set({
-                    oscillator: { type: this.currentWaveform }
-                });
-            }
-
-            generateMelody() {
-                this.clearGrid();
-                const key = document.getElementById('key').value;
-                const scale = document.getElementById('scale').value;
-                const complexity = parseInt(document.getElementById('complexity').value);
-                const baseOctave = parseInt(document.getElementById('octave').value);
-
-                this.sequence = this.createMelodySequence(key, scale, complexity, baseOctave);
-                this.visualizeSequence();
-            }
-
-            createMelodySequence(key, scale, complexity, baseOctave) {
-                const noteCount = Math.floor(complexity * 4);
-                const sequence = [];
-                const scaleNotes = this.getScaleNotes(key, scale);
-
-                for (let i = 0; i < noteCount; i++) {
-                    const time = Math.floor(Math.random() * 32);
-                    const note = scaleNotes[Math.floor(Math.random() * scaleNotes.length)];
-                    sequence.push({
-                        note: `${note}${baseOctave}`,
-                        time: time,
-                        duration: 0.25
-                    });
-                }
-
-                return sequence;
-            }
-
-            getScaleNotes(key, scale) {
-                const notes = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
-                const scales = {
-                    major: [0, 2, 4, 5, 7, 9, 11],
-                    minor: [0, 2, 3, 5, 7, 8, 10],
-                    harmonicMinor: [0, 2, 3, 5, 7, 8, 11],
-                    dorian: [0, 2, 3, 5, 7, 9, 10],
-                    phrygian: [0, 1, 3, 5, 7, 8, 10],
-                    lydian: [0, 2, 4, 6, 7, 9, 11],
-                    mixolydian: [0, 2, 4, 5, 7, 9, 10]
-                };
-
-                const keyIndex = notes.indexOf(key);
-                const scalePattern = scales[scale];
-                return scalePattern.map(interval => notes[(keyIndex + interval) % 12]);
-            }
-
-            visualizeSequence() {
-                this.sequence.forEach(note => {
-                    const noteIndex = this.getNoteIndex(note.note);
-                    const cell = document.querySelector(
-                        `.cell[data-note="${noteIndex}"][data-time="${note.time}"]`
-                    );
-                    if (cell) cell.classList.add('active');
-                });
-            }
-
-            getNoteIndex(note) {
-                const noteName = note.slice(0, -1);
-                const octave = parseInt(note.slice(-1));
-                const notes = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
-                return (octave * 12) + notes.indexOf(noteName);
+    constructor() {
+        this.synth = new Tone.PolySynth(Tone.Synth).toDestination();
+        this.sequence = [];
+        this.isPlaying = false;
+        this.currentWaveform = 'sine';
+        this.currentPart = null; // Store the current Tone.Part
+        this.initUI();
+        this.setupEventListeners();
+    }
+
+    initUI() {
+        // Initialize grid
+        const grid = document.getElementById('grid');
+        for (let i = 0; i < 88; i++) {
+            for (let j = 0; j < 32; j++) {
+                const cell = document.createElement('div');
+                cell.className = 'cell';
+                cell.dataset.note = i;
+                cell.dataset.time = j;
+                cell.onclick = () => this.toggleCell(cell);
+                grid.appendChild(cell);
             }
+        }
 
-            async togglePlay() {
-                if (this.isPlaying) {
-                    this.stop();
-                } else {
-                    await Tone.start();
-                    this.play();
+        // Initialize value displays
+        document.querySelectorAll('input[type="range"]').forEach(input => {
+            const display = document.getElementById(`${input.id}-value`);
+            if (display) display.textContent = input.value;
+        });
+    }
+
+    setupEventListeners() {
+        document.getElementById('generate').onclick = () => this.generateMelody();
+        document.getElementById('play').onclick = () => this.togglePlay();
+        document.getElementById('stop').onclick = () => this.stop();
+        document.getElementById('download').onclick = () => this.downloadMIDI();
+
+        // Waveform selection
+        document.querySelectorAll('.wave-btn').forEach(btn => {
+            btn.onclick = (e) => {
+                document.querySelectorAll('.wave-btn').forEach(b => b.classList.remove('active'));
+                e.target.classList.add('active');
+                this.currentWaveform = e.target.dataset.wave;
+                this.updateSynthSettings();
+            };
+        });
+
+        // Range input updates
+        document.querySelectorAll('input[type="range"]').forEach(input => {
+            input.oninput = (e) => {
+                const display = document.getElementById(`${input.id}-value`);
+                if (display) {
+                    display.textContent = input.id === 'tempo' ?
+                        `${e.target.value} BPM` : e.target.value;
                 }
-            }
-
-            play() {
-                this.isPlaying = true;
-                const tempo = document.getElementById('tempo').value;
-                Tone.Transport.bpm.value = tempo;
-
-                const part = new Tone.Part(((time, note) => {
-                    this.synth.triggerAttackRelease(note.note, note.duration, time);
-                }), this.sequence.map(note => ({
-                    time: note.time * 0.25,
-                    note: note.note,
-                    duration: note.duration
-                }))).start(0);
-
-                Tone.Transport.start();
-            }
-
-            stop() {
-                this.isPlaying = false;
-                Tone.Transport.stop();
-                Tone.Transport.position = 0;
-            }
+            };
+        });
+    }
+
+    updateSynthSettings() {
+        this.synth.set({
+            oscillator: { type: this.currentWaveform }
+        });
+    }
+
+    generateMelody() {
+        this.stop(); // Stop any existing playback
+        this.clearGrid();
+        const key = document.getElementById('key').value;
+        const scale = document.getElementById('scale').value;
+        const complexity = parseInt(document.getElementById('complexity').value);
+        const baseOctave = parseInt(document.getElementById('octave').value);
+
+        this.sequence = this.createMelodySequence(key, scale, complexity, baseOctave);
+        this.visualizeSequence();
+    }
+
+    createMelodySequence(key, scale, complexity, baseOctave) {
+        const noteCount = Math.floor(complexity * 4);
+        const sequence = [];
+        const scaleNotes = this.getScaleNotes(key, scale);
+
+        for (let i = 0; i < noteCount; i++) {
+            const time = Math.floor(Math.random() * 32);
+            const note = scaleNotes[Math.floor(Math.random() * scaleNotes.length)];
+            sequence.push({
+                note: `${note}${baseOctave}`,
+                time: time,
+                duration: 0.25
+            });
+        }
 
-            toggleCell(cell) {
-                cell.classList.toggle('active');
-            }
+        return sequence;
+    }
+
+    getScaleNotes(key, scale) {
+        const notes = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
+        const scales = {
+            major: [0, 2, 4, 5, 7, 9, 11],
+            minor: [0, 2, 3, 5, 7, 8, 10],
+            harmonicMinor: [0, 2, 3, 5, 7, 8, 11],
+            dorian: [0, 2, 3, 5, 7, 9, 10],
+            phrygian: [0, 1, 3, 5, 7, 8, 10],
+            lydian: [0, 2, 4, 6, 7, 9, 11],
+            mixolydian: [0, 2, 4, 5, 7, 9, 10]
+        };
+
+        const keyIndex = notes.indexOf(key);
+        const scalePattern = scales[scale];
+        return scalePattern.map(interval => notes[(keyIndex + interval) % 12]);
+    }
+
+    visualizeSequence() {
+        this.sequence.forEach(note => {
+            const noteIndex = this.getNoteIndex(note.note);
+            const cell = document.querySelector(
+                `.cell[data-note="${noteIndex}"][data-time="${note.time}"]`
+            );
+            if (cell) cell.classList.add('active');
+        });
+    }
+
+    getNoteIndex(note) {
+        const noteName = note.slice(0, -1);
+        const octave = parseInt(note.slice(-1));
+        const notes = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
+        return (octave * 12) + notes.indexOf(noteName);
+    }
+
+    async togglePlay() {
+        if (this.isPlaying) {
+            this.stop();
+        } else {
+            await Tone.start();
+            this.play();
+        }
+    }
 
-            clearGrid() {
-                document.querySelectorAll('.cell').forEach(cell => {
-                    cell.classList.remove('active');
-                });
-            }
+    play() {
+        if (this.currentPart) {
+            this.currentPart.stop();
+            this.currentPart.dispose();
+        }
 
-            downloadMIDI() {
-                // Basic MIDI file structure
-                const midiData = [
-                    0x4D, 0x54, 0x68, 0x64, // MThd
-                    0x00, 0x00, 0x00, 0x06, // Header size
-                    0x00, 0x01, // Format
-                    0x00, 0x01, // Tracks
-                    0x01, 0x80  // Division
-                ];
-
-                const blob = new Blob([new Uint8Array(midiData)], { type: 'audio/midi' });
-                const url = window.URL.createObjectURL(blob);
-                const a = document.createElement('a');
-                a.href = url;
-                a.download = 'melody.mid';
-                a.click();
-                window.URL.revokeObjectURL(url);
-            }
+        this.isPlaying = true;
+        const tempo = document.getElementById('tempo').value;
+        Tone.Transport.bpm.value = tempo;
+
+        this.currentPart = new Tone.Part(((time, note) => {
+            this.synth.triggerAttackRelease(note.note, note.duration, time);
+        }), this.sequence.map(note => ({
+            time: note.time * 0.25,
+            note: note.note,
+            duration: note.duration
+        }))).start(0);
+
+        Tone.Transport.start();
+    }
+
+    stop() {
+        this.isPlaying = false;
+        if (this.currentPart) {
+            this.currentPart.stop();
+            this.currentPart.dispose();
         }
+        Tone.Transport.stop();
+        Tone.Transport.position = 0;
+    }
+
+    toggleCell(cell) {
+        cell.classList.toggle('active');
+    }
+
+    clearGrid() {
+        document.querySelectorAll('.cell').forEach(cell => {
+            cell.classList.remove('active');
+        });
+    }
+
+    downloadMIDI() {
+        // Basic MIDI file structure
+        const midiData = [
+            0x4D, 0x54, 0x68, 0x64, // MThd
+            0x00, 0x00, 0x00, 0x06, // Header size
+            0x00, 0x01, // Format
+            0x00, 0x01, // Tracks
+            0x01, 0x80  // Division
+        ];
+
+        const blob = new Blob([new Uint8Array(midiData)], { type: 'audio/midi' });
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'melody.mid';
+        a.click();
+        window.URL.revokeObjectURL(url);
+    }
+}
 
         const generator = new MelodyGenerator();
     </script>
 </body>
-</html><script async data-explicit-opt-in="true" data-cookie-opt-in="true" src="https://vercel.live/_next-live/feedback/feedback.js"></script>
+</html>