4track 0.1.9 → 0.1.12

package/dist/audio/constants.d.ts

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

package/dist/audio/constants.js

@@ -1,6 +1,6 @@
 // Default configuration and constraints for the audio engine.
 import workletUrl from "../assets/recorder-worklet.js?url";
-export const PLAYBACK_TICK_MS = 50;
+export const PLAYBACK_TICK_MS = 32; // 30 fps
 export const DEFAULT_CONFIG = {
     sampleRate: 32000, // 44100 | 48000 | 96000
     bitDepth: 16, // 8 = lo-fi, 16 = CD quality, 32 = float (uncompressed)

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

@@ -1,4 +1,4 @@
-import type { AudioEngineConfig, MicStatus, PlayState } from "../types.js";
+import type { AudioEngineConfig, MicStatus, PlayState, ProjectMeta } from "../types.js";
 import { Track } from "./track.svelte.js";
 export declare class AudioEngine {
     playState: PlayState;
@@ -8,7 +8,10 @@ export declare class AudioEngine {
     latencyInfo: string;
     trimValue: number;
     recordingVolume: number;
+    meta: ProjectMeta;
     tracks: Track[];
+    /** Rounds a time value to 2 decimal places for position display. */
+    private roundPosition;
     private config;
     private audioContext;
     private masterGainNode;

package/dist/audio/engine.svelte.js

@@ -16,7 +16,12 @@ export class AudioEngine {
     latencyInfo = $state("");
     trimValue = $state(-1);
     recordingVolume = $state(0.75);
+    meta = $state({ artist: "", title: "", comment: "" });
     tracks;
+    /** Rounds a time value to 2 decimal places for position display. */
+    roundPosition(seconds) {
+        return Math.round(seconds * 100) / 100;
+    }
     // ─── Private state ──────────────────────────────────────────────────
     config;
     // Web Audio graph
@@ -172,7 +177,7 @@ export class AudioEngine {
         const max = this.getMaxDuration();
         const clamped = Math.max(0, Math.min(seconds, max));
         this.playbackOffset = clamped;
-        this.position = Math.round(clamped * 10) / 10;
+        this.position = this.roundPosition(clamped);
         if (this.playState === "playing") {
             this.stopSources(this.activePlaybackSources);
             this.clearPlaybackTick();
@@ -219,14 +224,14 @@ export class AudioEngine {
         }
         this.playbackStartTime = startTime;
         this.playbackOffset = offsetSeconds;
-        this.position = Math.round(offsetSeconds * 10) / 10;
+        this.position = this.roundPosition(offsetSeconds);
         this.playState = "playing";
         this.playbackTickId = window.setInterval(() => {
             const elapsed = ctx.currentTime - this.playbackStartTime;
-            this.position = Math.round((this.playbackOffset + elapsed) * 10) / 10;
+            this.position = this.roundPosition(this.playbackOffset + elapsed);
             if (elapsed >= effectiveDuration) {
                 this.playbackOffset = maxDuration;
-                this.position = Math.round(maxDuration * 10) / 10;
+                this.position = this.roundPosition(maxDuration);
                 this.clearPlaybackTick();
                 this.playState = "stopped";
             }
@@ -242,7 +247,7 @@ export class AudioEngine {
             this.stopSources(this.activePlaybackSources);
         }
         this.clearPlaybackTick();
-        this.position = Math.round(this.playbackOffset * 10) / 10;
+        this.position = this.roundPosition(this.playbackOffset);
         this.playState = "paused";
     }
     /** Stops playback or recording. If recording, finalizes and merges the recorded audio. */
@@ -258,7 +263,7 @@ export class AudioEngine {
                 this.stopSources(this.activePlaybackSources);
             }
             this.clearPlaybackTick();
-            this.position = Math.round(this.playbackOffset * 10) / 10;
+            this.position = this.roundPosition(this.playbackOffset);
         }
         this.playState = "stopped";
     }
@@ -457,7 +462,7 @@ export class AudioEngine {
         this.recordingTrackIndex = trackIndex;
         this.recordingLatencySeconds = recordLatencySeconds;
         this.punchInOffset = this.playbackOffset;
-        this.position = Math.round(this.punchInOffset * 10) / 10;
+        this.position = this.roundPosition(this.punchInOffset);
         this.playState = "recording";
         // Play other tracks for overdub monitoring, start meters and position timer
         this.playOtherTracksForMonitoring(trackIndex, this.punchInOffset);
@@ -573,12 +578,13 @@ export class AudioEngine {
     // ─── Save / Load ────────────────────────────────────────────────────
     /** Serializes all tracks and settings into a compressed .4trk binary blob. */
     exportProject() {
-        return _exportProject(this.tracks, this.config, this.masterVolume);
+        return _exportProject(this.tracks, this.config, this.masterVolume, this.meta);
     }
     /** Loads a .4trk file, restoring all track buffers, mixer settings, and master volume. */
     async importProject(file) {
-        const { masterVolume } = await _importProject(file, this.tracks, () => this.ensureContext());
+        const { masterVolume, meta } = await _importProject(file, this.tracks, () => this.ensureContext());
         this.setMasterVolume(masterVolume);
+        this.meta = meta;
         this.rewind();
     }
     // ─── Cleanup ────────────────────────────────────────────────────────

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

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

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 async function exportProject(tracks, config, masterVolume) {
+export async function exportProject(tracks, config, masterVolume, meta = { artist: '', title: '', comment: '' }) {
     const trackMeta = [];
     const pcmParts = [];
     for (const track of tracks) {
@@ -37,6 +37,12 @@ export async function exportProject(tracks, config, masterVolume) {
         masterVolume,
         tracks: trackMeta,
     };
+    if (meta.artist)
+        metadata.artist = meta.artist.slice(0, 64);
+    if (meta.title)
+        metadata.title = meta.title.slice(0, 64);
+    if (meta.comment)
+        metadata.comment = meta.comment.slice(0, 256);
     const encoder = new TextEncoder();
     const metaBytes = encoder.encode(JSON.stringify(metadata));
     const metaLength = new Uint32Array([metaBytes.length]);
@@ -84,5 +90,12 @@ export async function importProject(file, tracks, ensureContext) {
         if (track.panNode)
             track.panNode.pan.value = track.pan;
     }
-    return { masterVolume: metadata.masterVolume ?? 1.0 };
+    return {
+        masterVolume: metadata.masterVolume ?? 1.0,
+        meta: {
+            artist: metadata.artist ?? '',
+            title: metadata.title ?? '',
+            comment: metadata.comment ?? '',
+        },
+    };
 }

package/dist/components/FourTrack.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { AudioEngine } from "../audio/engine.svelte.js"
-  import type { HiddenTrackConfig, LoadStatus } from "../types.js"
+  import type { HiddenTrackConfig, LoadStatus, ProjectMeta } from "../types.js"
   import casetteHissUrl from "../assets/casette_hiss_compressed.mp3"
   import noiseImg from "../assets/noise_50.jpg"
   import logoImg from "../assets/logo.svg?url"
@@ -23,6 +23,7 @@
     initialProject,
     status = $bindable<LoadStatus>("idle"),
     loadProgress = $bindable(0),
+    meta = $bindable<ProjectMeta>({ artist: "", title: "", comment: "" }),
   }: {
     hiddenTracks?: HiddenTrackConfig[]
     onready?: (detail: { engine: AudioEngine }) => void
@@ -31,6 +32,7 @@
     initialProject?: string | File
     status?: LoadStatus
     loadProgress?: number
+    meta?: ProjectMeta
   } = $props()
 
   let engine: AudioEngine | null = $state(null)
@@ -39,6 +41,7 @@
   let recordEngaged = $state(false)
   let resetTransport: (() => void) | undefined = $state()
 
+
   async function fetchWithProgress(url: string): Promise<File> {
     const response = await fetch(url)
     const contentLength = response.headers.get("Content-Length")
@@ -76,7 +79,10 @@
     engine = new AudioEngine({ hiddenTracks })
     engine.initAudioContext()
 
-    save = () => engine!.exportProject()
+    save = () => {
+      engine!.meta = { ...meta }
+      return engine!.exportProject()
+    }
     load = async (source: File | string) => {
       status = "loading"
       loadProgress = 0
@@ -84,6 +90,7 @@
         const file =
           typeof source === "string" ? await fetchWithProgress(source) : source
         await engine!.importProject(file)
+        meta = { ...engine!.meta }
         resetTransport?.()
         status = "ready"
       } catch (e) {

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

@@ -1,5 +1,5 @@
 import { AudioEngine } from "../audio/engine.svelte.js";
-import type { HiddenTrackConfig, LoadStatus } from "../types.js";
+import type { HiddenTrackConfig, LoadStatus, ProjectMeta } from "../types.js";
 type $$ComponentProps = {
     hiddenTracks?: HiddenTrackConfig[];
     onready?: (detail: {
@@ -10,7 +10,8 @@ type $$ComponentProps = {
     initialProject?: string | File;
     status?: LoadStatus;
     loadProgress?: number;
+    meta?: ProjectMeta;
 };
-declare const FourTrack: import("svelte").Component<$$ComponentProps, {}, "save" | "load" | "status" | "loadProgress">;
+declare const FourTrack: import("svelte").Component<$$ComponentProps, {}, "meta" | "save" | "load" | "status" | "loadProgress">;
 type FourTrack = ReturnType<typeof FourTrack>;
 export default FourTrack;

package/dist/components/TransportButtons.svelte

@@ -43,8 +43,9 @@
   $effect(() => {
     let timer: ReturnType<typeof setInterval> | undefined
 
-    // Trigger stop when rewinding and reaching the end
+    // Trigger stop when rewinding and reaching the beginning
     if (speed < 0 && engine.position + speed / 50 <= 0) {
+      engine.seek(0)
       clicky("stop")
     }
     if (engine.position + speed / 50 > engine.duration) {

package/dist/components/els/DigitRoller.svelte

@@ -1,48 +1,41 @@
 <script lang="ts">
-  let { digit = 0 } = $props()
+  let { timestamp = 0, index = 0 } = $props()
 
   let roller: HTMLDivElement
-  let prev = -1
-  let wrapping = false
   const step = 100 / 12
+
   const pos = (d: number) => `translateY(${-step * (1 + d)}%)`
 
-  function jumpTo(transform: string) {
-    roller.style.transition = "none"
-    roller.style.transform = transform
-    roller.offsetHeight
-    roller.style.transition = ""
+  function sigmoidEase(x: number, k: number, midpoint: number) {
+    const f = (v: number) => 1 / (1 + Math.exp(-k * (v - midpoint)))
+    return (f(x) - f(0)) / (f(1) - f(0))
   }
 
   $effect(() => {
-    const d = +digit
     if (!roller) return
 
-    if (prev === -1) {
-      jumpTo(pos(d))
-    } else if (prev === 9 && d === 0) {
-      wrapping = true
-      roller.style.transform = `translateY(${-step * 11}%)`
-    } else if (prev === 0 && d === 9) {
-      wrapping = true
-      roller.style.transform = `translateY(0%)`
-    } else {
-      wrapping = false
-      roller.style.transform = pos(d)
-    }
+    // Get the value at this digit position (index 0=hundreds, 1=tens, 2=ones)
+    const divisor = Math.pow(10, 2 - index) //1, 10, 100
+    const value = (timestamp / divisor) % 10
 
-    prev = d
-  })
+    // Split into whole digit and fractional part for smooth rolling
+    const digit = Math.floor(value)
+    const fraction = value - digit
 
-  function onTransitionEnd() {
-    if (!wrapping) return
-    wrapping = false
-    jumpTo(pos(+digit))
-  }
+    const eased =
+      divisor == 1
+        ? fraction
+        : sigmoidEase(
+            fraction,
+            divisor == 10 ? 12 : 50,
+            divisor == 10 ? 0.98 : 0.9995,
+          )
+    roller.style.transform = pos(digit + eased)
+  })
 </script>
 
 <div class="digits">
-  <div class="roller" bind:this={roller} ontransitionend={onTransitionEnd}>
+  <div class="roller" bind:this={roller}>
     {#each [9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0] as n}
       <div class="digit"><span>{n}</span></div>
     {/each}
@@ -69,9 +62,9 @@
       transform: translateY(-2cqw);
     }
   }
-  .roller {
+  /* .roller {
     transition: 0.4s ease transform;
-  }
+  } */
   .digit {
     font-size: 35cqh;
     /* letter-spacing: 7cqw; */

package/dist/components/els/DigitRoller.svelte.d.ts

@@ -1,5 +1,6 @@
 declare const DigitRoller: import("svelte").Component<{
-    digit?: number;
+    timestamp?: number;
+    index?: number;
 }, {}, "">;
 type DigitRoller = ReturnType<typeof DigitRoller>;
 export default DigitRoller;

package/dist/components/els/Timestamp.svelte

@@ -4,30 +4,21 @@
 <script lang="ts">
   let { timestamp } = $props()
   import { playFx } from "../../fx/soundfx"
+  import { Tween } from "svelte/motion"
   import DigitRoller from "./DigitRoller.svelte"
-  import counterBgImg from '../../assets/counter_bg.png'
+  import counterBgImg from "../../assets/counter_bg.png"
 
-  let correction = $state(0)
-  function count_to_str(nr: number) {
-    var cor_nr = Math.floor(nr - correction)
-    if (cor_nr < 0) cor_nr += 1000
+  const correction = new Tween(0)
 
-    if (cor_nr > 99) {
-      return cor_nr.toString()
-    } else if (cor_nr > 9) {
-      return "0" + cor_nr.toString()
-    } else {
-      return "00" + cor_nr.toString()
-    }
-  }
-
-  function get_digit(nr, i) {
-    return count_to_str(nr).charAt(i)
-  }
+  let corrected = $derived.by(() => {
+    let v = timestamp - correction.current
+    if (v < 0) v += 1000
+    return v % 1000
+  })
 
   function reset() {
     playFx("counter")
-    correction = timestamp
+    correction.set(timestamp, { duration: 400 })
   }
 </script>
 
@@ -37,9 +28,9 @@
   <div class="counter">
     <a onmousedown={() => reset()}>&nbsp;</a>
     <div class="number-ticker">
-      <DigitRoller digit={get_digit(timestamp, 0)} />
-      <DigitRoller digit={get_digit(timestamp, 1)} />
-      <DigitRoller digit={get_digit(timestamp, 2)} />
+      <DigitRoller timestamp={corrected} index={0} />
+      <DigitRoller timestamp={corrected} index={1} />
+      <DigitRoller timestamp={corrected} index={2} />
     </div>
   </div>
 </div>

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { AudioEngine } from './audio/engine.svelte.js';
 export { Track } from './audio/track.svelte.js';
 export { default as FourTrack } from './components/FourTrack.svelte';
-export type { AudioEngineConfig, HiddenTrackConfig, TrimFxConfig, ProjectMetadata, TrackMeta, PlayState, LoadStatus } from './types.js';
+export type { AudioEngineConfig, HiddenTrackConfig, TrimFxConfig, ProjectMetadata, ProjectMeta, TrackMeta, PlayState, LoadStatus } from './types.js';

package/dist/types.d.ts

@@ -34,6 +34,14 @@ export interface ProjectMetadata {
     bitDepth: number;
     masterVolume: number;
     tracks: TrackMeta[];
+    artist?: string;
+    title?: string;
+    comment?: string;
+}
+export interface ProjectMeta {
+    artist: string;
+    title: string;
+    comment: string;
 }
 export type PlayState = 'stopped' | 'playing' | 'paused' | 'recording';
 export type MicStatus = 'unsupported' | 'prompt' | 'denied' | 'no-device' | 'inactive' | 'active' | 'error';

package/package.json

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