0

Audio Playback Speed

Previous Next

Dropdown control for adjusting playback speed. Auto-disabled on live streams with a contextual tooltip.


A compact dropdown button for switching playback speed on the fly — from a slow `0.5x` all the way up to `2x` . Shows the current rate directly on the button, auto-disables itself when a live stream is detected, and remembers your choice across page reloads.

Loading...

<script lang="ts">
  import * as AudioPlayer from "$lib/components/ui/audio/player/index.js";
  import { AudioPlaybackSpeed } from "$lib/components/ui/audio/playback-speed/index.js";
</script>
 
<AudioPlayer.Root class="w-max">
  <AudioPlayer.ControlBar>
    <AudioPlayer.ControlGroup>
      <AudioPlayer.SkipBack />
      <AudioPlayer.Play />
      <AudioPlayer.SkipForward />
    </AudioPlayer.ControlGroup>
    <AudioPlayer.ControlGroup>
      <AudioPlayer.TimeDisplay />
      <AudioPlayer.SeekBar />
      <AudioPlayer.TimeDisplay remaining />
    </AudioPlayer.ControlGroup>
    <AudioPlayer.ControlGroup>
      <AudioPlaybackSpeed />
      <AudioPlayer.Volume />
    </AudioPlayer.ControlGroup>
  </AudioPlayer.ControlBar>
</AudioPlayer.Root>

Installation

pnpm dlx shadcn-svelte@latest add https://svelte-audio-ui.vercel.app/r/playback-speed.json

Usage

<script lang="ts">
  import { AudioPlaybackSpeed } from "$lib/components/ui/audio/playback-speed/index.js";
</script>

Basic

Drop it anywhere — no extra wiring needed, it reads from and writes to audioStore directly:

<AudioPlaybackSpeed />

Icon-only mode

Pass size="icon" to hide the gauge icon and show only the speed label — handy when space is tight in a control bar:

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

Custom speeds

Swap out the default speed options with your own list:

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

API Reference

AudioPlaybackSpeed

Props

Prop Type Default Description
speeds { value: number; label: string }[] DEFAULT_SPEEDS Speed options. Defaults: 0.5x, 0.75x, 1x, 1.25x, 1.5x, 2x.
size string "sm" Button size. Use "icon" to hide the gauge icon and show only the speed label.
variant string "outline" Button visual variant.
class string - Additional CSS classes.

Accepts any additional HTML button attributes via ...rest.

Behavior

  • Live streams — automatically disabled when htmlAudio.isLive() returns true. Tooltip changes to "Not available for live streams" so the user always knows why.
  • Current speed indicator — the active rate is shown on the button and marked with a radio checkmark in the dropdown.
  • Persistence — speed is saved to localStorage via audioStore and restored on the next page load.
  • Icon mode — when size="icon", the Gauge icon is hidden; only the speed label (e.g. 1x) is shown.

Note: AudioPlaybackSpeed requires AudioProvider (or the audio store) to be mounted higher in the tree. It reads audioStore.playbackRate and audioStore.duration reactively via Svelte 5 $derived runes — no hook wrappers needed.

Examples

Inside a player control bar

<script lang="ts">
  import * as AudioPlayer from "$lib/components/ui/audio/player/index.js";
  import { AudioPlaybackSpeed } from "$lib/components/ui/audio/playback-speed/index.js";
</script>
 
<AudioPlayer.Root>
  <AudioPlayer.ControlBar>
    <AudioPlayer.ControlGroup>
      <AudioPlayer.SkipBack />
      <AudioPlayer.Play />
      <AudioPlayer.SkipForward />
    </AudioPlayer.ControlGroup>
    <AudioPlayer.ControlGroup>
      <AudioPlaybackSpeed />
      <AudioPlayer.Volume />
    </AudioPlayer.ControlGroup>
  </AudioPlayer.ControlBar>
</AudioPlayer.Root>

Custom labels

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

Related