its not initializing properly

script.js

@@ -16,11 +16,38 @@ function initAudioContext() {
         Tone.start();
         audioContextStarted = true;
         console.log('Audio context started');
+        return true;
     }
+    return false;
 }
 
 // Setup Tone.js components
 function setupSynth() {
+    if (!audioContextStarted) {
+        console.warn('Audio context not started yet');
+        return false;
+    }
+    
+    // Clean up existing components if they exist
+    if (synth) {
+        synth.dispose();
+    }
+    if (filter) {
+        filter.dispose();
+    }
+    if (reverb) {
+        reverb.dispose();
+    }
+    if (distortion) {
+        distortion.dispose();
+    }
+    if (delay) {
+        delay.dispose();
+    }
+    if (filterEnvelope) {
+        filterEnvelope.dispose();
+    }
+    
     // Create effects
     reverb = new Tone.Reverb({
         decay: 2,
@@ -74,6 +101,7 @@ function setupSynth() {
     synth.connect(analyser);
     
     console.log('Synth initialized');
+    return true;
 }
 // MIDI handling
 let midiAccess = null;
@@ -509,7 +537,6 @@ function setupADSRVisualizer() {
     // Make drawADSR accessible globally for updates
     window.drawADSR = drawADSR;
 }
-
 // Initialize everything when page loads
 document.addEventListener('DOMContentLoaded', () => {
     // Setup UI controls
@@ -517,14 +544,19 @@ document.addEventListener('DOMContentLoaded', () => {
     
     // Setup visualizers
     setupVisualizer();
-    setupADSRVisualizer();
+    // setupADSRVisualizer(); // This function doesn't exist, using draw functions directly
     
-    // Setup synth
-    setupSynth();
+    // Initial draw of ADSR envelopes
+    drawADSR();
+    drawFilterEnvelope();
     
     // MIDI connection button
     document.getElementById('midi-connect-btn').addEventListener('click', () => {
-        initAudioContext();
+        const wasStarted = initAudioContext();
+        if (wasStarted) {
+            setupSynth();
+        }
+        
         if (navigator.requestMIDIAccess) {
             navigator.requestMIDIAccess()
                 .then(onMIDISuccess, onMIDIFailure);
@@ -533,3 +565,169 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     });
 });
+
+// Add missing ADSR drawing functions
+function drawADSR() {
+    const canvas = document.getElementById('amp-envelope-editor');
+    if (!canvas) return;
+    
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+    
+    // Set canvas size
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = canvas.clientWidth * dpr;
+    canvas.height = canvas.clientHeight * dpr;
+    ctx.scale(dpr, dpr);
+    
+    // Clear canvas
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    
+    // Draw grid
+    ctx.strokeStyle = 'rgba(6, 182, 212, 0.1)';
+    ctx.lineWidth = 1;
+    
+    const width = canvas.clientWidth;
+    const height = canvas.clientHeight;
+    
+    // Vertical lines
+    for (let x = 0; x < width; x += 20) {
+        ctx.beginPath();
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, height);
+        ctx.stroke();
+    }
+    
+    // Horizontal lines
+    for (let y = 0; y < height; y += 20) {
+        ctx.beginPath();
+        ctx.moveTo(0, y);
+        ctx.lineTo(width, y);
+        ctx.stroke();
+    }
+    
+    // Draw ADSR envelope
+    const attack = parseFloat(document.getElementById('envelope-attack').value);
+    const decay = parseFloat(document.getElementById('envelope-decay').value);
+    const sustain = parseFloat(document.getElementById('envelope-sustain').value);
+    const release = parseFloat(document.getElementById('envelope-release').value);
+    
+    // Normalize values for visualization (max 5 seconds for attack/decay, 10 for release)
+    const attackX = (attack / 5) * width * 0.2;
+    const decayX = (decay / 5) * width * 0.2;
+    const sustainX = width * 0.4; // Fixed sustain time
+    const releaseX = (release / 10) * width * 0.2;
+    
+    const sustainY = height - (sustain * height);
+    
+    ctx.beginPath();
+    ctx.lineWidth = 3;
+    ctx.strokeStyle = '#06b6d4'; // cyan-500
+    
+    // Start at 0
+    ctx.moveTo(0, height);
+    
+    // Attack
+    ctx.lineTo(attackX, 0);
+    
+    // Decay
+    ctx.lineTo(attackX + decayX, sustainY);
+    
+    // Sustain
+    ctx.lineTo(attackX + decayX + sustainX, sustainY);
+    
+    // Release
+    ctx.lineTo(attackX + decayX + sustainX + releaseX, height);
+    
+    ctx.stroke();
+}
+
+function drawFilterEnvelope() {
+    const canvas = document.getElementById('filter-envelope-editor');
+    if (!canvas) return;
+    
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+    
+    // Set canvas size
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = canvas.clientWidth * dpr;
+    canvas.height = canvas.clientHeight * dpr;
+    ctx.scale(dpr, dpr);
+    
+    // Clear canvas
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    
+    // Draw grid
+    ctx.strokeStyle = 'rgba(6, 182, 212, 0.1)';
+    ctx.lineWidth = 1;
+    
+    const width = canvas.clientWidth;
+    const height = canvas.clientHeight;
+    
+    // Vertical lines
+    for (let x = 0; x < width; x += 20) {
+        ctx.beginPath();
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, height);
+        ctx.stroke();
+    }
+    
+    // Horizontal lines
+    for (let y = 0; y < height; y += 20) {
+        ctx.beginPath();
+        ctx.moveTo(0, y);
+        ctx.lineTo(width, y);
+        ctx.stroke();
+    }
+    
+    // Draw ADSR envelope
+    const attack = parseFloat(document.getElementById('filter-attack').value);
+    const decay = parseFloat(document.getElementById('filter-decay').value);
+    const sustain = parseFloat(document.getElementById('filter-sustain').value);
+    const release = parseFloat(document.getElementById('filter-release').value);
+    
+    // Normalize values for visualization (max 5 seconds for attack/decay, 10 for release)
+    const attackX = (attack / 5) * width * 0.2;
+    const decayX = (decay / 5) * width * 0.2;
+    const sustainX = width * 0.4; // Fixed sustain time
+    const releaseX = (release / 10) * width * 0.2;
+    
+    const sustainY = height - (sustain * height);
+    
+    ctx.beginPath();
+    ctx.lineWidth = 3;
+    ctx.strokeStyle = '#06b6d4'; // cyan-500
+    
+    // Start at 0
+    ctx.moveTo(0, height);
+    
+    // Attack
+    ctx.lineTo(attackX, 0);
+    
+    // Decay
+    ctx.lineTo(attackX + decayX, sustainY);
+    
+    // Sustain
+    ctx.lineTo(attackX + decayX + sustainX, sustainY);
+    
+    // Release
+    ctx.lineTo(attackX + decayX + sustainX + releaseX, height);
+    
+    ctx.stroke();
+}
+
+// Update envelope drawing when controls change
+document.addEventListener('DOMContentLoaded', () => {
+    // Amplitude envelope controls
+    document.getElementById('envelope-attack').addEventListener('input', drawADSR);
+    document.getElementById('envelope-decay').addEventListener('input', drawADSR);
+    document.getElementById('envelope-sustain').addEventListener('input', drawADSR);
+    document.getElementById('envelope-release').addEventListener('input', drawADSR);
+    
+    // Filter envelope controls
+    document.getElementById('filter-attack').addEventListener('input', drawFilterEnvelope);
+    document.getElementById('filter-decay').addEventListener('input', drawFilterEnvelope);
+    document.getElementById('filter-sustain').addEventListener('input', drawFilterEnvelope);
+    document.getElementById('filter-release').addEventListener('input', drawFilterEnvelope);
+});