shadcn.io is not affiliated with official shadcn/ui
Podcast Player Music Block for Svelte
A podcast queue of four episodes with a player that has back 15, play and forward 30, a speed group, skip silence and skip intro switches, and the time they save on this episode and across the whole queue.
Installation
Overview
Show listeners how much time they get back, with this podcast player for Svelte with Ark UI. It lines up four Hearthcast episodes in a hairline frame with a plus mark on each corner: a list at the start with a drawn cover, title, show, length and how much of each is played, and at the end the chosen episode's player, with a Slider to seek, back 15 seconds, play or pause, and forward 30 seconds. Play is the only Shine Button. A Segment Group sets the speed from 0.75x to 2x, and two Switches, Skip silence and Skip intro (0:45), cut the typed silence in each episode and its intro. A summary works out the time this episode takes at the chosen speed and what is saved on it, and across the whole queue, from each episode's own length and silence. Show notes sit in a Collapsible section. On a phone the list stacks above the player. It's built from Slider, Segment Group, Switch, Collapsible, Shine Button, Button and Guides, with a CSS entrance only. For podcast, audiobook and lecture apps.
FAQ
How do I fill it with my episodes?
Edit EPISODES: each has an id, a title, a show, its length in seconds, how many seconds are already played, the seconds of silence the player would skip, a note and a drawn cover. INTRO is the length of the intro the second switch skips. Everything on screen is worked out from those, including the played percentages and the queue totals, so nothing is typed twice.
How is the time saved worked out?
For each episode the player takes its length, subtracts its silence when Skip silence is on and the intro when Skip intro is on, and divides by the speed. This episode shows that result and how much less it is than the full length. The queue line adds every episode's result and compares it with the sum of the lengths at 1x, so changing a switch or the speed updates both at once. Minutes are rounded only when shown.
Does anything play, and what stays local?
No. The status line says it: no audio plays in this demo. Play changes state, back 15 and forward 30 move the shown position, and each episode keeps its own position while you switch between them. Nothing is saved after a reload. To make it real, play your audio file at the chosen rate, send positions to your API, and compute silence from your episode analysis instead of a typed number.
How do I use it from the keyboard?
Tab runs the episode list (the chosen row is marked current), then the seek slider, the three transport buttons, the speed group, the two switches and the show notes. The speed group moves with the arrow keys. The slider moves in steps of five seconds and jumps with Home and End. Every control is named, including Back 15 seconds and Forward 30 seconds, and a polite status line says what changed.