4track 0.1.0

package/dist/audio/pcm.js

@@ -0,0 +1,43 @@
+// PCM encoding for project file persistence.
+// Converts between Float32 audio samples and compact integer formats.
+export function quantizePCM(float32, bitDepth) {
+    if (bitDepth === 32) {
+        const out = new Float32Array(float32.length);
+        out.set(float32);
+        return out.buffer;
+    }
+    if (bitDepth === 16) {
+        const out = new Int16Array(float32.length);
+        for (let i = 0; i < float32.length; i++) {
+            const s = Math.max(-1, Math.min(1, float32[i]));
+            out[i] = s < 0 ? s * 0x8000 : s * 0x7fff;
+        }
+        return out.buffer;
+    }
+    // 8-bit unsigned
+    const out = new Uint8Array(float32.length);
+    for (let i = 0; i < float32.length; i++) {
+        const s = Math.max(-1, Math.min(1, float32[i]));
+        out[i] = Math.round((s + 1) * 0.5 * 255);
+    }
+    return out.buffer;
+}
+export function dequantizePCM(data, bitDepth) {
+    if (bitDepth === 32)
+        return new Float32Array(data);
+    if (bitDepth === 16) {
+        const int16 = new Int16Array(data);
+        const out = new Float32Array(int16.length);
+        for (let i = 0; i < int16.length; i++) {
+            out[i] = int16[i] < 0 ? int16[i] / 0x8000 : int16[i] / 0x7fff;
+        }
+        return out;
+    }
+    // 8-bit unsigned
+    const uint8 = new Uint8Array(data);
+    const out = new Float32Array(uint8.length);
+    for (let i = 0; i < uint8.length; i++) {
+        out[i] = (uint8[i] / 255) * 2 - 1;
+    }
+    return out;
+}

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

@@ -0,0 +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 importProject(file: File | Blob, tracks: Track[], ensureContext: () => AudioContext): Promise<{
+    masterVolume: number;
+}>;

package/dist/audio/project-io.js

@@ -0,0 +1,85 @@
+// Binary project format (.4trk):
+// [4 bytes meta length][JSON metadata][PCM track data...]
+// 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) {
+    const trackMeta = [];
+    const pcmParts = [];
+    for (const track of tracks) {
+        if (track.buffer) {
+            const float32 = track.buffer.getChannelData(0);
+            const quantized = quantizePCM(float32, config.bitDepth);
+            pcmParts.push(quantized);
+            trackMeta.push({
+                samples: float32.length,
+                volume: track.volume,
+                pan: track.pan,
+                trimStart: track.trimStart,
+                hidden: track.hidden || undefined,
+            });
+        }
+        else {
+            pcmParts.push(new ArrayBuffer(0));
+            trackMeta.push({
+                samples: 0,
+                volume: track.volume,
+                pan: track.pan,
+                trimStart: track.trimStart,
+                hidden: track.hidden || undefined,
+            });
+        }
+    }
+    const metadata = {
+        filetypeVersion: 1,
+        sampleRate: config.sampleRate,
+        bitDepth: config.bitDepth,
+        masterVolume,
+        tracks: trackMeta,
+    };
+    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' });
+}
+export async function importProject(file, tracks, ensureContext) {
+    const arrayBuffer = await file.arrayBuffer();
+    const view = new DataView(arrayBuffer);
+    const metaLength = view.getUint32(0, true);
+    const metaBytes = new Uint8Array(arrayBuffer, 4, metaLength);
+    const metadata = JSON.parse(new TextDecoder().decode(metaBytes));
+    const ctx = ensureContext();
+    const bytesPerSample = metadata.bitDepth / 8;
+    let offset = 4 + metaLength;
+    for (let i = 0; i < metadata.tracks.length; i++) {
+        const t = metadata.tracks[i];
+        // Grow the tracks array if the file has more tracks than the engine
+        while (i >= tracks.length) {
+            tracks.push(new Track(t.hidden ?? false));
+        }
+        const track = tracks[i];
+        track.hidden = t.hidden ?? false;
+        if (t.samples > 0) {
+            const byteLen = t.samples * bytesPerSample;
+            const pcmSlice = arrayBuffer.slice(offset, offset + byteLen);
+            offset += byteLen;
+            const float32 = dequantizePCM(pcmSlice, metadata.bitDepth);
+            const audioBuf = ctx.createBuffer(1, float32.length, metadata.sampleRate);
+            audioBuf.getChannelData(0).set(float32);
+            track.buffer = audioBuf;
+            track.hasContent = true;
+        }
+        else {
+            track.buffer = null;
+            track.hasContent = false;
+        }
+        track.trimStart = t.trimStart ?? 0;
+        track.volume = t.volume ?? 1.0;
+        track.pan = t.pan ?? 0;
+        if (track.gainNode)
+            track.gainNode.gain.value = track.volume;
+        if (track.panNode)
+            track.panNode.pan.value = track.pan;
+    }
+    return { masterVolume: metadata.masterVolume ?? 1.0 };
+}

