Маленькая круглая кнопка с тонкими полосками эквалайзера. Нажатие запускает трек по кругу, и полоски начинают пружинно прыгать на случайную высоту; повторное нажатие ставит музыку на паузу, и полоски опускаются.
При наведении кнопка упруго раздувается. Работает и с клавиатуры: Enter или пробел переключают воспроизведение. Количество, толщину, цвет полосок и частоту их прыжков можно задать пропсами.
Скопируйте эти файлы в components/music-toggle/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { MusicToggleButton } from "@/components/music-toggle/music-toggle";
export function Player() {
return <MusicToggleButton src="/audio/track.mp3" bars={5} />;
}src?Адрес аудиофайла
Тип string·По умолчанию "/web-components/_audio/midnight-sakura.mp3"
bars?Количество полосок эквалайзера
Тип number·По умолчанию 5
interval?Как часто полоски меняют высоту, в миллисекундах
Тип number·По умолчанию 100
barWidth?Толщина полосок в пикселях
Тип number·По умолчанию 1
barColor?Цвет полосок
Тип string·По умолчанию цвет текста темы
buttonColor?Цвет кнопки
Тип string·По умолчанию цвет фона темы
className?Классы кнопки
Тип string