(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5453],{34624:(e,n,a)=>{"use strict";a.d(n,{A:()=>l});var s=a(23892),i=a(85848),r=a(76652),o=a(40624);function l(e){let{title:n,children:a}=e;return(0,i.useEffect)(()=>{document.title="".concat(n," - SmooSense")},[n]),(0,s.jsxs)("div",{className:"min-h-screen bg-background",children:[(0,s.jsx)(r.A,{title:n,iconButtons:[]}),(0,s.jsx)("main",{className:"p-4",style:{height:"calc(100vh - ".concat(o.D,"px)")},children:(0,s.jsx)("div",{className:"h-full",children:a})})]})}},36237:(e,n,a)=>{Promise.resolve().then(a.bind(a,95195))},95195:(e,n,a)=>{"use strict";a.r(n),a.d(n,{default:()=>v});var s=a(23892),i=a(85848),r=a(54310),o=a(42522),l=a(16844),t=a(92407);let c=["airplane.wav","can_opening.wav","car_horn.wav","cat.wav","chainsaw.wav","chirping_birds.wav","church_bells.wav","clock_alarm.wav","clock_tick.wav","coughing.wav","crickets.wav","crying_baby.wav","dog.wav","door_wood_creaks.wav","door_wood_knock.wav","drinking_sipping.wav","engine.wav","fireworks.wav","frog.wav","keyboard_typing.wav","laughing.wav","nips4b_birds_trainfile001.wav","pouring_water.wav","rooster.wav","sea_waves.wav","siren.wav","vacuum_cleaner.wav","water_drops.wav"];function d(){return(0,s.jsx)("div",{className:"flex-shrink-0",children:(0,s.jsx)("div",{className:"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3",children:c.map((e,n)=>{let a="https://cdn.smoosense.ai/datasets/ESC-50-subset/".concat(e);return(0,s.jsx)("div",{className:"border rounded-lg overflow-hidden transition-all hover:shadow-md hover:border-primary",children:(0,s.jsxs)("div",{className:"flex flex-col",children:[(0,s.jsx)("div",{className:"w-full",children:(0,s.jsx)(t.A,{audioUrl:a,height:90,allowPopOver:!0})}),(0,s.jsx)("div",{className:"p-2",children:(0,s.jsx)("span",{className:"text-sm text-center font-medium line-clamp-1 truncate block",children:e})})]})},n)})})})}function u(e){let{className:n,visualOnly:a=!1}=e,i=(0,s.jsx)("div",{className:"h-full flex flex-col p-6 bg-background overflow-auto",children:(0,s.jsx)(d,{})});return a?(0,s.jsx)("div",{className:"h-full w-full ".concat(n||""),children:i}):(0,s.jsx)("div",{className:"h-full w-full ".concat(n||""),children:(0,s.jsxs)(o.N,{direction:"horizontal",defaultSizes:[60,40],minSize:30,maxSize:70,children:[i,(0,s.jsx)("div",{className:"h-full p-6 bg-background border-l overflow-y-auto",children:(0,s.jsx)(l.A,{children:'# Audio Mel-Spectrogram Visualization\n\nSmooSense provides rich audio visualization capabilities including waveforms and mel-spectrograms, helping users analyze audio data with professional-grade tools.\n\n## What is a Mel-Spectrogram?\n\nA mel-spectrogram is a visual representation of the spectrum of frequencies in a sound as they vary with time. The "mel" scale is designed to match human auditory perception, making it particularly useful for:\n\n- **Speech recognition** - Identifying phonemes and speech patterns\n- **Music analysis** - Understanding harmonic content and timbre\n- **Sound classification** - Distinguishing between different types of audio\n- **Audio quality assessment** - Detecting artifacts and distortions\n\n## Understanding the Visualizations\n\n- **X-axis**: Time\n- **Y-axis**: Frequency (mel scale)\n- **Color**: Energy/intensity at each frequency\n    - **Brighter colors** = Higher energy\n    - **Darker colors** = Lower energy\n\nThe mel scale compresses higher frequencies, matching how humans perceive pitch. This makes it easier to analyze speech and music compared to linear frequency scales.\n\n---\n\n## How to Use in Your Data\n\nSmooSense automatically detects and visualizes audio files in common formats:\n\n### Supported Formats\n- **WAV** - Uncompressed audio (best quality)\n- **MP3** - Compressed audio\n- **OGG** - Open-source compressed format\n- **FLAC** - Lossless compression\n- **M4A/AAC** - Apple/MPEG-4 audio\n\n### In Table View\nWhen your dataset contains audio file paths or URLs:\n1. SmooSense will automatically detect audio columns\n2. Click any cell to preview the audio\n3. The mel-spectrogram renders instantly for quick analysis\n\n### In Folder Browser\nNavigate to folders containing audio files:\n1. Select any audio file in the tree view\n2. See waveform and mel-spectrogram in the preview pane\n3. Play directly from the browser\n\n---\n\n\n'})})]})})}var h=a(34624);function m(){let e="true"===(0,r.useSearchParams)().get("visualOnly");return(0,s.jsx)(u,{visualOnly:e})}function v(){return(0,s.jsx)(h.A,{title:"Audio Mel-Spectrogram Example (ESC-50 subset)",children:(0,s.jsx)(i.Suspense,{fallback:(0,s.jsx)("div",{className:"h-full flex items-center justify-center",children:"Loading..."}),children:(0,s.jsx)(m,{})})})}}},e=>{e.O(0,[3265,5652,8346,6527,3618,6484,2577,4496,8951,2418,3029,6542,7358],()=>e(e.s=36237)),_N_E=e.O()}]);