Music Toggle

A record that spins while it plays, a progress ring that draws the elapsed time around it, and a waveform that shares the pulse. Press the record to toggle, or drive it from outside.

The component is deliberately split in two. Give it a src and it owns an <audio> element, playing and pausing it as the state changes. Omit src and it is purely visual — you own playback and you feed it playing and progress. It also works controlled or not: pass playing and it never mutates its own state, leave it out and it keeps one internally from defaultPlaying.

Usage

Point it at a file and let it play, or omit src and bind playing and progress yourself. Bind v-model:playing either way — that is what the emit carries — and pass on-seek if you want the slider to be operable.

Night RideNova Kinetic

progress = 0.35 · focus the ring, then use ←/→, Home or End

<template>
  <div class="flex w-full max-w-md flex-col items-center gap-8 py-6">
    <MMusicToggle
      v-model:playing="playing"
      :progress="progress"
      :on-seek="seek"
      :size="104"
      title="Night Ride"
      artist="Nova Kinetic"
      cover="https://picsum.photos/seed/midnight-drive/400/400"
    />

    <div class="flex w-full flex-col gap-1.5">
      <USlider
        v-model="progress"
        :min="0"
        :max="1"
        :step="0.01"
        aria-label="Follow progress"
      />
      <span class="text-xs text-muted">
        progress = {{ progress.toFixed(2) }} · focus the ring, then use ←/→, Home or End
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
const playing = ref(false)
const progress = ref(0.35)

function seek(value: number) {
  progress.value = value
}
</script>

Customize

Night RideNova Kinetic

Customize

Reset

Bars24

Coverhttps://picsum.photos/seed/midnight-drive/400/400

Default Playing

Playing

Progress0

Size96

Src

ArtistNova Kinetic

TitleNight Ride

Props

Events

UI

This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.musicToggle in app.config.ts.

Accessibility

The record is a real button: aria-pressed reflects the state and its aria-label becomes "Play" or "Pause" followed by the track, so the control is announced with its action rather than as an icon. With no title or artist it is just "Play" / "Pause".

The ring overlay is a role="slider" with aria-valuemin 0, aria-valuemax 100 and aria-valuenow set to progress as a percentage, labelled "Seek <track>". Its tabindex is 0 only when onSeek is supplied — otherwise it is -1 and stays out of the tab order, mirroring the reference's behaviour of leaving seeking out of reach when no handler exists. Arrow keys and Home/End then step by 5%.

The overlay is pointer-events-none and has no pointer handler, so seeking is keyboard-only; there is no drag or click-to-seek. The waveform, ring and cover art are all aria-hidden.

Reduced motion is respected properly here: the rotation loop and the play/pause icon spring both check useReducedMotion(), and the ring's dash offset drops to a 0 duration transition.

Performance

• The record's rotation is a hand-written requestAnimationFrame loop writing style.rotate directly, not a MotionValue — motion-v snapshots MotionValues bound through :style. Its tick locals are deliberately non-reactive, so no frame triggers a re-render.
• The loop resolves the record element lazily on the first frame, because function refs on motion.* do not resolve. It starts from onMounted, never during SSR, and is cancelled in onBeforeUnmount.
• The loop runs only while playing and motion is allowed; stopping it and starting it are keyed off watch([playing, shouldReduceMotion]).
• progress is watched with a non-immediate watcher, so passing defaultPlaying does not kick off playback on mount — it starts on the first change.
• play() rejections are swallowed: a blocked autoplay leaves the visual state alone rather than throwing.
• The play/pause swap is wrapped in <AnimatePresence :initial="false">, and the source notes that motion-v's AnimatePresence does not implement mode="wait" — both icons stay mounted during the swap and are centred on top of each other. Treat it as a crossfade, not a sequential hand-off. The ring's dash offset is a plain motion.circle with no presence wrapper at all, so it simply re-targets.