4track 0.1.4 → 0.1.6

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}
@@ -196,7 +202,7 @@
 
           <div class="cell-center" style="grid-area: 2 / 6 / 3 / 8">
             <div class="mic-status">
-              <div class="ui-label">mic status XXX22</div>
+              <div class="ui-label">mic status</div>
               <div
                 class="mic-status-light"
                 title="Microphone status: {engine.micStatus}"
@@ -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}
@@ -256,7 +265,7 @@
           <div class="cell-center" style="grid-area: 2 / 9 / 3 / 10">
             <div class="mic-status">
               <div class="ui-label">power</div>
-              <div class="mic-status-light" title="Cassette status: xx">
+              <div class="mic-status-light" title="Cassette status">
                 <Light color="green" active={true} pulsing={false} />
               </div>
             </div>

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/package.json

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