Update index.html

index.html

@@ -379,6 +379,14 @@ class AdvancedMelodyGenerator {
         this.sequence = [];
         this.isPlaying = false;
         this.currentPart = null;
+        this.key = 'C'; // default key
+        this.scale = 'major'; // default scale
+        this.complexity = 5; // default complexity
+        this.baseOctave = 4; // default base octave
+        this.direction = 'mixed'; // default direction
+        this.tempo = 120; // default tempo
+        this.timeSignature = [4, 4]; // default time signature
+        this.swing = 0; // default swing
         this.initUI();
         this.setupEventListeners();
     }
@@ -400,10 +408,18 @@ class AdvancedMelodyGenerator {
             }
         }
 
-        document.querySelectorAll('input[type="range"]').forEach(input => {
-            const display = document.getElementById(`${input.id}-value`);
-            if (display) display.textContent = input.value;
-        });
+        // Set initial displayed values for sliders and selectors
+        document.getElementById('tempo').value = this.tempo;
+        document.getElementById('tempo-value').textContent = this.tempo;
+        document.getElementById('complexity').value = this.complexity;
+        document.getElementById('complexity-value').textContent = this.complexity;
+        document.getElementById('octave').value = this.baseOctave;
+        document.getElementById('octave-value').textContent = this.baseOctave;
+        document.getElementById('direction').value = this.direction;
+        document.getElementById('key').value = this.key;
+        document.getElementById('scale').value = this.scale;
+        document.getElementById('timeSignature').value = this.timeSignature.join('/');
+        document.getElementById('swing').value = this.swing * 100;
     }
 
     getAllNotes() {
@@ -443,6 +459,45 @@ class AdvancedMelodyGenerator {
         document.getElementById('chordProgression').onchange = (e) => {
             this.updateChordDisplay(e.target.value);
         };
+
+        // Add event listeners for other controls
+        document.getElementById('tempo').oninput = (e) => {
+            this.tempo = e.target.value;
+            Tone.Transport.bpm.value = this.tempo;
+            document.getElementById('tempo-value').textContent = this.tempo;
+        };
+
+        document.getElementById('timeSignature').onchange = (e) => {
+            this.timeSignature = e.target.value.split('/');
+            Tone.Transport.timeSignature = this.timeSignature;
+        };
+
+        document.getElementById('swing').oninput = (e) => {
+            this.swing = e.target.value / 100;
+            Tone.Transport.swing = this.swing;
+        };
+
+        document.getElementById('complexity').oninput = (e) => {
+            this.complexity = e.target.value;
+            document.getElementById('complexity-value').textContent = this.complexity;
+        };
+
+        document.getElementById('octave').oninput = (e) => {
+            this.baseOctave = e.target.value;
+            document.getElementById('octave-value').textContent = this.baseOctave;
+        };
+
+        document.getElementById('direction').onchange = (e) => {
+            this.direction = e.target.value;
+        };
+
+        document.getElementById('key').onchange = (e) => {
+            this.key = e.target.value;
+        };
+
+        document.getElementById('scale').onchange = (e) => {
+            this.scale = e.target.value;
+        };
     }
 
     updateChordDisplay(progression) {
@@ -495,14 +550,10 @@ class AdvancedMelodyGenerator {
         this.stop();
         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);
         const progression = document.getElementById('chordProgression').value;
 
-        const chords = this.getChordProgression(key, progression);
-        this.sequence = this.createMelodySequence(key, scale, complexity, baseOctave, chords);
+        const chords = this.getChordProgression(this.key, progression);
+        this.sequence = this.createMelodySequence(this.key, this.scale, this.complexity, this.baseOctave, chords);
         this.visualizeSequence();
     }
 
@@ -571,7 +622,7 @@ class AdvancedMelodyGenerator {
 
     play() {
         this.isPlaying = true;
-        Tone.Transport.bpm.value = document.getElementById('tempo').value;
+        Tone.Transport.bpm.value = this.tempo;
 
         if (this.currentPart) {
             this.currentPart.dispose();