Music Toggle

A play/pause control with a spinning record and waveform. It shows a live progress ring and waveform bars. It reacts to user interaction and plays audio when needed. Use it to control audio playback in a media player.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/music-toggle

npx layro-cli add @educlopez/music-toggle

npx layro-cli add @educlopez/music-toggle

bunx layro-cli add @educlopez/music-toggle

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { Pause, Play } from "lucide-react";
import {
  AnimatePresence,
  motion,
  useAnimationFrame,
  useMotionValue,
  useReducedMotion,
} from "motion/react";
import {
  type KeyboardEvent,
  useCallback,