4track 0.1.5 → 0.1.7

package/README.md

@@ -2,6 +2,12 @@
 
 A browser-based 4-track audio recorder built with the Web Audio API and SvelteKit. Designed for low-latency recording with overdub support, latency compensation, and sample-accurate multi-track playback — all running entirely client-side with no server required.
 
+![4-Track Recorder](img/4track.png)
+
+## Give it a try
+
+You can try out the 4 track recorder on [4track.cc](https://www.4track.cc)
+
 ## Installation
 
 ```bash
@@ -12,7 +18,7 @@ npm install 4-track-recorder
 
 ```svelte
 <script>
-  import { FourTrack } from '4-track-recorder'
+  import { FourTrack } from "4-track-recorder"
 </script>
 
 <FourTrack />
@@ -28,7 +34,7 @@ Use `bind:save` and `bind:load` to get functions you can call from your own UI:
 
 ```svelte
 <script>
-  import { FourTrack } from '4-track-recorder'
+  import { FourTrack } from "4-track-recorder"
 
   let save
   let load
@@ -37,9 +43,9 @@ Use `bind:save` and `bind:load` to get functions you can call from your own UI:
     const blob = save()
     // Download as file
     const url = URL.createObjectURL(blob)
-    const a = document.createElement('a')
+    const a = document.createElement("a")
     a.href = url
-    a.download = 'my-song.4trk'
+    a.download = "my-song.4trk"
     a.click()
     URL.revokeObjectURL(url)
   }
@@ -51,7 +57,7 @@ Use `bind:save` and `bind:load` to get functions you can call from your own UI:
 
   // Or load directly from a URL
   function loadFromUrl() {
-    load('https://example.com/songs/demo.4trk')
+    load("https://example.com/songs/demo.4trk")
   }
 </script>
 
@@ -71,10 +77,10 @@ Pass a URL or `File` to `initialProject` to auto-load a project when the compone
 
 ## Props
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `hiddenTracks` | `HiddenTrackConfig[]` | Background audio tracks (e.g. cassette hiss) |
-| `onready` | `(detail: { engine: AudioEngine }) => void` | Callback when the engine is initialized |
-| `save` | `() => Blob` (bindable) | Bind to get a function that exports the project as a `.4trk` blob |
-| `load` | `(source: File \| string) => Promise<void>` (bindable) | Bind to get a function that imports a `.4trk` file or URL |
-| `initialProject` | `string \| File` | URL or File to auto-load on mount |
+| Prop             | Type                                                   | Description                                                       |
+| ---------------- | ------------------------------------------------------ | ----------------------------------------------------------------- |
+| `hiddenTracks`   | `HiddenTrackConfig[]`                                  | Background audio tracks (e.g. cassette hiss)                      |
+| `onready`        | `(detail: { engine: AudioEngine }) => void`            | Callback when the engine is initialized                           |
+| `save`           | `() => Blob` (bindable)                                | Bind to get a function that exports the project as a `.4trk` blob |
+| `load`           | `(source: File \| string) => Promise<void>` (bindable) | Bind to get a function that imports a `.4trk` file or URL         |
+| `initialProject` | `string \| File`                                       | URL or File to auto-load on mount                                 |

package/dist/audio/constants.d.ts

@@ -1,4 +1,4 @@
-import type { AudioEngineConfig } from '../types.js';
+import type { AudioEngineConfig } from "../types.js";
 export declare const PLAYBACK_TICK_MS = 50;
 export declare const DEFAULT_CONFIG: AudioEngineConfig;
 export declare const AUDIO_CONSTRAINTS: MediaTrackConstraints;

package/dist/audio/constants.js

@@ -1,15 +1,15 @@
 // Default configuration and constraints for the audio engine.
-import workletUrl from '../assets/recorder-worklet.js?url';
+import workletUrl from "../assets/recorder-worklet.js?url";
 export const PLAYBACK_TICK_MS = 50;
 export const DEFAULT_CONFIG = {
-    sampleRate: 48000, // 44100 | 48000 | 96000
+    sampleRate: 32000, // 44100 | 48000 | 96000
     bitDepth: 16, // 8 = lo-fi, 16 = CD quality, 32 = float (uncompressed)
     maxSeconds: 180, // max recording length per track (seconds)
     trackCount: 4, // number of mixer tracks
     workletUrl,
     inputFx: [
         {
-            type: 'trim',
+            type: "trim",
             enabled: true,
             default: -1, // initial slider position: -1 (clean) → 1 (full saturation)
             gainMin: 0.2, // gain at slider -1; lower = quieter clean tone (0.1–1.0)

package/dist/audio/engine.svelte.d.ts

@@ -81,8 +81,8 @@ export declare class AudioEngine {
     setInputGain(value: number): void;
     private startMeters;
     private stopMeters;
-    /** Serializes all tracks and settings into a .4trk binary blob. */
-    exportProject(): Blob;
+    /** Serializes all tracks and settings into a compressed .4trk binary blob. */
+    exportProject(): Promise<Blob>;
     /** Loads a .4trk file, restoring all track buffers, mixer settings, and master volume. */
     importProject(file: File | Blob): Promise<void>;
     /** Disconnects all audio nodes, closes the AudioContext, and releases media streams. */

package/dist/audio/engine.svelte.js

@@ -571,7 +571,7 @@ export class AudioEngine {
         }
     }
     // ─── Save / Load ────────────────────────────────────────────────────
-    /** Serializes all tracks and settings into a .4trk binary blob. */
+    /** Serializes all tracks and settings into a compressed .4trk binary blob. */
     exportProject() {
         return _exportProject(this.tracks, this.config, this.masterVolume);
     }

package/dist/audio/project-io.d.ts

@@ -1,6 +1,6 @@
 import { Track } from './track.svelte.js';
 import type { AudioEngineConfig } from '../types.js';
-export declare function exportProject(tracks: Track[], config: AudioEngineConfig, masterVolume: number): Blob;
+export declare function exportProject(tracks: Track[], config: AudioEngineConfig, masterVolume: number): Promise<Blob>;
 export declare function importProject(file: File | Blob, tracks: Track[], ensureContext: () => AudioContext): Promise<{
     masterVolume: number;
 }>;

package/dist/audio/project-io.js

@@ -3,7 +3,7 @@
 // Uses integer quantization from ./pcm.ts for compact storage.
 import { Track } from './track.svelte.js';
 import { quantizePCM, dequantizePCM } from './pcm.js';
-export function exportProject(tracks, config, masterVolume) {
+export async function exportProject(tracks, config, masterVolume) {
     const trackMeta = [];
     const pcmParts = [];
     for (const track of tracks) {
@@ -40,10 +40,13 @@ export function exportProject(tracks, config, masterVolume) {
     const encoder = new TextEncoder();
     const metaBytes = encoder.encode(JSON.stringify(metadata));
     const metaLength = new Uint32Array([metaBytes.length]);
-    return new Blob([metaLength, metaBytes, ...pcmParts], { type: 'application/octet-stream' });
+    const raw = new Blob([metaLength, metaBytes, ...pcmParts]);
+    const compressed = raw.stream().pipeThrough(new CompressionStream('gzip'));
+    return new Response(compressed).blob();
 }
 export async function importProject(file, tracks, ensureContext) {
-    const arrayBuffer = await file.arrayBuffer();
+    const decompressed = new Blob([file]).stream().pipeThrough(new DecompressionStream('gzip'));
+    const arrayBuffer = await new Response(decompressed).arrayBuffer();
     const view = new DataView(arrayBuffer);
     const metaLength = view.getUint32(0, true);
     const metaBytes = new Uint8Array(arrayBuffer, 4, metaLength);

package/dist/components/FourTrack.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { AudioEngine } from "../audio/engine.svelte.js"
   import type { HiddenTrackConfig, LoadStatus } from "../types.js"
-  import casetteHissUrl from "../assets/casette_hiss.mp3"
+  import casetteHissUrl from "../assets/casette_hiss_compressed.mp3"
   import noiseImg from "../assets/noise_50.jpg"
   import logoImg from "../assets/logo.svg?url"
   import openstudioImg from "../assets/openstudio.svg?url"
@@ -26,7 +26,7 @@
   }: {
     hiddenTracks?: HiddenTrackConfig[]
     onready?: (detail: { engine: AudioEngine }) => void
-    save?: () => Blob
+    save?: () => Promise<Blob>
     load?: (source: File | string) => Promise<void>
     initialProject?: string | File
     status?: LoadStatus
@@ -108,13 +108,16 @@
 
   {#snippet channelStrip(track, i)}
     <div
-      class="channel-lights cell-center"
+      class="track{i} channel-lights cell-center"
       style="grid-area: {i + 3} / 2 / {i + 4} / 3"
     >
       <Lights level={track.level} />
     </div>
 
-    <div class="cell-center" style="grid-area: {i + 3} / 3 / {i + 4} / 4">
+    <div
+      class="track{i} volume cell-center"
+      style="grid-area: {i + 3} / 3 / {i + 4} / 4"
+    >
       <Knob
         min={0}
         max={1.5}
@@ -123,7 +126,10 @@
       />
     </div>
 
-    <div class="cell-center" style="grid-area: {i + 3} / 4 / {i + 4} / 5">
+    <div
+      class="track{i} panning cell-center"
+      style="grid-area: {i + 3} / 4 / {i + 4} / 5"
+    >
       <Knob
         min={-1}
         max={1}
@@ -232,7 +238,10 @@
             />
           </div>
 
-          <div class="cell-center" style="grid-area: 4 / 7 / 7 / 8">
+          <div
+            class="cell-center input-volume"
+            style="grid-area: 4 / 7 / 7 / 8"
+          >
             <Slider
               min={0}
               max={1.5}

package/dist/components/FourTrack.svelte.d.ts

@@ -5,7 +5,7 @@ type $$ComponentProps = {
     onready?: (detail: {
         engine: AudioEngine;
     }) => void;
-    save?: () => Blob;
+    save?: () => Promise<Blob>;
     load?: (source: File | string) => Promise<void>;
     initialProject?: string | File;
     status?: LoadStatus;

package/dist/components/els/SlideSelect.svelte

@@ -3,8 +3,8 @@
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <script>
   import { playFx } from "../../fx/soundfx"
-  import slideSelectIndicatorImg from '../../assets/slideselect-indicator.svg?url'
-  import slideSelectThumbImg from '../../assets/slideselect-thumb.png'
+  import slideSelectIndicatorImg from "../../assets/slideselect-indicator.svg?url"
+  import slideSelectThumbImg from "../../assets/slideselect-thumb.png"
   let dragging = $state(false)
   let trackEl = $state()
   let selected_i = $state(4)
@@ -68,7 +68,11 @@
   })
 </script>
 
-<div class="slider-holder" style:--bg-slideselect-indicator="url({slideSelectIndicatorImg})" style:--bg-slideselect-thumb="url({slideSelectThumbImg})">
+<div
+  class="slider-holder"
+  style:--bg-slideselect-indicator="url({slideSelectIndicatorImg})"
+  style:--bg-slideselect-thumb="url({slideSelectThumbImg})"
+>
   <div class="slideselect-indicator"></div>
   <div
     bind:this={trackEl}
@@ -117,6 +121,7 @@
     position: relative;
     border-radius: 4cqw;
     background: rgb(100, 100, 100);
+    touch-action: none;
     box-shadow:
       inset 8cqw 1cqh 12cqw rgba(31, 31, 31, 0.75),
       inset 2cqw 0.2cqh 2cqw rgba(31, 31, 31, 0.45),
@@ -142,6 +147,7 @@
     background-size: 100% 100%;
     position: absolute;
     border-radius: 1cqh;
+    touch-action: none;
     top: 0%;
     left: 0;
     cursor: grab;

package/dist/components/els/Slider.svelte

@@ -2,10 +2,17 @@
 <!-- svelte-ignore a11y_interactive_supports_focus -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <script>
-  import sliderIndicatorImg from '../../assets/slider-indicator.svg?url'
-  import sliderImg from '../../assets/slider.png'
+  import sliderIndicatorImg from "../../assets/slider-indicator.svg?url"
+  import sliderImg from "../../assets/slider.png"
 
-  let { value = $bindable(0), min = 0, max = 1, onchange, btnHeight = 0.35, padding = 1 } = $props()
+  let {
+    value = $bindable(0),
+    min = 0,
+    max = 1,
+    onchange,
+    btnHeight = 0.35,
+    padding = 1,
+  } = $props()
   let dragging = $state(false)
   let trackEl = $state()
   let startY = $state(0)
@@ -20,7 +27,8 @@
 
   // Inverted: top = max, bottom = min (like a real fader)
   let topPercent = $derived(
-    padding + ((1 - normalizeValue(value)) * (1 - btnHeight - (2 * padding) / 100) * 100),
+    padding +
+      (1 - normalizeValue(value)) * (1 - btnHeight - (2 * padding) / 100) * 100,
   )
 
   const start = (event) => {
@@ -48,7 +56,11 @@
   }
 </script>
 
-<div class="slider-holder" style:--bg-slider-indicator="url({sliderIndicatorImg})" style:--bg-slider="url({sliderImg})">
+<div
+  class="slider-holder"
+  style:--bg-slider-indicator="url({sliderIndicatorImg})"
+  style:--bg-slider="url({sliderImg})"
+>
   <div
     class="slider-indicator"
     style="height: {(1 - btnHeight) * 100}%; top: {(btnHeight / 2) * 100}%"
@@ -99,6 +111,7 @@
     height: 100%;
     position: relative;
     border-radius: 8cqw;
+    touch-action: none;
     box-shadow:
       inset 9cqw 2cqh 15cqw rgba(31, 31, 31, 0.75),
       inset 1.5cqw 0.2cqh 1.5cqw rgba(31, 31, 31, 0.45),
@@ -129,6 +142,7 @@
     cursor: grab;
     z-index: 1;
     border-radius: 10cqw;
+    touch-action: none
     box-shadow:
       15cqw 1cqh 8cqw rgba(0, 0, 0, 0.4),
       inset 1.5cqw 0.5cqh 1cqw rgba(255, 252, 252, 0.35);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "4track",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "A 4-track cassette recorder component for Svelte 5",
   "license": "GPL-3.0-only",
   "author": "Andre Boekhorst",