package/dist/audio/recording.d.ts

@@ -0,0 +1,2 @@
+export declare function measureRecordLatency(stream: MediaStream, ctx: AudioContext): number;
+export declare function mergeRecordingIntoBuffer(ctx: AudioContext, chunks: Float32Array[], trimSamples: number, existingBuffer: AudioBuffer | null, existingTrimStart: number, punchInSeconds: number): AudioBuffer | null;

package/dist/audio/recording.js

@@ -0,0 +1,80 @@
+// Buffer construction and latency measurement for recordings.
+// Handles latency trimming and punch-in/overdub merging.
+// Measure round-trip audio latency from stream and context properties.
+// Capped at 200ms; falls back to 30ms if nothing is reported.
+export function measureRecordLatency(stream, ctx) {
+    let inputLatency = 0;
+    const audioTrack = stream.getAudioTracks()[0];
+    if (audioTrack) {
+        const s = audioTrack.getSettings();
+        if (typeof s.latency === 'number' && s.latency > 0)
+            inputLatency = s.latency;
+    }
+    let outputLatency = 0;
+    if (typeof ctx.outputLatency === 'number') {
+        outputLatency = ctx.outputLatency;
+    }
+    else if (typeof ctx.baseLatency === 'number') {
+        outputLatency = ctx.baseLatency;
+    }
+    const total = inputLatency + outputLatency;
+    return total > 0 ? Math.min(total, 0.2) : 0.03;
+}
+// Concatenate PCM chunks into a single Float32Array, skipping
+// the first `trimSamples` to compensate for round-trip latency.
+function trimAndConcat(chunks, trimSamples) {
+    const totalSamples = chunks.reduce((sum, c) => sum + c.length, 0);
+    const length = Math.max(0, totalSamples - trimSamples);
+    if (length === 0)
+        return null;
+    const result = new Float32Array(length);
+    let offset = 0;
+    let skip = trimSamples;
+    for (const c of chunks) {
+        if (skip > 0) {
+            const take = Math.min(c.length, skip);
+            skip -= take;
+            if (skip === 0 && take < c.length) {
+                result.set(c.subarray(take), offset);
+                offset += c.length - take;
+            }
+        }
+        else {
+            result.set(c, offset);
+            offset += c.length;
+        }
+    }
+    return result;
+}
+// Merge a new recording into a track's existing buffer at a punch-in point.
+// Preserves audio before and after the recorded region (A-B-C splice).
+// If no existing buffer, creates a fresh one at the punch-in offset.
+export function mergeRecordingIntoBuffer(ctx, chunks, trimSamples, existingBuffer, existingTrimStart, punchInSeconds) {
+    const newPCM = trimAndConcat(chunks, trimSamples);
+    if (!newPCM)
+        return null;
+    const punchInSample = Math.max(0, Math.round((punchInSeconds + (existingBuffer ? existingTrimStart : 0)) * ctx.sampleRate));
+    const existingLength = existingBuffer ? existingBuffer.length : 0;
+    const resultLength = Math.max(existingLength, punchInSample + newPCM.length);
+    const resultBuffer = ctx.createBuffer(1, resultLength, ctx.sampleRate);
+    const resultChannel = resultBuffer.getChannelData(0);
+    if (existingBuffer) {
+        const existingData = existingBuffer.getChannelData(0);
+        // Region A: existing audio before the punch-in point
+        const regionAEnd = Math.min(punchInSample, existingLength);
+        if (regionAEnd > 0) {
+            resultChannel.set(existingData.subarray(0, regionAEnd));
+        }
+        // Region B: the new recording
+        resultChannel.set(newPCM, punchInSample);
+        // Region C: existing audio after the new recording ends
+        const regionCStart = punchInSample + newPCM.length;
+        if (regionCStart < existingLength) {
+            resultChannel.set(existingData.subarray(regionCStart), regionCStart);
+        }
+    }
+    else {
+        resultChannel.set(newPCM, punchInSample);
+    }
+    return resultBuffer;
+}

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

