@omnimedia/omnitool 1.1.0-55 → 1.1.0-56

package/x/demo/routines/waveform-test.js

@@ -1,12 +1,32 @@
-import { Waveform } from "../../timeline/parts/waveform.js";
+import { Waveform } from "../../timeline/parts/waveform/waveform.js";
 export async function waveformTest(driver, source, root) {
     const container = root.querySelector(".waveform-canvas");
     const widthSlider = root.querySelector(".width");
     container.replaceChildren();
-    const waveform = await Waveform.init(driver, source, container);
-    widthSlider.oninput = () => {
+    container.style.position = "relative";
+    container.style.height = "96px";
+    container.style.overflow = "hidden";
+    const waveform = await Waveform.init(driver, source, {
+        tileHeight: 96,
+        onChange: () => renderTiles()
+    });
+    const renderTiles = () => {
         const width = +widthSlider.value;
-        waveform.width = width;
+        const zoom = pixelsPerSecond(width, waveform.duration);
+        waveform.zoom = zoom;
+        container.style.width = `${width}px`;
+        container.replaceChildren(...[...waveform.getTiles().values()].map(tile => {
+            tile.canvas.style.position = "absolute";
+            tile.canvas.style.top = "0";
+            tile.canvas.style.left = `${tile.startTime * pixelsPerSecond(width, waveform.duration)}px`;
+            tile.canvas.style.height = "100%";
+            return tile.canvas;
+        }));
     };
+    widthSlider.oninput = renderTiles;
+    waveform.range = [0, waveform.duration];
+}
+function pixelsPerSecond(width, duration) {
+    return duration > 0 ? width / duration : 0;
 }
 //# sourceMappingURL=waveform-test.js.map

package/x/demo/routines/waveform-test.js.map

@@ -1 +1 @@
-{"version":3,"file":"waveform-test.js","sourceRoot":"","sources":["../../../s/demo/routines/waveform-test.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,kCAAkC,CAAA;AAEzD,MAAM,CAAC,KAAK,UAAU,YAAY,CAAC,MAAc,EAAE,MAAY,EAAE,IAAiB;IACjF,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAgB,CAAA;IACvE,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAqB,CAAA;IACpE,SAAS,CAAC,eAAe,EAAE,CAAA;IAC3B,MAAM,QAAQ,GAAG,MAAM,QAAQ,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,CAAC,CAAA;IAE/D,WAAW,CAAC,OAAO,GAAG,GAAG,EAAE;QAC1B,MAAM,KAAK,GAAG,CAAC,WAAW,CAAC,KAAK,CAAA;QAChC,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAA;IACvB,CAAC,CAAA;AACF,CAAC"}
+{"version":3,"file":"waveform-test.js","sourceRoot":"","sources":["../../../s/demo/routines/waveform-test.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,QAAQ,EAAC,MAAM,2CAA2C,CAAA;AAElE,MAAM,CAAC,KAAK,UAAU,YAAY,CAAC,MAAc,EAAE,MAAY,EAAE,IAAiB;IACjF,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAmB,CAAA;IAC1E,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAqB,CAAA;IAEpE,SAAS,CAAC,eAAe,EAAE,CAAA;IAC3B,SAAS,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAA;IACrC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAA;IAC/B,SAAS,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAA;IAEnC,MAAM,QAAQ,GAAG,MAAM,QAAQ,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE;QACpD,UAAU,EAAE,EAAE;QACd,QAAQ,EAAE,GAAG,EAAE,CAAC,WAAW,EAAE;KAC7B,CAAC,CAAA;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACxB,MAAM,KAAK,GAAG,CAAC,WAAW,CAAC,KAAK,CAAA;QAChC,MAAM,IAAI,GAAG,eAAe,CAAC,KAAK,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAA;QACtD,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAA;QACpB,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAAA;QACpC,SAAS,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YACzE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAA;YACvC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAA;YAC3B,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,IAAI,CAAC,SAAS,GAAG,eAAe,CAAC,KAAK,EAAE,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAA;YAC1F,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAA;YACjC,OAAO,IAAI,CAAC,MAAM,CAAA;QACnB,CAAC,CAAC,CAAC,CAAA;IACJ,CAAC,CAAA;IAED,WAAW,CAAC,OAAO,GAAG,WAAW,CAAA;IACjC,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAA;AACxC,CAAC;AAED,SAAS,eAAe,CAAC,KAAa,EAAE,QAAgB;IACvD,OAAO,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;AAC3C,CAAC"}

package/x/index.html

@@ -295,7 +295,7 @@ canvas {
 }
 }
 </style>
-					<script type=module src="demo/demo.bundle.min.js?v=e5ad0d42200e"></script>
+					<script type=module src="demo/demo.bundle.min.js?v=94749ea134e7"></script>
 
 
 		<meta name="theme-color" content="#3cff9c">
@@ -317,7 +317,7 @@ canvas {
 	<section>
 		<header class="hero">
 			<div>
-				<h1>Omnitool <small>v1.1.0-55</small></h1>
+				<h1>Omnitool <small>v1.1.0-56</small></h1>
 				<p>Developer demos for decoding, preview, waveform, playback, and export.</p>
 			</div>
 		</header>
@@ -372,7 +372,7 @@ canvas {
 				</div>
 				<div class="waveform-controls">
 					<label>width</label>
-					<input class="width" type="range" min="100" max="1000000" value="1000" />
+					<input class="width" type="range" min="100" max="1000000" value="1000" step="100" />
 				</div>
 				<div class="waveform-canvas"></div>
 			</article>

package/x/index.html.js

@@ -79,7 +79,7 @@ export default ssg.page(import.meta.url, async (orb) => ({
 					</div>
 					<div class="waveform-controls">
 						<label>width</label>
-						<input class="width" type="range" min="100" max="1000000" value="1000" />
+						<input class="width" type="range" min="100" max="1000000" value="1000" step="100" />
 					</div>
 					<div class="waveform-canvas"></div>
 				</article>

package/x/timeline/parts/waveform/parts/collect.d.ts

@@ -0,0 +1,11 @@
+import { Driver } from "../../../../driver/driver.js";
+import { DecoderSource } from "../../../../driver/fns/schematic.js";
+export declare const PEAK_LEVELS: readonly [2048, 1024, 512, 256, 128, 64, 32];
+export declare function collectPeakLevels(driver: Driver, source: DecoderSource): Promise<{
+    duration: number;
+    levels: {
+        samplesPerPeak: 1024 | 32 | 2048 | 512 | 256 | 128 | 64;
+        peaks: Float32Array<ArrayBuffer>;
+        peaksPerSecond: number;
+    }[];
+}>;

package/x/timeline/parts/waveform/parts/collect.js

@@ -0,0 +1,56 @@
+export const PEAK_LEVELS = [2048, 1024, 512, 256, 128, 64, 32];
+export async function collectPeakLevels(driver, source) {
+    const duration = (await driver.getAudioDuration(source)) ?? 0;
+    const readable = driver.decodeAudio({ source }).readable;
+    const finestSamplesPerPeak = PEAK_LEVELS[PEAK_LEVELS.length - 1];
+    const finestPeaks = [];
+    let currentMax = 0;
+    let sampleCount = 0;
+    let sampleRate = 0;
+    for await (const audioData of readable) {
+        sampleRate ||= audioData.sampleRate;
+        const frames = audioData.numberOfFrames;
+        const plane = new Float32Array(frames);
+        audioData.copyTo(plane, { planeIndex: 0 });
+        for (let i = 0; i < plane.length; i++) {
+            const amplitude = Math.abs(plane[i]);
+            if (amplitude > currentMax)
+                currentMax = amplitude;
+            sampleCount++;
+            if (sampleCount >= finestSamplesPerPeak) {
+                finestPeaks.push(currentMax);
+                currentMax = 0;
+                sampleCount = 0;
+            }
+        }
+        audioData.close();
+    }
+    if (sampleCount > 0)
+        finestPeaks.push(currentMax);
+    const base = new Float32Array(finestPeaks);
+    const levels = PEAK_LEVELS.map(samplesPerPeak => {
+        const factor = Math.max(1, Math.round(samplesPerPeak / finestSamplesPerPeak));
+        const peaks = factor === 1 ? base : downsampleMax(base, factor);
+        return {
+            samplesPerPeak,
+            peaks,
+            peaksPerSecond: sampleRate > 0 ? sampleRate / samplesPerPeak : 0,
+        };
+    });
+    return { duration, levels };
+}
+function downsampleMax(peaks, factor) {
+    const downsampled = new Float32Array(Math.ceil(peaks.length / factor));
+    for (let i = 0; i < downsampled.length; i++) {
+        let maxPeak = 0;
+        const start = i * factor;
+        const end = Math.min(start + factor, peaks.length);
+        for (let j = start; j < end; j++) {
+            if (peaks[j] > maxPeak)
+                maxPeak = peaks[j];
+        }
+        downsampled[i] = maxPeak;
+    }
+    return downsampled;
+}
+//# sourceMappingURL=collect.js.map

package/x/timeline/parts/waveform/parts/collect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collect.js","sourceRoot":"","sources":["../../../../../s/timeline/parts/waveform/parts/collect.ts"],"names":[],"mappings":"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"}

package/x/timeline/parts/waveform/parts/render.d.ts

@@ -0,0 +1,5 @@
+export declare function renderTile(peaks: Float32Array, opts: {
+    width: number;
+    height: number;
+    color: string;
+}): HTMLCanvasElement;

package/x/timeline/parts/waveform/parts/render.js

@@ -0,0 +1,29 @@
+export function renderTile(peaks, opts) {
+    const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+    const canvas = document.createElement("canvas");
+    canvas.width = opts.width * dpr;
+    canvas.height = opts.height * dpr;
+    canvas.style.width = `${opts.width}px`;
+    canvas.style.height = `${opts.height}px`;
+    const ctx = canvas.getContext("2d");
+    if (!ctx)
+        return canvas;
+    ctx.scale(dpr, dpr);
+    ctx.fillStyle = opts.color;
+    const centerY = opts.height / 2;
+    const columns = Math.max(1, opts.width);
+    const peaksPerPixel = peaks.length / columns;
+    for (let px = 0; px < columns; px++) {
+        const startIndex = Math.floor(px * peaksPerPixel);
+        const endIndex = Math.max(startIndex + 1, Math.floor((px + 1) * peaksPerPixel));
+        let maxPeak = 0;
+        for (let i = startIndex; i < endIndex && i < peaks.length; i++) {
+            if (peaks[i] > maxPeak)
+                maxPeak = peaks[i];
+        }
+        const barHeight = maxPeak * opts.height;
+        ctx.fillRect(px, centerY - barHeight / 2, 1, barHeight);
+    }
+    return canvas;
+}
+//# sourceMappingURL=render.js.map

package/x/timeline/parts/waveform/parts/render.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.js","sourceRoot":"","sources":["../../../../../s/timeline/parts/waveform/parts/render.ts"],"names":[],"mappings":"AACA,MAAM,UAAU,UAAU,CACzB,KAAmB,EACnB,IAIC;IAED,MAAM,GAAG,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAC5E,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;IAC/C,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,CAAA;IAC/B,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,GAAG,CAAA;IACjC,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,CAAA;IACtC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,IAAI,CAAA;IAExC,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;IACnC,IAAI,CAAC,GAAG;QAAE,OAAO,MAAM,CAAA;IAEvB,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC,CAAA;IACnB,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAA;IAE1B,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAA;IAC/B,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;IACvC,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,GAAG,OAAO,CAAA;IAE5C,KAAK,IAAI,EAAE,GAAG,CAAC,EAAE,EAAE,GAAG,OAAO,EAAE,EAAE,EAAE,EAAE,CAAC;QACrC,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,aAAa,CAAC,CAAA;QACjD,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CACxB,UAAU,GAAG,CAAC,EACd,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,aAAa,CAAC,CACpC,CAAA;QAED,IAAI,OAAO,GAAG,CAAC,CAAA;QACf,KAAK,IAAI,CAAC,GAAG,UAAU,EAAE,CAAC,GAAG,QAAQ,IAAI,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAChE,IAAI,KAAK,CAAC,CAAC,CAAE,GAAG,OAAO;gBAAE,OAAO,GAAG,KAAK,CAAC,CAAC,CAAE,CAAA;QAC7C,CAAC;QAED,MAAM,SAAS,GAAG,OAAO,GAAG,IAAI,CAAC,MAAM,CAAA;QACvC,GAAG,CAAC,QAAQ,CAAC,EAAE,EAAE,OAAO,GAAG,SAAS,GAAG,CAAC,EAAE,CAAC,EAAE,SAAS,CAAC,CAAA;IACxD,CAAC;IAED,OAAO,MAAM,CAAA;AACd,CAAC"}

package/x/timeline/parts/waveform/parts/types.d.ts

@@ -0,0 +1,21 @@
+export interface WaveformTileData {
+    startTime: number;
+    endTime: number;
+    peaks: Float32Array;
+    canvas: HTMLCanvasElement;
+}
+export interface WaveformOptions {
+    tileSize?: number;
+    zoom?: number;
+    tileWidth?: number;
+    tileHeight?: number;
+    preloadMargin?: number;
+    color?: string;
+    onChange?: (tiles: WaveformTileData[]) => void;
+}
+export type WaveformTimeRange = [start: number, end: number];
+export type WaveformPeakLevel = {
+    samplesPerPeak: number;
+    peaks: Float32Array;
+    peaksPerSecond: number;
+};

package/x/timeline/parts/waveform/parts/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/x/timeline/parts/waveform/parts/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../s/timeline/parts/waveform/parts/types.ts"],"names":[],"mappings":""}

package/x/timeline/parts/waveform/waveform.d.ts

@@ -0,0 +1,17 @@
+import { Driver } from "../../../driver/driver.js";
+import { DecoderSource } from "../../../driver/fns/schematic.js";
+import { WaveformOptions, WaveformTileData, WaveformTimeRange } from "./parts/types.js";
+export declare class Waveform {
+    #private;
+    readonly color: string;
+    readonly duration: number;
+    readonly tileSize: number;
+    readonly tileHeight: number;
+    readonly preloadMargin: number;
+    private constructor();
+    static init(driver: Driver, source: DecoderSource, options?: WaveformOptions): Promise<Waveform>;
+    set zoom(value: number);
+    get zoom(): number;
+    set range(visibleRange: WaveformTimeRange);
+    getTiles(): Map<number, WaveformTileData>;
+}

package/x/timeline/parts/waveform/waveform.js

@@ -0,0 +1,125 @@
+import { renderTile } from "./parts/render.js";
+import { collectPeakLevels } from "./parts/collect.js";
+const MAX_TILE_WIDTH = 4096;
+export class Waveform {
+    #tiles = new Map();
+    #activeRange = [0, 0];
+    #zoom;
+    #levels;
+    #onChange;
+    #updateQueued = false;
+    color;
+    duration;
+    tileSize;
+    tileHeight;
+    preloadMargin;
+    constructor(levels, duration, options) {
+        this.#levels = levels;
+        this.duration = duration;
+        this.tileSize = options.tileSize ?? 1;
+        this.#zoom = options.zoom ?? ((options.tileWidth ?? 256) / this.tileSize);
+        this.tileHeight = options.tileHeight ?? 96;
+        this.preloadMargin = options.preloadMargin ?? 2;
+        this.color = options.color ?? "rgb(3, 148, 129)";
+        this.#onChange = options.onChange;
+    }
+    static async init(driver, source, options = {}) {
+        const { duration, levels } = await collectPeakLevels(driver, source);
+        return new Waveform(levels, duration, options);
+    }
+    set zoom(value) {
+        const next = Math.max(1, value);
+        if (next === this.#zoom)
+            return;
+        this.#zoom = next;
+        this.#tiles.clear();
+        this.#queueUpdate();
+    }
+    get zoom() {
+        return this.#zoom;
+    }
+    #computeActiveRange([start, end], margin = 1) {
+        const visibleSize = end - start;
+        return [
+            Math.max(0, start - visibleSize * margin),
+            Math.min(this.duration, end + visibleSize * margin),
+        ];
+    }
+    set range(visibleRange) {
+        const [visibleStart, visibleEnd] = visibleRange;
+        const visibleSize = visibleEnd - visibleStart;
+        const [activeStart, activeEnd] = this.#activeRange;
+        const leftTrigger = activeStart + visibleSize;
+        const rightTrigger = activeEnd - visibleSize;
+        if (visibleStart >= leftTrigger && visibleEnd <= rightTrigger)
+            return;
+        this.#activeRange = this.#computeActiveRange(visibleRange, this.preloadMargin);
+        this.#queueUpdate();
+    }
+    #queueUpdate() {
+        if (this.#updateQueued)
+            return;
+        this.#updateQueued = true;
+        queueMicrotask(() => {
+            this.#updateQueued = false;
+            this.#generateTiles();
+        });
+    }
+    #generateTiles() {
+        const [rangeStart, rangeEnd] = this.#activeRange;
+        const neededStarts = new Set();
+        const level = this.#levelForZoom();
+        const firstStart = Math.max(0, Math.floor(rangeStart / this.tileSize) * this.tileSize);
+        const lastStart = Math.min(this.duration, rangeEnd);
+        for (let startTime = firstStart; startTime <= lastStart; startTime += this.tileSize) {
+            neededStarts.add(startTime);
+        }
+        for (const startTime of neededStarts) {
+            if (!this.#tiles.has(startTime)) {
+                const endTime = Math.min(startTime + this.tileSize, this.duration);
+                this.#tiles.set(startTime, this.#buildTileData(startTime, endTime, level));
+            }
+        }
+        for (const startTime of this.#tiles.keys()) {
+            if (!neededStarts.has(startTime))
+                this.#tiles.delete(startTime);
+        }
+        this.#emit();
+    }
+    #buildTileData(startTime, endTime, level) {
+        const peaks = this.#slicePeaks(level, startTime, endTime);
+        return {
+            startTime,
+            endTime,
+            peaks,
+            canvas: renderTile(peaks, {
+                width: this.#tilePixelWidth(startTime, endTime),
+                height: this.tileHeight,
+                color: this.color,
+            }),
+        };
+    }
+    #levelForZoom() {
+        return this.#levels.find(level => level.peaksPerSecond >= this.#zoom)
+            ?? this.#levels[this.#levels.length - 1];
+    }
+    #slicePeaks(level, startTime, endTime) {
+        if (!level.peaksPerSecond)
+            return new Float32Array();
+        const from = Math.max(0, Math.floor(startTime * level.peaksPerSecond));
+        const to = Math.max(from + 1, Math.min(level.peaks.length, Math.ceil(endTime * level.peaksPerSecond)));
+        return level.peaks.slice(from, to);
+    }
+    #tilePixelWidth(startTime, endTime) {
+        return Math.min(MAX_TILE_WIDTH, Math.max(1, Math.ceil((endTime - startTime) * this.#zoom)));
+    }
+    #emit() {
+        if (!this.#onChange)
+            return;
+        this.#onChange([...this.#tiles.values()].sort((a, b) => a.startTime - b.startTime));
+    }
+    getTiles() {
+        return this.#tiles;
+    }
+}
+//# sourceMappingURL=waveform.js.map

package/x/timeline/parts/waveform/waveform.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"waveform.js","sourceRoot":"","sources":["../../../../s/timeline/parts/waveform/waveform.ts"],"names":[],"mappings":"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"}

package/x/timeline/parts/waveform.d.ts

@@ -1,9 +1 @@
-import WaveSurfer from "wavesurfer.js";
-import { Driver } from "../../driver/driver.js";
-import { DecoderSource } from "../../driver/fns/schematic.js";
-export declare class Waveform {
-    wavesurfer: WaveSurfer;
-    constructor(peaks: number[], container: HTMLElement, duration: number);
-    static init(driver: Driver, source: DecoderSource, container: HTMLElement): Promise<Waveform>;
-    set width(value: number);
-}
+export {};

package/x/timeline/parts/waveform.js

@@ -1,49 +1,2 @@
-import WaveSurfer from "wavesurfer.js";
-export class Waveform {
-    wavesurfer;
-    constructor(peaks, container, duration) {
-        this.wavesurfer = WaveSurfer.create({
-            container,
-            waveColor: 'rgb(200, 0, 200)',
-            progressColor: 'rgb(100, 0, 100)',
-            barWidth: 10,
-            barRadius: 10,
-            barGap: 2,
-            peaks: [peaks],
-            duration
-        });
-    }
-    static async init(driver, source, container) {
-        const reader = driver.decodeAudio({ source }).readable.getReader();
-        const peaks = [];
-        let buffer = [];
-        const samplesPerPeak = 1024;
-        const duration = await driver.getAudioDuration(source);
-        while (true) {
-            const { done, value: audioData } = await reader.read();
-            if (done)
-                break;
-            const frames = audioData.numberOfFrames;
-            const plane = new Float32Array(frames);
-            audioData.copyTo(plane, { planeIndex: 0 }); // Use left channel only
-            for (let i = 0; i < plane.length; i++) {
-                buffer.push(plane[i]);
-                if (buffer.length >= samplesPerPeak) {
-                    const chunk = buffer.splice(0, samplesPerPeak);
-                    const min = Math.min(...chunk);
-                    const max = Math.max(...chunk);
-                    peaks.push(min, max);
-                }
-            }
-            audioData.close();
-        }
-        return new Waveform(peaks, container, duration ?? 0);
-    }
-    // set zoom(value: number) {
-    // 	this.wavesurfer.zoom(value)
-    // }
-    set width(value) {
-        this.wavesurfer.setOptions({ width: value });
-    }
-}
+export {};
 //# sourceMappingURL=waveform.js.map

package/x/timeline/parts/waveform.js.map

@@ -1 +1 @@
-{"version":3,"file":"waveform.js","sourceRoot":"","sources":["../../../s/timeline/parts/waveform.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,eAAe,CAAA;AAKtC,MAAM,OAAO,QAAQ;IACpB,UAAU,CAAY;IAEtB,YAAY,KAAe,EAAE,SAAsB,EAAE,QAAgB;QACpE,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC;YAClC,SAAS;YACT,SAAS,EAAE,kBAAkB;YAC7B,aAAa,EAAE,kBAAkB;YACjC,QAAQ,EAAE,EAAE;YACZ,SAAS,EAAE,EAAE;YACb,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,CAAC,KAAK,CAAC;YACd,QAAQ;SACT,CAAC,CAAA;IACH,CAAC;IAED,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,MAAc,EAAE,MAAqB,EAAE,SAAsB;QAC9E,MAAM,MAAM,GAAG,MAAM,CAAC,WAAW,CAAC,EAAC,MAAM,EAAC,CAAC,CAAC,QAAQ,CAAC,SAAS,EAAE,CAAA;QAEhE,MAAM,KAAK,GAAa,EAAE,CAAA;QAC1B,IAAI,MAAM,GAAa,EAAE,CAAA;QACzB,MAAM,cAAc,GAAG,IAAI,CAAA;QAC3B,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAA;QAEtD,OAAO,IAAI,EAAE,CAAC;YACb,MAAM,EAAC,IAAI,EAAE,KAAK,EAAE,SAAS,EAAC,GAAG,MAAM,MAAM,CAAC,IAAI,EAAE,CAAA;YACpD,IAAI,IAAI;gBAAE,MAAK;YAEf,MAAM,MAAM,GAAG,SAAS,CAAC,cAAc,CAAA;YACvC,MAAM,KAAK,GAAG,IAAI,YAAY,CAAC,MAAM,CAAC,CAAA;YACtC,SAAS,CAAC,MAAM,CAAC,KAAK,EAAE,EAAC,UAAU,EAAE,CAAC,EAAC,CAAC,CAAA,CAAC,wBAAwB;YAEjE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBACvC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;gBACrB,IAAI,MAAM,CAAC,MAAM,IAAI,cAAc,EAAE,CAAC;oBACrC,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,cAAc,CAAC,CAAA;oBAC9C,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,CAAA;oBAC9B,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,CAAA;oBAC9B,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,CAAA;gBACrB,CAAC;YACF,CAAC;YAED,SAAS,CAAC,KAAK,EAAE,CAAA;QAClB,CAAC;QAED,OAAO,IAAI,QAAQ,CAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,IAAI,CAAC,CAAC,CAAA;IACrD,CAAC;IAED,4BAA4B;IAC5B,+BAA+B;IAC/B,IAAI;IAEJ,IAAI,KAAK,CAAC,KAAa;QACtB,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,EAAC,KAAK,EAAE,KAAK,EAAC,CAAC,CAAA;IAC3C,CAAC;CACD"}
+{"version":3,"file":"waveform.js","sourceRoot":"","sources":["../../../s/timeline/parts/waveform.ts"],"names":[],"mappings":""}