Ajout du sampler et de l'input

src/App.svelte

@@ -4,6 +4,7 @@
   import VUMeter from "./lib/components/VUMeter.svelte";
   import { engines } from "./lib/audio/engines/registry";
   import type { SynthEngine } from "./lib/audio/engines/SynthEngine";
+  import type { EngineType } from "./lib/audio/engines/SynthEngine";
   import { AudioService } from "./lib/audio/services/AudioService";
   import { downloadWAV } from "./lib/audio/utils/WAVEncoder";
   import {
@@ -18,9 +19,12 @@
     getAllProcessors,
   } from "./lib/audio/processors/registry";
   import type { AudioProcessor } from "./lib/audio/processors/AudioProcessor";
+  import { Sample } from "./lib/audio/engines/Sample";
+  import { Input } from "./lib/audio/engines/Input";
 
   let currentEngineIndex = 0;
   let engine = engines[currentEngineIndex];
+  let engineType: EngineType = engine.getType();
 
   const audioService = new AudioService();
 
@@ -34,9 +38,17 @@
   let isProcessed = false;
   let showProcessorPopup = false;
   let popupTimeout: ReturnType<typeof setTimeout> | null = null;
+  let isRecording = false;
+  let isDragOver = false;
 
   const allProcessors = getAllProcessors();
 
