Audio Playback Speed

Dropdown button for adjusting playback speed (0.5x–2x). Auto-disabled for live streams with contextual tooltip. Shows current speed and visual feedback.

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @audio/playback-speed
Copy

Usage

Copyimport { AudioPlaybackSpeed } from "@/components/audio/playback-speed";

Basic

Copy<AudioPlaybackSpeed />

Icon Style

With size="icon", only the speed label is shown (no gauge icon):

Copy<AudioPlaybackSpeed size="icon" variant="ghost" />

Custom Speeds

Copy<AudioPlaybackSpeed
  speeds={[
    { value: 0.5, label: "0.5x" },
    { value: 1, label: "1x" },
    { value: 1.5, label: "1.5x" },
    { value: 2, label: "2x" },
  ]}
/>

API Reference

AudioPlaybackSpeed

Props

Features

• Live streams: Auto-disabled with "Not available for live streams" tooltip
• Persistence: Speed saved to localStorage, restored on reload
• Visual feedback: Current speed displayed, checkmark in dropdown
• Tooltip: Always enabled, works on disabled buttons
• Icon mode: size="icon" hides gauge icon, shows only label

Examples

In Player

Copy<AudioPlayer>
  <AudioPlayerControlBar>
    <AudioPlayerControlGroup>
      <AudioPlayerPlay />
      <AudioPlayerSeekBar />
    </AudioPlayerControlGroup>
    <AudioPlayerControlGroup>
      <AudioPlaybackSpeed />
      <AudioPlayerVolume />
    </AudioPlayerControlGroup>
  </AudioPlayerControlBar>
</AudioPlayer>

Custom Labels

Copy<AudioPlaybackSpeed
  speeds={[
    { value: 0.75, label: "Slow" },
    { value: 1, label: "Normal" },
    { value: 1.5, label: "Fast" },
  ]}
/>

Related

• Audio Player — Player component system
• Audio Store — Playback state management
• Audio Provider — Audio context provider

Changelog

2025-12-24 useAudio integration and live stream improvements

• Changed: Now uses useAudio() hook to access htmlAudio singleton
• Improved: Live stream detection uses htmlAudio.isLive() method
• Fixed: Playback rate changes are properly prevented for live streams