shadcn.io is not affiliated with official shadcn/ui
Waveform Editor Music Block for Vue
A 38-second voice memo drawn as 192 bars with a two-thumb selection, Silence, Fade in, Fade out, Normalize and Reverse that rewrite the selected peaks, Undo, Redo and Revert all, an averaging group and an exportable edit list.
Installation
Overview
Let people trim and shape a recording before they commit to it, with this waveform editor for Vue with Ark UI. It draws one Crestcut voice memo as 192 typed peaks in a hairline frame with a plus mark on each corner, in three bands. A toolbar holds five edits that rewrite the peaks inside the selection (Silence, Fade in, Fade out, Normalize, Reverse) and Undo, Redo and Revert all as ghost buttons. The stage shows the bars, a playhead you move with the arrow keys, and a two-thumb Slider that picks the stretch; its two times are said in words under the bars. A Toggle Group averages 1, 2 or 4 neighbouring bars for display only. The third band lists every edit, with undone ones struck through, in a held region with an Empty state. Export saves the edit list as a text file. There is no primary button: it is an editor. It's built from Slider, Toggle Group, Button, Empty and Guides, with a CSS entrance only. For voice recorders, podcast tools and sound editors.
FAQ
How do I load my own audio?
Replace ORIGINAL with the peaks of your file: an array of 192 numbers from 0 to 1, for example from AudioBuffer.getChannelData reduced to the maximum of each slice. TENTHS is how many tenths of a second one bar covers, so a longer clip means a larger value, and the time labels and the edit list follow. Everything on screen, including the selection time and the count of edits, is worked out from those peaks and the edit log.
What does each edit do, and how does undo work?
Silence sets the selected bars to a near-zero level, the two fades multiply them by a rising or falling ramp, Normalize scales them so the loudest is 0.98, and Reverse flips their order. Each edit keeps a full copy of the peaks after it, so Undo and Redo only move a pointer along the list and nothing is recalculated. A new edit after an Undo drops the undone ones. Revert all clears the list and goes back to the original peaks.
Does anything play or export, and what stays local?
No. Nothing is decoded, played or encoded: the peaks are typed and the status line says so. Export saves the edit list as text, for example "1. Silence 0:12.0 to 0:15.0", which is the one real file. To make it real, run each edit on an AudioBuffer (or on the server) in run, keep the same history and encode the result when the person exports.
How do I use it from the keyboard?
Tab through the five edits, Undo, Redo and Revert all, then the playhead, the two selection thumbs and the averaging group. The playhead and each thumb move with the arrow keys, Home and End, and both thumbs say their time in words, such as "Selection start, 0:12.0". Undo, Redo and Revert all stay focusable when there is nothing to do and answer in the status line instead of being disabled.