+  $: showDuration = engineType !== 'sample';
+  $: showRandomButton = engineType === 'generative';
+  $: showRecordButton = engineType === 'input';
+  $: showFileDropZone = engineType === 'sample' && !currentBuffer;
+  $: showMutateButton = engineType === 'generative' && !isProcessed && currentBuffer;
+
   onMount(() => {
     audioService.setVolume(volume);
     audioService.setPlaybackUpdateCallback((position) => {
@@ -157,7 +169,83 @@
   function switchEngine(index: number) {
     currentEngineIndex = index;
     engine = engines[index];
-    generateRandom();
+    engineType = engine.getType();
+    currentBuffer = null;
+    currentParams = null;
+    isProcessed = false;
+
+    if (engineType === 'generative') {
+      generateRandom();
+    }
+  }
+
+  async function handleFileInput(event: Event) {
+    const input = event.target as HTMLInputElement;
+    if (!input.files || input.files.length === 0) return;
+
+    const file = input.files[0];
+    await loadAudioFile(file);
+  }
+
+  async function loadAudioFile(file: File) {
+    if (!(engine instanceof Sample)) return;
+
+    try {
+      await engine.loadFile(file);
+      currentParams = engine.randomParams();
+      waveformColor = generateRandomColor();
+      isProcessed = false;
+      regenerateBuffer();
+    } catch (error) {
+      console.error('Failed to load audio file:', error);
+      alert(`Failed to load audio file: ${error}`);
+    }
+  }
+
+  async function recordAudio() {
+    if (!(engine instanceof Input)) return;
+    if (isRecording) return;
+
+    try {
+      isRecording = true;
+      await engine.record(duration);
+      currentParams = engine.randomParams();
+      waveformColor = generateRandomColor();
+      isProcessed = false;
+      regenerateBuffer();
+    } catch (error) {
+      console.error('Failed to record audio:', error);
+      alert(`Failed to record audio: ${error}`);
+    } finally {
+      isRecording = false;
+    }
+  }
+
+  function handleDrop(event: DragEvent) {
+    event.preventDefault();
+    isDragOver = false;
+
+    if (!event.dataTransfer) return;
+    const files = event.dataTransfer.files;
+    if (files.length === 0) return;
+
+    const file = files[0];
+    if (!file.type.startsWith('audio/')) {
+      alert('Please drop an audio file');
+      return;
+    }
+
+    loadAudioFile(file);
+  }
+
+  function handleDragOver(event: DragEvent) {
+    event.preventDefault();
+    isDragOver = true;
+  }
+
+  function handleDragLeave(event: DragEvent) {
+    event.preventDefault();
+    isDragOver = false;
   }
 
   async function closeModal() {
@@ -199,7 +287,7 @@
       case "arrowright":
         event.preventDefault();
         const durationIncrement = event.shiftKey ? 1 : 0.05;
-        duration = Math.min(8, duration + durationIncrement);
+        duration = Math.min(32, duration + durationIncrement);
         saveDuration(duration);
         break;
       case "arrowdown":
@@ -237,18 +325,20 @@
       {/each}
     </div>
     <div class="controls-group">
-      <div class="slider-control duration-slider">
-        <label for="duration">Duration: {duration.toFixed(2)}s</label>
-        <input
-          id="duration"
-          type="range"
-          min="0.05"
-          max="8"
-          step="0.01"
-          value={duration}
-          oninput={handleDurationChange}
-        />
-      </div>
+      {#if showDuration}
+        <div class="slider-control duration-slider">
+          <label for="duration">Duration: {duration.toFixed(2)}s</label>
+          <input
+            id="duration"
+            type="range"
+            min="0.05"
+            max="32"
+            step="0.01"
+            value={duration}
+            oninput={handleDurationChange}
+          />
+        </div>
+      {/if}
       <div class="slider-control">
         <label for="volume">Volume</label>
         <input
@@ -266,39 +356,75 @@
 
   <div class="main-area">
     <div class="waveform-container">
-      <WaveformDisplay
-        buffer={currentBuffer}
-        color={waveformColor}
-        {playbackPosition}
-        onclick={replaySound}
-      />
+      {#if showFileDropZone}
+        <div
+          class="file-drop-zone"
+          class:drag-over={isDragOver}
+          role="button"
+          tabindex="0"
+          ondrop={handleDrop}
+          ondragover={handleDragOver}
+          ondragleave={handleDragLeave}
+        >
+          <div class="drop-zone-content">
+            <h2>Drop an audio file here</h2>
+            <label for="file-input" class="file-input-label">
+              <input
+                id="file-input"
+                type="file"
+                accept="audio/*"
+                onchange={handleFileInput}
+                style="display: none;"
+              />
+              Choose a file
+            </label>
+          </div>
+        </div>
+      {:else}
+        <WaveformDisplay
+          buffer={currentBuffer}
+          color={waveformColor}
+          {playbackPosition}
+          onclick={replaySound}
+        />
+      {/if}
+
       <div class="bottom-controls">
-        <button onclick={generateRandom}>Random (R)</button>
-        {#if !isProcessed}
+        {#if showRandomButton}
+          <button onclick={generateRandom}>Random (R)</button>
+        {/if}
+        {#if showRecordButton}
+          <button onclick={recordAudio} disabled={isRecording}>
+            {isRecording ? 'Recording...' : 'Record'}
+          </button>
+        {/if}
+        {#if showMutateButton}
           <button onclick={mutate}>Mutate (M)</button>
         {/if}
-        <div
-          class="process-button-container"
-          role="group"
-          onmouseenter={handlePopupMouseEnter}
-          onmouseleave={handlePopupMouseLeave}
-        >
-          <button onclick={processSound}>Process (P)</button>
-          {#if showProcessorPopup}
-            <div class="processor-popup">
-              {#each allProcessors as processor}
-                <button
-                  class="processor-tile"
-                  data-description={processor.getDescription()}
-                  onclick={() => processWithSpecificProcessor(processor)}
-                >
-                  {processor.getName()}
-                </button>
-              {/each}
-            </div>
-          {/if}
-        </div>
-        <button onclick={download}>Download (D)</button>
+        {#if currentBuffer}
+          <div
+            class="process-button-container"
+            role="group"
+            onmouseenter={handlePopupMouseEnter}
+            onmouseleave={handlePopupMouseLeave}
+          >
+            <button onclick={processSound}>Process (P)</button>
+            {#if showProcessorPopup}
+              <div class="processor-popup">
+                {#each allProcessors as processor}
+                  <button
+                    class="processor-tile"
+                    data-description={processor.getDescription()}
+                    onclick={() => processWithSpecificProcessor(processor)}
+                  >
+                    {processor.getName()}
+                  </button>
+                {/each}
+              </div>
+            {/if}
+          </div>
+          <button onclick={download}>Download (D)</button>
+        {/if}
       </div>
     </div>
     <div class="vu-meter-container">
@@ -601,9 +727,9 @@
     padding: 0.75rem;
     z-index: 1000;
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(4, 1fr);
     gap: 0.5rem;
-    width: 450px;
+    width: 600px;
     margin-bottom: 0.5rem;
   }
 
@@ -652,4 +778,56 @@
   .processor-tile:hover::after {
     opacity: 1;
   }
+
+  .file-drop-zone {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px dashed #444;
+    background-color: #0a0a0a;
+    transition: all 0.2s;
+  }
+
+  .file-drop-zone.drag-over {
+    border-color: #646cff;
+    background-color: #1a1a1a;
+  }
+
+  .drop-zone-content {
+    text-align: center;
+    color: #ccc;
+  }
+
+  .drop-zone-content h2 {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    color: #fff;
+  }
+
+  .drop-zone-content p {
+    margin: 1rem 0;
+    font-size: 1rem;
+  }
+
+  .file-input-label {
+    display: inline-block;
+    padding: 0.75rem 1.5rem;
+    background-color: #646cff;
+    color: #fff;
+    border: 1px solid #646cff;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    font-size: 1rem;
+  }
+
+  .file-input-label:hover {
+    background-color: #535bf2;
+  }
+
+  button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 </style>