shadcn.io is not affiliated with official shadcn/ui
Audio Bookmarks Music Block for React
Bookmarks on a typed 52-minute lecture: a position slider with a tick for each bookmark, Add bookmark with a label and an optional note, rows with Jump, an editable note and Delete with Undo, a label filter and Copy as Markdown.
Installation
Overview
Help people find their way back into a long recording, with these audio bookmarks for React with Base UI. A Timeflag position Slider runs along a typed 52-minute lecture and a tick on its rail marks every bookmark. Add bookmark at the slider's position is the only Shine Button; a Segment Group picks the label (Note, Quote, Question or Todo) and an optional note comes from an Input. Each row shows the time as a Jump button, the label as a glyph and a word, the note (Editable in place) and Delete, which leaves the row in place as Removed with an Undo. A Toggle Group filters by label, the list sits in a region of one height with an Empty state, and Copy as Markdown puts the bookmarks on the clipboard. Nothing plays; the slider only marks a spot. It's built from Slider, Segment Group, Toggle Group, Editable, Shine Button and Guides, with a CSS entrance only. For lectures, calls, podcasts and any long audio.
FAQ
How do I load my own recording and bookmarks?
Set TITLE and LENGTH (in seconds) for the recording and edit START: each bookmark has an at in seconds, a label, a note and removed: false. Ticks, the sorted list, the counts and the header sentence are worked out from them. In your app, save each change where add, remove, undo and retext update the list.
What does Add bookmark do?
It pins the slider's current second with the chosen label and note, inserts it in time order and says so in the status line. Pinning the same second twice is refused with a message. An empty note becomes "No note", which you can edit in place.
How do Delete and Undo work?
Delete does not take the row out of the list: it shows "Removed the note at 4:20" and an Undo button in the same space, so nothing below jumps. The tick leaves the rail and the bookmark leaves the Markdown while it is removed, and Undo restores all three.
What is copied, and what stays local?
Copy as Markdown writes a heading with the title and length and one line per bookmark ("- 4:20 Note: Spring tides...") to the clipboard, which is the one real effect; if the browser blocks it the status line says so. Bookmarks live in the page and are gone on reload, and nothing plays, so Jump only moves the slider.
How do I use it from the keyboard?
Tab runs the position slider (arrows move five seconds), the label group, the note field, Add bookmark, the filter and then each row's Jump, note and Delete. Buttons are named with the time and label, such as "Jump to 4:20, Note". Enter in the note field adds the bookmark.