https://github.com/techwithty/audio-playback
Accessible audio playback UI for React/Next.js with timeline seeking, drag/keyboard controls, and token-based theming. Production-ready TypeScript.
https://github.com/techwithty/audio-playback
a11y accessibility audio design-tokens frontend media-player nextjs react tailwind typescript ui ux
Last synced: 3 months ago
JSON representation
Accessible audio playback UI for React/Next.js with timeline seeking, drag/keyboard controls, and token-based theming. Production-ready TypeScript.
- Host: GitHub
- URL: https://github.com/techwithty/audio-playback
- Owner: TechWithTy
- Created: 2025-08-30T15:07:04.000Z (7 months ago)
- Default Branch: master
- Last Pushed: 2025-08-30T15:07:16.000Z (7 months ago)
- Last Synced: 2025-08-30T17:22:51.957Z (7 months ago)
- Topics: a11y, accessibility, audio, design-tokens, frontend, media-player, nextjs, react, tailwind, typescript, ui, ux
- Language: TypeScript
- Homepage: https://www.cybershoptech.com
- Size: 4.88 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Audio Playback
Accessible audio playback UI components for React/Next.js with timeline seeking, drag & keyboard controls, and token-based theming.
- Intrinsic duration timeline (no absolute timestamps required)
- Click/drag/keyboard seek with a11y roles and labels
- Theme-aligned using Tailwind tokens from `_docs/features/ui/theming.md`
Website: https://www.cybershoptech.com
## Exports
```ts
import { PlaybackCell, PlayButtonSkip } from "@/external/audio-playback";
```
## Usage
```tsx
import { PlaybackCell } from "@/external/audio-playback";
import type { CallInfo } from "@/types/_dashboard/campaign";
const calls: CallInfo[] = [
{
callResponse: {
id: "Call A",
recordingUrl: "/calls/example-call-yt.mp3",
startedAt: new Date().toISOString(),
endedAt: new Date().toISOString(),
} as any,
contactId: "contact-1",
campaignId: "campaign-1",
},
];
export default function Example() {
return ;
}
```
## Theming
- Track uses `bg-muted/40` (remaining) and `bg-primary` (progress) with `border-border` and `ring-ring`.
- Time badges use `bg-card/70` and `text-muted-foreground`.
## License
MIT