@omnimedia/omnitool/x/demo/routines/waveform-test.js

open source video processing tools

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();
    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;
        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