Cleaning the codebase

src/App.svelte

@@ -2,63 +2,81 @@
   import { onMount } from "svelte";
   import WaveformDisplay from "./lib/components/WaveformDisplay.svelte";
   import VUMeter from "./lib/components/VUMeter.svelte";
+  import WelcomeModal from "./lib/components/WelcomeModal.svelte";
+  import ProcessorPopup from "./lib/components/ProcessorPopup.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 {
+  import { loadVolume, saveVolume, loadDuration, saveDuration } from "./lib/utils/settings";
-    loadVolume,
-    saveVolume,
-    loadDuration,
-    saveDuration,
-  } from "./lib/utils/settings";
   import { generateRandomColor } from "./lib/utils/colors";
-  import {
+  import { getRandomProcessor } from "./lib/audio/processors/registry";
-    getRandomProcessor,
-    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";
+  import { createKeyboardHandler } from "./lib/utils/keyboard";
 
-  let currentEngineIndex = 0;
+  let currentEngineIndex = $state(0);
-  let engine = engines[currentEngineIndex];
+  const engine = $derived(engines[currentEngineIndex]);
-  let engineType: EngineType = engine.getType();
+  const engineType = $derived(engine.getType());
-
   const audioService = new AudioService();
 
-  let currentParams: any = null;
+  let currentParams = $state<any>(null);
-  let currentBuffer: AudioBuffer | null = null;
+  let currentBuffer = $state<AudioBuffer | null>(null);
-  let duration = loadDuration();
+  let duration = $state(loadDuration());
-  let volume = loadVolume();
+  let volume = $state(loadVolume());
-  let playbackPosition = -1;
+  let playbackPosition = $state(-1);
-  let waveformColor = generateRandomColor();
+  let waveformColor = $state(generateRandomColor());
-  let showModal = true;
+  let showModal = $state(true);
-  let isProcessed = false;
+  let isProcessed = $state(false);
-  let showProcessorPopup = false;
+  let showProcessorPopup = $state(false);
-  let popupTimeout: ReturnType<typeof setTimeout> | null = null;
+  let popupTimeout = $state<ReturnType<typeof setTimeout> | null>(null);
-  let isRecording = false;
+  let isRecording = $state(false);
-  let isDragOver = false;
+  let isDragOver = $state(false);
 
-  const allProcessors = getAllProcessors().sort((a, b) =>
+  const showDuration = $derived(engineType !== 'sample');
-    a.getName().localeCompare(b.getName())
+  const showRandomButton = $derived(engineType === 'generative');
-  );
+  const showRecordButton = $derived(engineType === 'input');
+  const showFileDropZone = $derived(engineType === 'sample' && !currentBuffer);
+  const showMutateButton = $derived(engineType === 'generative' && !isProcessed && currentBuffer);
 
-  $: showDuration = engineType !== 'sample';
+  $effect(() => {
-  $: showRandomButton = engineType === 'generative';
+    audioService.setVolume(volume);
-  $: showRecordButton = engineType === 'input';
+    saveVolume(volume);
-  $: showFileDropZone = engineType === 'sample' && !currentBuffer;
+  });
-  $: showMutateButton = engineType === 'generative' && !isProcessed && currentBuffer;
+
+  $effect(() => {
+    saveDuration(duration);
+  });
 
   onMount(() => {
-    audioService.setVolume(volume);
     audioService.setPlaybackUpdateCallback((position) => {
       playbackPosition = position;
     });
     generateRandom();
   });
 
+  const keyboardHandler = createKeyboardHandler({
+    onMutate: mutate,
+    onRandom: generateRandom,
+    onProcess: processSound,
+    onDownload: download,
+    onDurationDecrease: (large) => {
+      duration = Math.max(0.05, duration - (large ? 1 : 0.05));
+    },
+    onDurationIncrease: (large) => {
+      duration = Math.min(32, duration + (large ? 1 : 0.05));
+    },
+    onVolumeDecrease: (large) => {
+      volume = Math.max(0, volume - (large ? 0.2 : 0.05));
+    },
+    onVolumeIncrease: (large) => {
+      volume = Math.min(1, volume + (large ? 0.2 : 0.05));
+    },
+    onEscape: () => showModal && closeModal(),
+  });
+
   function generateRandom() {
     currentParams = engine.randomParams();
     waveformColor = generateRandomColor();
@@ -98,42 +116,7 @@
 
   function processSound() {
     if (!currentBuffer) return;
-
+    applyProcessor(getRandomProcessor());
-    const processor = getRandomProcessor();
-    applyProcessor(processor);
-  }
-
-  function processWithSpecificProcessor(processor: AudioProcessor) {
-    if (!currentBuffer) return;
-
-    hideProcessorPopup();
-    applyProcessor(processor);
-  }
-
-  function handlePopupMouseEnter() {
-    if (popupTimeout) {
-      clearTimeout(popupTimeout);
-    }
-    showProcessorPopup = true;
-    popupTimeout = setTimeout(() => {
-      showProcessorPopup = false;
-    }, 2000);
-  }
-
-  function handlePopupMouseLeave() {
-    if (popupTimeout) {
-      clearTimeout(popupTimeout);
-    }
-    popupTimeout = setTimeout(() => {
-      showProcessorPopup = false;
-    }, 200);
-  }
-
-  function hideProcessorPopup() {
-    if (popupTimeout) {
-      clearTimeout(popupTimeout);
-    }
-    showProcessorPopup = false;
   }
 
   async function applyProcessor(processor: AudioProcessor) {
@@ -141,37 +124,16 @@
 
     const leftChannel = currentBuffer.getChannelData(0);
     const rightChannel = currentBuffer.getChannelData(1);
+    const [processedLeft, processedRight] = await processor.process(leftChannel, rightChannel);
 
-    const [processedLeft, processedRight] = await processor.process(
+    currentBuffer = audioService.createAudioBuffer([processedLeft, processedRight]);
-      leftChannel,
-      rightChannel,
-    );
-
-    currentBuffer = audioService.createAudioBuffer([
-      processedLeft,
-      processedRight,
-    ]);
     isProcessed = true;
     audioService.play(currentBuffer);
-  }
+    hideProcessorPopup();
-
-  function handleVolumeChange(event: Event) {
-    const target = event.target as HTMLInputElement;
-    volume = parseFloat(target.value);
-    audioService.setVolume(volume);
-    saveVolume(volume);
-  }
-
-  function handleDurationChange(event: Event) {
-    const target = event.target as HTMLInputElement;
-    duration = parseFloat(target.value);
-    saveDuration(duration);
   }
 
   function switchEngine(index: number) {
     currentEngineIndex = index;
-    engine = engines[index];
-    engineType = engine.getType();
     currentBuffer = null;
     currentParams = null;
     isProcessed = false;
@@ -183,10 +145,8 @@
 
   async function handleFileInput(event: Event) {
     const input = event.target as HTMLInputElement;
-    if (!input.files || input.files.length === 0) return;
+    if (!input.files?.length) return;
-
+    await loadAudioFile(input.files[0]);
-    const file = input.files[0];
-    await loadAudioFile(file);
   }
 
   async function loadAudioFile(file: File) {
@@ -205,8 +165,7 @@
   }
 
   async function recordAudio() {
-    if (!(engine instanceof Input)) return;
+    if (!(engine instanceof Input) || isRecording) return;
-    if (isRecording) return;
 
     try {
       isRecording = true;
@@ -227,9 +186,8 @@
     event.preventDefault();
     isDragOver = false;
 
-    if (!event.dataTransfer) return;
+    const files = event.dataTransfer?.files;
-    const files = event.dataTransfer.files;
+    if (!files?.length) return;
-    if (files.length === 0) return;
 
     const file = files[0];
     if (!file.type.startsWith('audio/')) {
@@ -250,79 +208,41 @@
     isDragOver = false;
   }
 
+  function showPopup() {
+    if (popupTimeout) clearTimeout(popupTimeout);
+    showProcessorPopup = true;
+    popupTimeout = setTimeout(() => showProcessorPopup = false, 2000);
+  }
+
+  function scheduleHidePopup() {
+    if (popupTimeout) clearTimeout(popupTimeout);
+    popupTimeout = setTimeout(() => showProcessorPopup = false, 200);
+  }
+
+  function hideProcessorPopup() {
+    if (popupTimeout) clearTimeout(popupTimeout);
+    showProcessorPopup = false;
+  }
+
   async function closeModal() {
     showModal = false;
     await audioService.initialize();
   }
-
-  function handleKeydown(event: KeyboardEvent) {
-    // Ignore if typing in an input
-    if (event.target instanceof HTMLInputElement) return;
-
-    const key = event.key.toLowerCase();
-
-    // Close modal with Escape key
-    if (key === "escape" && showModal) {
-      closeModal();
-      return;
-    }
-
-    switch (key) {
-      case "m":
-        mutate();
-        break;
-      case "r":
-        generateRandom();
-        break;
-      case "p":
-        processSound();
-        break;
-      case "s":
-        download();
-        break;
-      case "arrowleft":
-        event.preventDefault();
-        const durationDecrement = event.shiftKey ? 1 : 0.05;
-        duration = Math.max(0.05, duration - durationDecrement);
-        saveDuration(duration);
-        break;
-      case "arrowright":
-        event.preventDefault();
-        const durationIncrement = event.shiftKey ? 1 : 0.05;
-        duration = Math.min(32, duration + durationIncrement);
-        saveDuration(duration);
-        break;
-      case "arrowdown":
-        event.preventDefault();
-        const volumeDecrement = event.shiftKey ? 0.2 : 0.05;
-        volume = Math.max(0, volume - volumeDecrement);
-        audioService.setVolume(volume);
-        saveVolume(volume);
-        break;
-      case "arrowup":
-        event.preventDefault();
-        const volumeIncrement = event.shiftKey ? 0.2 : 0.05;
-        volume = Math.min(1, volume + volumeIncrement);
-        audioService.setVolume(volume);
-        saveVolume(volume);
-        break;
-    }
-  }
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
+<svelte:window onkeydown={keyboardHandler} />
 
 <div class="container">
   <div class="top-bar">
     <div class="mode-buttons">
-      {#each engines as engine, index}
+      {#each engines as currentEngine, index}
         <button
           class="engine-button"
           class:active={currentEngineIndex === index}
-          data-description={engine.getDescription()}
+          data-description={currentEngine.getDescription()}
           onclick={() => switchEngine(index)}
         >
-          {engine.getName()}
+          {currentEngine.getName()}
         </button>
       {/each}
     </div>
@@ -336,8 +256,7 @@
             min="0.05"
             max="32"
             step="0.01"
-            value={duration}
+            bind:value={duration}
-            oninput={handleDurationChange}
           />
         </div>
       {/if}
@@ -349,8 +268,7 @@
           min="0"
           max="1"
           step="0.01"
-          value={volume}
+          bind:value={volume}
-          oninput={handleVolumeChange}
         />
       </div>
     </div>
@@ -407,22 +325,12 @@
           <div
             class="process-button-container"
             role="group"
-            onmouseenter={handlePopupMouseEnter}
+            onmouseenter={showPopup}
-            onmouseleave={handlePopupMouseLeave}
+            onmouseleave={scheduleHidePopup}
           >
             <button onclick={processSound}>Process (P)</button>
             {#if showProcessorPopup}
-              <div class="processor-popup">
+              <ProcessorPopup onselect={applyProcessor} />
-                {#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>
@@ -435,46 +343,7 @@
   </div>
 
   {#if showModal}
-    <div
+    <WelcomeModal onclose={closeModal} />
-      class="modal-overlay"
-      role="button"
-      tabindex="0"
-      onclick={closeModal}
-      onkeydown={(e) => e.key === "Enter" && closeModal()}
-    >
-      <div
-        class="modal-content"
-        role="dialog"
-        aria-labelledby="modal-title"
-        tabindex="-1"
-        onclick={(e) => e.stopPropagation()}
-        onkeydown={(e) => e.stopPropagation()}
-      >
-        <h1 id="modal-title">Vending Machine</h1>
-        <p class="description">
-          Oh, looks like you found a sound vending machine. This one seems
-          slightly broken and it seems that you can get sounds for free... Have
-          fun!
-        </p>
-        <div class="modal-links">
-          <p>
-            Created by <a
-              href="https://raphaelforment.fr"
-              target="_blank"
-              rel="noopener noreferrer">Raphaël Forment (BuboBubo)</a
-            >
-          </p>
-          <p>
-            Licensed under <a
-              href="https://www.gnu.org/licenses/gpl-3.0.html"
-              target="_blank"
-              rel="noopener noreferrer">GPL 3.0</a
-            >
-          </p>
-        </div>
-        <button class="modal-close" onclick={closeModal}>Start</button>
-      </div>
-    </div>
   {/if}
 </div>
 
@@ -488,9 +357,8 @@
 
   .top-bar {
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
-    align-items: center;
+    gap: 0.75rem;
-    gap: 1rem;
     padding: 0.5rem;
     background-color: #1a1a1a;
     border-bottom: 1px solid #333;
@@ -499,11 +367,35 @@
   .mode-buttons {
     display: flex;
     gap: 0.5rem;
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: thin;
+    scrollbar-color: #444 transparent;
+    padding-bottom: 0.25rem;
+  }
+
+  .mode-buttons::-webkit-scrollbar {
+    height: 4px;
+  }
+
+  .mode-buttons::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .mode-buttons::-webkit-scrollbar-thumb {
+    background: #444;
+    border-radius: 0;
   }
 
   .engine-button {
     opacity: 0.7;
     position: relative;
+    flex-shrink: 0;
+    font-size: 0.85rem;
+    padding: 0.5rem 0.75rem;
+    white-space: nowrap;
+    min-width: calc(25vw - 1rem);
   }
 
   .engine-button:hover {
@@ -525,47 +417,111 @@
     border: 1px solid #444;
     color: #ccc;
     font-size: 0.85rem;
-    width: 30vw;
+    width: 200px;
+    max-width: 90vw;
     white-space: normal;
     word-wrap: break-word;
     pointer-events: none;
     opacity: 0;
     transition: opacity 0.2s;
     z-index: 1000;
-  }
+    display: none;
-
-  .engine-button:hover::after {
-    opacity: 1;
   }
 
   .controls-group {
     display: flex;
-    gap: 1rem;
+    flex-direction: column;
-    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
   }
 
   .slider-control {
     display: flex;
     align-items: center;
     gap: 0.5rem;
+    width: 100%;
   }
 
   .slider-control label {
-    font-size: 0.9rem;
+    font-size: 0.85rem;
     white-space: nowrap;
+    min-width: fit-content;
   }
 
   .slider-control input[type="range"] {
-    width: 100px;
+    flex: 1;
+    min-width: 0;
   }
 
-  .duration-slider input[type="range"] {
+  @media (min-width: 768px) {
-    width: 300px;
+    .top-bar {
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      gap: 1rem;
+    }
+
+    .mode-buttons {
+      flex: 1;
+      overflow-x: auto;
+      padding-bottom: 0;
+      max-width: 60%;
+    }
+
+    .engine-button {
+      font-size: 0.9rem;
+      padding: 0.6rem 1rem;
+      min-width: auto;
+    }
+
+    .engine-button::after {
+      display: block;
+      width: 250px;
+    }
+
+    .engine-button:hover::after {
+      opacity: 1;
+    }
+
+    .controls-group {
+      flex-direction: row;
+      width: auto;
+      flex-shrink: 0;
+    }
+
+    .slider-control input[type="range"] {
+      width: 80px;
+    }
+
+    .duration-slider input[type="range"] {
+      width: 150px;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .mode-buttons {
+      max-width: 65%;
+    }
+
+    .slider-control input[type="range"] {
+      width: 100px;
+    }
+
+    .duration-slider input[type="range"] {
+      width: 200px;
+    }
+  }
+
+  @media (min-width: 1280px) {
+    .duration-slider input[type="range"] {
+      width: 300px;
+    }
   }
 
   .main-area {
     flex: 1;
     display: flex;
+    flex-direction: column;
     background-color: #0a0a0a;
     overflow: hidden;
   }
@@ -577,22 +533,77 @@
     align-items: center;
     justify-content: center;
     overflow: hidden;
+    min-height: 200px;
   }
 
   .vu-meter-container {
-    width: 5%;
+    width: 100%;
-    min-width: 40px;
+    height: 60px;
-    max-width: 80px;
+    border-top: 1px solid #333;
-    border-left: 1px solid #333;
   }
 
   .bottom-controls {
     position: absolute;
-    bottom: 2rem;
+    bottom: 1rem;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
-    gap: 1rem;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    justify-content: center;
+    padding: 0 0.5rem;
+    max-width: 95%;
+  }
+
+  .bottom-controls button {
+    font-size: 0.85rem;
+    padding: 0.5rem 0.75rem;
+    white-space: nowrap;
+  }
+
+  .process-button-container {
+    position: relative;
+  }
+
+  @media (min-width: 768px) {
+    .main-area {
+      flex-direction: row;
+    }
+
+    .waveform-container {
+      min-height: auto;
+    }
+
+    .vu-meter-container {
+      width: 5%;
+      min-width: 50px;
+      max-width: 80px;
+      height: auto;
+      border-left: 1px solid #333;
+      border-top: none;
+    }
+
+    .bottom-controls {
+      gap: 0.75rem;
+      bottom: 1.5rem;
+    }
+
+    .bottom-controls button {
+      font-size: 0.9rem;
+      padding: 0.6rem 1rem;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .bottom-controls {
+      gap: 1rem;
+      bottom: 2rem;
+    }
+
+    .bottom-controls button {
+      font-size: 1rem;
+      padding: 0.75rem 1.25rem;
+    }
   }
 
   input[type="range"] {
@@ -647,144 +658,6 @@
     background: #ddd;
   }
 
-  .modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.8);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 2000;
-  }
-
-  .modal-content {
-    background-color: #000;
-    border: 2px solid #fff;
-    padding: 2rem;
-    max-width: 500px;
-    width: 90%;
-    color: #fff;
-  }
-
-  .modal-content h1 {
-    margin: 0 0 1rem 0;
-    font-size: 2rem;
-    font-weight: bold;
-  }
-
-  .modal-content .description {
-    margin: 0 0 1.5rem 0;
-    line-height: 1.6;
-    color: #ccc;
-  }
-
-  .modal-links {
-    margin: 1.5rem 0;
-    padding: 1rem 0;
-    border-top: 1px solid #333;
-    border-bottom: 1px solid #333;
-  }
-
-  .modal-links p {
-    margin: 0.5rem 0;
-    font-size: 0.9rem;
-    color: #ccc;
-  }
-
-  .modal-links a {
-    color: #646cff;
-    text-decoration: none;
-  }
-
-  .modal-links a:hover {
-    text-decoration: underline;
-  }
-
-  .modal-close {
-    margin-top: 1rem;
-    width: 100%;
-    padding: 0.75rem;
-    font-size: 1.1rem;
-    background-color: #fff;
-    color: #000;
-    border: none;
-    cursor: pointer;
-    font-weight: bold;
-  }
-
-  .modal-close:hover {
-    background-color: #ddd;
-  }
-
-  .process-button-container {
-    position: relative;
-  }
-
-  .processor-popup {
-    position: absolute;
-    bottom: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    background-color: #000;
-    border: 2px solid #fff;
-    padding: 0.75rem;
-    z-index: 1000;
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 0.5rem;
-    width: 600px;
-    margin-bottom: 0.5rem;
-  }
-
-  .processor-tile {
-    background-color: #1a1a1a;
-    border: 1px solid #444;
-    padding: 0.6rem 0.4rem;
-    text-align: center;
-    cursor: pointer;
-    transition: background-color 0.2s, border-color 0.2s;
-    font-size: 0.85rem;
-    color: #fff;
-    position: relative;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .processor-tile:hover {
-    background-color: #2a2a2a;
-    border-color: #646cff;
-  }
-
-  .processor-tile::after {
-    content: attr(data-description);
-    position: absolute;
-    bottom: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    padding: 0.5rem 0.75rem;
-    background-color: #0a0a0a;
-    border: 1px solid #444;
-    color: #ccc;
-    font-size: 0.85rem;
-    width: max-content;
-    max-width: 300px;
-    white-space: normal;
-    word-wrap: break-word;
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity 0.2s;
-    z-index: 1001;
-    margin-bottom: 0.25rem;
-  }
-
-  .processor-tile:hover::after {
-    opacity: 1;
-  }
-
   .file-drop-zone {
     width: 100%;
     height: 100%;
@@ -794,6 +667,7 @@
     border: 2px dashed #444;
     background-color: #0a0a0a;
     transition: all 0.2s;
+    padding: 1rem;
   }
 
   .file-drop-zone.drag-over {
@@ -807,31 +681,38 @@
   }
 
   .drop-zone-content h2 {
-    font-size: 1.5rem;
+    font-size: 1.2rem;
-    margin-bottom: 1rem;
+    margin-bottom: 0.75rem;
     color: #fff;
   }
 
-  .drop-zone-content p {
-    margin: 1rem 0;
-    font-size: 1rem;
-  }
-
   .file-input-label {
     display: inline-block;
-    padding: 0.75rem 1.5rem;
+    padding: 0.65rem 1.25rem;
     background-color: #646cff;
     color: #fff;
     border: 1px solid #646cff;
     cursor: pointer;
     transition: background-color 0.2s;
-    font-size: 1rem;
+    font-size: 0.95rem;
   }
 
   .file-input-label:hover {
     background-color: #535bf2;
   }
 
+  @media (min-width: 768px) {
+    .drop-zone-content h2 {
+      font-size: 1.5rem;
+      margin-bottom: 1rem;
+    }
+
+    .file-input-label {
+      padding: 0.75rem 1.5rem;
+      font-size: 1rem;
+    }
+  }
+
   button:disabled {
     opacity: 0.5;
     cursor: not-allowed;

src/lib/components/ProcessorPopup.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+  import { getAllProcessors } from "../audio/processors/registry";
+  import type { AudioProcessor } from "../audio/processors/AudioProcessor";
+
+  interface Props {
+    onselect: (processor: AudioProcessor) => void;
+  }
+
+  let { onselect }: Props = $props();
+
+  const allProcessors = getAllProcessors().sort((a, b) =>
+    a.getName().localeCompare(b.getName())
+  );
+</script>
+
+<div class="processor-popup">
+  {#each allProcessors as processor}
+    <button
+      class="processor-tile"
+      data-description={processor.getDescription()}
+      onclick={() => onselect(processor)}
+    >
+      {processor.getName()}
+    </button>
+  {/each}
+</div>
+
+<style>
+  .processor-popup {
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #000;
+    border: 2px solid #fff;
+    padding: 0.5rem;
+    z-index: 1000;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.4rem;
+    width: 90vw;
+    max-width: 400px;
+    margin-bottom: 0.5rem;
+    max-height: 60vh;
+    overflow-y: auto;
+  }
+
+  .processor-tile {
+    background-color: #1a1a1a;
+    border: 1px solid #444;
+    padding: 0.5rem 0.4rem;
+    text-align: center;
+    cursor: pointer;
+    transition: background-color 0.2s, border-color 0.2s;
+    font-size: 0.8rem;
+    color: #fff;
+    position: relative;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .processor-tile:hover {
+    background-color: #2a2a2a;
+    border-color: #646cff;
+  }
+
+  .processor-tile::after {
+    content: attr(data-description);
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 0.5rem 0.75rem;
+    background-color: #0a0a0a;
+    border: 1px solid #444;
+    color: #ccc;
+    font-size: 0.85rem;
+    width: max-content;
+    max-width: 200px;
+    white-space: normal;
+    word-wrap: break-word;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.2s;
+    z-index: 1001;
+    margin-bottom: 0.25rem;
+    display: none;
+  }
+
+  @media (min-width: 768px) {
+    .processor-popup {
+      grid-template-columns: repeat(3, 1fr);
+      width: 500px;
+      max-width: 500px;
+      padding: 0.6rem;
+      gap: 0.5rem;
+    }
+
+    .processor-tile {
+      font-size: 0.85rem;
+      padding: 0.6rem 0.5rem;
+    }
+
+    .processor-tile::after {
+      display: block;
+      max-width: 300px;
+    }
+
+    .processor-tile:hover::after {
+      opacity: 1;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .processor-popup {
+      grid-template-columns: repeat(4, 1fr);
+      width: 600px;
+      max-width: 600px;
+      padding: 0.75rem;
+    }
+
+    .processor-tile {
+      font-size: 0.85rem;
+      padding: 0.6rem 0.4rem;
+    }
+  }
+</style>

src/lib/components/VUMeter.svelte

@@ -88,10 +88,20 @@
     if (!buffer) return;
 
     const [leftDB, rightDB] = calculateLevels();
+    const isHorizontal = width > height;
+
+    if (isHorizontal) {
+      drawHorizontal(ctx, leftDB, rightDB, width, height);
+    } else {
+      drawVertical(ctx, leftDB, rightDB, width, height);
+    }
+  }
+
+  function drawVertical(ctx: CanvasRenderingContext2D, leftDB: number, rightDB: number, width: number, height: number) {
     const channelWidth = width / 2;
 
-    drawChannel(ctx, 0, leftDB, channelWidth, height);
+    drawChannelVertical(ctx, 0, leftDB, channelWidth, height);
-    drawChannel(ctx, channelWidth, rightDB, channelWidth, height);
+    drawChannelVertical(ctx, channelWidth, rightDB, channelWidth, height);
 
     ctx.strokeStyle = '#333';
     ctx.lineWidth = 1;
@@ -101,6 +111,20 @@
     ctx.stroke();
   }
 
+  function drawHorizontal(ctx: CanvasRenderingContext2D, leftDB: number, rightDB: number, width: number, height: number) {
+    const channelHeight = height / 2;
+
+    drawChannelHorizontal(ctx, 0, leftDB, width, channelHeight);
+    drawChannelHorizontal(ctx, channelHeight, rightDB, width, channelHeight);
+
+    ctx.strokeStyle = '#333';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(0, channelHeight);
+    ctx.lineTo(width, channelHeight);
+    ctx.stroke();
+  }
+
   function dbToY(db: number, height: number): number {
     const minDB = -60;
     const maxDB = 0;
@@ -109,7 +133,15 @@
     return height - (normalized * height);
   }
 
-  function drawChannel(ctx: CanvasRenderingContext2D, x: number, levelDB: number, width: number, height: number) {
+  function dbToX(db: number, width: number): number {
+    const minDB = -60;
+    const maxDB = 0;
+    const clampedDB = Math.max(minDB, Math.min(maxDB, db));
+    const normalized = (clampedDB - minDB) / (maxDB - minDB);
+    return normalized * width;
+  }
+
+  function drawChannelVertical(ctx: CanvasRenderingContext2D, x: number, levelDB: number, width: number, height: number) {
     const gridMarks = [0, -3, -6, -10, -20, -40, -60];
     ctx.strokeStyle = '#222';
     ctx.lineWidth = 1;
@@ -146,6 +178,44 @@
       }
     }
   }
+
+  function drawChannelHorizontal(ctx: CanvasRenderingContext2D, y: number, levelDB: number, width: number, height: number) {
+    const gridMarks = [0, -3, -6, -10, -20, -40, -60];
+    ctx.strokeStyle = '#222';
+    ctx.lineWidth = 1;
+    for (const db of gridMarks) {
+      const x = dbToX(db, width);
+      ctx.beginPath();
+      ctx.moveTo(x, y);
+      ctx.lineTo(x, y + height);
+      ctx.stroke();
+    }
+
+    if (levelDB === -Infinity) return;
+
+    const segments = [
+      { startDB: -60, endDB: -18, color: '#00ff00' },
+      { startDB: -18, endDB: -6, color: '#ffff00' },
+      { startDB: -6, endDB: 0, color: '#ff0000' }
+    ];
+
+    for (const segment of segments) {
+      if (levelDB >= segment.startDB) {
+        const startX = dbToX(segment.startDB, width);
+        const endX = dbToX(segment.endDB, width);
+
+        const clampedLevelDB = Math.min(levelDB, segment.endDB);
+        const levelX = dbToX(clampedLevelDB, width);
+
+        const segmentWidth = levelX - startX;
+
+        if (segmentWidth > 0) {
+          ctx.fillStyle = segment.color;
+          ctx.fillRect(startX, y, segmentWidth, height);
+        }
+      }
+    }
+  }
 </script>
 
 <canvas bind:this={canvas}></canvas>

src/lib/components/WelcomeModal.svelte

@@ -0,0 +1,159 @@
+<script lang="ts">
+  interface Props {
+    onclose: () => void;
+  }
+
+  let { onclose }: Props = $props();
+</script>
+
+<div
+  class="modal-overlay"
+  role="button"
+  tabindex="0"
+  onclick={onclose}
+  onkeydown={(e) => e.key === "Enter" && onclose()}
+>
+  <div
+    class="modal-content"
+    role="dialog"
+    aria-labelledby="modal-title"
+    tabindex="-1"
+    onclick={(e) => e.stopPropagation()}
+    onkeydown={(e) => e.stopPropagation()}
+  >
+    <h1 id="modal-title">Vending Machine</h1>
+    <p class="description">
+      Oh, looks like you found a sound vending machine. This one seems slightly
+      broken and it seems that you can get sounds for free... Have fun!
+    </p>
+    <div class="modal-links">
+      <p>
+        Created by <a
+          href="https://raphaelforment.fr"
+          target="_blank"
+          rel="noopener noreferrer">Raphaël Forment (BuboBubo)</a
+        >
+      </p>
+      <p>
+        Licensed under <a
+          href="https://www.gnu.org/licenses/gpl-3.0.html"
+          target="_blank"
+          rel="noopener noreferrer">GPL 3.0</a
+        >
+      </p>
+    </div>
+    <button class="modal-close" onclick={onclose}>Start</button>
+  </div>
+</div>
+
+<style>
+  .modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 2000;
+  }
+
+  .modal-content {
+    background-color: #000;
+    border: 2px solid #fff;
+    padding: 1.5rem;
+    max-width: 500px;
+    width: 90%;
+    color: #fff;
+    max-height: 90vh;
+    overflow-y: auto;
+  }
+
+  .modal-content h1 {
+    margin: 0 0 0.75rem 0;
+    font-size: 1.5rem;
+    font-weight: bold;
+  }
+
+  .modal-content .description {
+    margin: 0 0 1rem 0;
+    line-height: 1.5;
+    color: #ccc;
+    font-size: 0.9rem;
+  }
+
+  .modal-links {
+    margin: 1rem 0;
+    padding: 0.75rem 0;
+    border-top: 1px solid #333;
+    border-bottom: 1px solid #333;
+  }
+
+  .modal-links p {
+    margin: 0.4rem 0;
+    font-size: 0.85rem;
+    color: #ccc;
+    line-height: 1.4;
+  }
+
+  .modal-links a {
+    color: #646cff;
+    text-decoration: none;
+    word-break: break-word;
+  }
+
+  .modal-links a:hover {
+    text-decoration: underline;
+  }
+
+  .modal-close {
+    margin-top: 0.75rem;
+    width: 100%;
+    padding: 0.65rem;
+    font-size: 1rem;
+    background-color: #fff;
+    color: #000;
+    border: none;
+    cursor: pointer;
+    font-weight: bold;
+  }
+
+  .modal-close:hover {
+    background-color: #ddd;
+  }
+
+  @media (min-width: 768px) {
+    .modal-content {
+      padding: 2rem;
+    }
+
+    .modal-content h1 {
+      font-size: 2rem;
+      margin: 0 0 1rem 0;
+    }
+
+    .modal-content .description {
+      margin: 0 0 1.5rem 0;
+      font-size: 1rem;
+      line-height: 1.6;
+    }
+
+    .modal-links {
+      margin: 1.5rem 0;
+      padding: 1rem 0;
+    }
+
+    .modal-links p {
+      font-size: 0.9rem;
+      margin: 0.5rem 0;
+    }
+
+    .modal-close {
+      margin-top: 1rem;
+      padding: 0.75rem;
+      font-size: 1.1rem;
+    }
+  }
+</style>

src/lib/utils/keyboard.ts

@@ -0,0 +1,54 @@
+export interface KeyboardActions {
+  onMutate?: () => void;
+  onRandom?: () => void;
+  onProcess?: () => void;
+  onDownload?: () => void;
+  onDurationDecrease?: (large: boolean) => void;
+  onDurationIncrease?: (large: boolean) => void;
+  onVolumeDecrease?: (large: boolean) => void;
+  onVolumeIncrease?: (large: boolean) => void;
+  onEscape?: () => void;
+}
+
+export function createKeyboardHandler(actions: KeyboardActions) {
+  return (event: KeyboardEvent) => {
+    if (event.target instanceof HTMLInputElement) return;
+
+    const key = event.key.toLowerCase();
+    const isLargeAdjustment = event.shiftKey;
+
+    switch (key) {
+      case 'm':
+        actions.onMutate?.();
+        break;
+      case 'r':
+        actions.onRandom?.();
+        break;
+      case 'p':
+        actions.onProcess?.();
+        break;
+      case 's':
+        actions.onDownload?.();
+        break;
+      case 'arrowleft':
+        event.preventDefault();
+        actions.onDurationDecrease?.(isLargeAdjustment);
+        break;
+      case 'arrowright':
+        event.preventDefault();
+        actions.onDurationIncrease?.(isLargeAdjustment);
+        break;
+      case 'arrowdown':
+        event.preventDefault();
+        actions.onVolumeDecrease?.(isLargeAdjustment);
+        break;
+      case 'arrowup':
+        event.preventDefault();
+        actions.onVolumeIncrease?.(isLargeAdjustment);
+        break;
+      case 'escape':
+        actions.onEscape?.();
+        break;
+    }
+  };
+}