File size: 1,230 Bytes
ffc05fe | 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 | import React from 'react'
import { motion } from 'framer-motion'
import styles from './Spectrogram.module.css'
export default function Spectrogram({ url, isGenerating }) {
if (!url && !isGenerating) return null
return (
<motion.div
className={styles.wrapper}
initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
>
<p className={styles.label}>Audio Spectrogram</p>
<div className={styles.canvas}>
{isGenerating ? (
<div className={styles.generating}>
<div className={styles.waveform}>
{Array.from({ length: 24 }).map((_, i) => (
<div
key={i}
className={styles.bar}
style={{ animationDelay: `${i * 0.05}s` }}
/>
))}
</div>
<p className={styles.genLabel}>Analysing audio…</p>
</div>
) : (
<img src={url} alt="Mel spectrogram" className={styles.image} />
)}
</div>
{url && (
<p className={styles.caption}>
Mel-frequency spectrogram · time → · frequency ↑
</p>
)}
</motion.div>
)
}
|