useWaveformData

$ pnpm dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/use-waveform-data.json

$ npx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/use-waveform-data.json

$ yarn dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/use-waveform-data.json

$ bunx --bun shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/use-waveform-data.json

Usage

<script lang="ts">
	import { Waveform } from "#lib/components/ui/waveform/index.js";
	import { useWaveformData } from "#lib/hooks/use-waveform-data.svelte.js";

	const waveform = useWaveformData("/episode.mp3", { samples: 800 });
</script>

<Waveform
	loading={waveform.status === "loading"}
	peaks={waveform.peaks}
	duration={waveform.duration}
/>

Call it during component setup. src and the options can be getters, such as () => track.src. The fields are getters, so read them from the returned object; destructuring them loses updates.

Peaks are the loudest sample in each slice, normalised so the loudest slice is 1. Results are cached per file and sample count. src can also be an AudioBuffer.

Options

Returns

computePeaks(buffer, samples) is exported for use outside Svelte.