@@ -0,0 +1,13 @@
+export declare class Track {
+    hidden: boolean;
+    volume: number;
+    pan: number;
+    level: number;
+    hasContent: boolean;
+    buffer: AudioBuffer | null;
+    trimStart: number;
+    gainNode: GainNode | null;
+    panNode: StereoPannerNode | null;
+    analyserNode: AnalyserNode | null;
+    constructor(hidden?: boolean);
+}

package/dist/audio/track.svelte.js

@@ -0,0 +1,17 @@
+// Per-track reactive state. Each track owns its audio buffer,
+// mixer settings, and the Web Audio nodes for its channel strip.
+export class Track {
+    hidden;
+    volume = $state(1.0);
+    pan = $state(0);
+    level = $state(0);
+    hasContent = $state(false);
+    buffer = null;
+    trimStart = 0;
+    gainNode = null;
+    panNode = null;
+    analyserNode = null;
+    constructor(hidden = false) {
+        this.hidden = hidden;
+    }
+}

package/dist/components/Cassette.svelte

@@ -0,0 +1,179 @@
+<script lang="ts">
+  import cassetteImg from "../assets/cassette.jpg"
+  import rotatorImg from "../assets/rotator.png"
+
+  let { speed, time, max, onchange, isRecording } = $props()
+  let containerEl = $state()
+  let dragging = $state(false)
+  let startPos = $state()
+  let _dragPercentage = $state(0)
+  let xPos = $state()
+
+  // should be disabled whern ffwding...
+
+  function startDrag(e) {
+    dragging = true
+    _dragPercentage = 0
+    xPos = e.clientX
+    startPos = time
+    // needed to keep tracking pointermove, even if it is outside
+    e.target.setPointerCapture(e.pointerId)
+  }
+
+  const drag = (e) => {
+    // trigggered continously
+    if (!dragging) return
+    if (isRecording) return
+    if (speed > 1 || speed < 0) return //disable when ffwd
+
+    const rect = containerEl.getBoundingClientRect()
+    const xMove = e.clientX - xPos // it should be the difference from where it initially started.
+
+    // never drag more than 1, altought we later also need to
+    let _dragPercentage = xMove / rect.width / 16
+
+    let _time = Math.max(0, Math.min(startPos + _dragPercentage * max, max))
+    onchange?.(_time)
+  }
+
+  const stopDrag = (e) => {
+    dragging = false
+    e.target.releasePointerCapture?.(e.pointerId)
+  }
+</script>
+
+<div class="casette_gutter">
+  <div class="casette">
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="window"
+      onpointerdown={startDrag}
+      onpointermove={drag}
+      onpointerup={stopDrag}
+      onpointerleave={stopDrag}
+      bind:this={containerEl}
+      style:--bg-cassette="url({cassetteImg})"
+      style:--bg-rotator="url({rotatorImg})"
+    >
+      <div class="window_inset">
+        <div class="shadow"></div>
+        <div class="rotaters">
+          <div
+            class="rotater rot1"
+            style:transform={"rotate(" + (time * 270) / 10 + "deg)"}
+          ></div>
+          <div
+            class="rotater rot2"
+            style:transform={"rotate(" + (time * 180) / 10 + "deg)"}
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .casette_gutter {
+    height: 95%;
+    border-radius: 0.8cqw 0 0 0.8cqw;
+    background: #1a1a1b;
+    padding: 0.8cqh 0 0.8cqh 0.35cqw;
+    box-shadow: inset 0cqw -0.15cqw 0 0 rgba(136, 132, 132, 0.761);
+  }
+  .casette {
+    height: 100%;
+    container-type: size;
+    /* border-top: 0.8cqh solid #1a1a1b00;
+    border-left: 0.3cqw solid #1a1a1b00;
+    border-bottom: 0.8cqh solid #1a1a1b00; */
+    border-radius: 0.4cqw 0 0 0.8cqw;
+    box-shadow: inset 0.15cqw 0.15cqw 0 0 rgb(136 132 132);
+    background: radial-gradient(ellipse at top left, #5d6066, #383840);
+  }
+
+  .window {
+    background-color: #212124;
+    border-radius: 1cqw;
+    margin: 36cqh 10cqw 20cqh 5cqw;
+    padding: 1.5cqw 8cqw;
+    position: relative;
+    cursor: ew-resize;
+    box-shadow:
+      inset 0.2cqw 0.2cqw 0.2cqw 0 rgba(0, 0, 0, 0.5),
+      inset -0.1cqw -0.1cqw 0.2cqw 0 rgba(255, 255, 255, 0.5);
+    &:active {
+      cursor: col-resize;
+    }
+
+    .window_inset {
+      background: var(--bg-cassette);
+      background-size: 109%;
+      background-position: -5cqh -15cqw;
+      border-radius: 2.5cqw;
+      width: 100%;
+      aspect-ratio: 5.7 / 1;
+      position: relative;
+      margin: 0 auto;
+    }
+
+    .shadow {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      box-shadow:
+        inset 0.25cqw 0.25cqw 0 0 rgb(0 0 0),
+        inset 10cqw 5cqw 5cqw rgb(0 0 0 / 95%),
+        inset -1.25cqw -2.5cqw 2.5cqw rgb(0 0 0 / 25%),
+        inset -0.25cqw -0.25cqw 0.25cqw 0 rgba(255, 255, 255, 0.25);
+      border: 0.25cqw solid #171718;
+      z-index: 1;
+      border-radius: 1.25cqw;
+    }
+
+    .rotaters {
+      display: flex;
+      gap: 16cqw;
+      overflow: hidden;
+      height: 23cqh;
+      justify-content: center;
+    }
+
+    .rotater {
+      width: 16cqw;
+      height: 16cqw;
+      background: var(--bg-rotator);
+      background-size: contain;
+      background-repeat: no-repeat;
+      margin-top: -2.5cqh;
+    }
+
+    &:after {
+      position: absolute;
+      content: " ";
+      display: block;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      background: linear-gradient(-35deg, #000000 70%, #ffffff 71%);
+      z-index: 100;
+      opacity: 0.05;
+      mix-blend-mode: screen;
+      border-radius: 1.25cqw;
+    }
+    &:before {
+      position: absolute;
+      content: " ";
+      display: block;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      background: linear-gradient(-45deg, #000000 60%, #ffffff 61%);
+      z-index: 100;
+      opacity: 0.1;
+      mix-blend-mode: screen;
+      border-radius: 1.25cqw;
+    }
+  }
+</style>

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

@@ -0,0 +1,9 @@
+declare const Cassette: import("svelte").Component<{
+    speed: any;
+    time: any;
+    max: any;
+    onchange: any;
+    isRecording: any;
+}, {}, "">;
+type Cassette = ReturnType<typeof Cassette>;
+export default Cassette;