@lobehub/tts/es/react/AudioVisualizer/Visualizer.mjs

A high-quality & reliable TTS React Hooks library

import { useAudioVisualizer } from "../hooks/useAudioVisualizer.mjs";
import { memo } from "react";
import { jsx } from "react/jsx-runtime";
import { cssVar } from "antd-style";

//#region src/react/AudioVisualizer/Visualizer.tsx
const Visualizer = memo(({ audioRef, count = 4, width = 48, color, ...barStyle }) => {
	const maxHeight = barStyle?.maxHeight || width * 3;
	const minHeight = barStyle?.minHeight || width;
	const borderRadius = barStyle?.borderRadius || width / 2;
	return useAudioVisualizer(audioRef, { count }).map((bar, index) => /* @__PURE__ */ jsx("div", { style: {
		background: color || cssVar.colorPrimary,
		borderRadius,
		height: minHeight + bar / 255 * (maxHeight - minHeight),
		transition: "height 50ms cubic-bezier(.2,-0.5,.8,1.5)",
		width
	} }, index));
});

//#endregion
export { Visualizer as default };