Updated script that fixes the main problems.

Hey Kolaslab, Ive fixed some problems in the script. Using this updated html, the audio plays only the pattern displayed in the UI, so no more layering up each time play is pressed.
Also, the midi pattern is being displayed with the correct orientation. (it was upside down)

I'd really appreciate if you could update the space to use this edited code so people can appreciate the tool to its full potential! :)

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>