File size: 1,342 Bytes
87337b1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
export interface AudioVisualizerProps {
type: "agent" | "user"
frequencies: Float32Array[]
gap: number
barWidth: number
minBarHeight: number
maxBarHeight: number
borderRadius: number
}
export default function AudioVisualizer(props: AudioVisualizerProps) {
const {
frequencies,
gap,
barWidth,
minBarHeight,
maxBarHeight,
borderRadius,
type,
} = props
const summedFrequencies = frequencies.map((bandFrequencies) => {
const sum = bandFrequencies.reduce((a, b) => a + b, 0)
if (sum <= 0) {
return 0
}
return Math.sqrt(sum / bandFrequencies.length)
})
return (
<div
className={`flex items-center justify-center`}
style={{ gap: `${gap}px` }}
>
{summedFrequencies.map((frequency, index) => {
const style = {
height:
minBarHeight + frequency * (maxBarHeight - minBarHeight) + "px",
borderRadius: borderRadius + "px",
width: barWidth + "px",
transition:
"background-color 0.35s ease-out, transform 0.25s ease-out",
// transform: transform,
backgroundColor: type === "agent" ? "#0888FF" : "#EAECF0",
boxShadow: type === "agent" ? "0 0 10px #EAECF0" : "none",
}
return <span key={index} style={style} />
})}
</div>
)
}
|