Skip to main content

​
Overview

Soundcn provides a powerful browsing experience with over 110+ sounds organized by categories, collections, and metadata. This guide will help you navigate the catalog and find the perfect sound for your project.

​
The Sound Catalog

The Soundcn catalog is built from a centralized registry that includes:
  • Sound metadata: Name, title, description, author
  • Technical specs: Duration, file size, format (MP3/WAV/OGG)
  • Organization: Categories, tags, keywords
  • Licensing: CC0, OGA-BY, MIT licenses

​
Catalog Structure

Each sound in the catalog contains: 
interface SoundCatalogItem {
  name: string;              // Unique identifier (slug)
  title: string;             // Display name
  description: string;       // What the sound is
  author: string;            // Creator
  categories: string[];      // All assigned categories
  primaryCategory: string;   // Main category
  broadCategory: string;     // Top-level group
  meta: {
    duration: number;        // In seconds
    sizeKb: number;          // File size
    license: string;         // License type
    tags: string[];          // Search tags
    keywords: string[];      // Additional search terms
  };
}

​
Browsing by Category

Sounds are organized into broad categories for easy discovery:
Interface sounds like clicks, toggles, switches, and navigation

​
Category Hierarchy

Soundcn uses a three-tier categorization:
  1. Broad Category: Top-level group (e.g., “UI”, “Game”)
  2. Primary Category: Specific type (e.g., “click”, “toggle”)
  3. Collections: Special groupings (e.g., “warcraft”)
Sounds in collections inherit their primary category from the second position in the categories array.

​
Using the Category Filter

The category filter shows all available categories with sound counts:
1

View Categories

Scroll through the horizontal category bar to see all options
2

Select a Category

Click any category to filter the sound grid
3

See Results

The grid updates instantly showing matching sounds
4

Clear Filter

Click “All” to show all sounds again

​
Category Options

Categories are built dynamically based on available sounds: 
// Example category options
[
  { key: "all", label: "All", count: 110 },
  { key: "UI", label: "UI", count: 45 },
  { key: "Feedback", label: "Feedback", count: 23 },
  { key: "Game", label: "Game", count: 18 },
  // ... more categories
]

​
Search Functionality

Search across multiple fields simultaneously:
  • Title: Sound display name
  • Description: What the sound represents
  • Categories: All assigned categories
  • Tags: Descriptive tags
  • Keywords: Additional search terms

​
Search Tips

Search queries match regardless of capitalization. “CLICK” finds “click” sounds.
Use spaces to search multiple terms. “error alert” finds sounds with both words.
Search by category like “ui” or “feedback” to find all sounds in that category.
Try descriptive terms like “swoosh”, “beep”, “whoosh”, “chime” to find effects.

​
Sound Grid Display

The main sound grid shows filtered results in a responsive layout: 
// Grid layout adjusts by screen size
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
  {sounds.map((sound) => (
    <SoundCard key={sound.name} sound={sound} />
  ))}
</div>

​
Empty State

When no sounds match your filters:
The grid shows a helpful message with a “Clear filters” button to reset all filters at once.

​
Keyboard Navigation

Navigate the sound grid efficiently with keyboard shortcuts:
  • Arrow Keys: Move between sound cards
  • Enter: Open sound detail view
  • Escape: Close detail view
  • Space: Preview sound on hover
  • Shift + Click: Multi-select sounds
The grid uses role="grid" and aria-label="Sound library" for screen reader accessibility.

​
Sound Collections

Collections are curated sets of themed sounds: 
interface Collection {
  name: string;              // Collection identifier
  title: string;             // Display name
  description: string;       // What's included
  icon: string;              // Visual identifier
  disclaimer?: string;       // Legal/licensing info
}
Browse collections at /collections or view individual collections at /collections/[name].

​
World of Warcraft Collection

The Warcraft collection includes 110 iconic sounds:
  • Interface chimes and UI sounds
  • NPC voices and dialogue
  • Combat impacts and weapon sounds
  • Dungeon doors and environmental audio
  • Quest complete notifications
See the Collections Guide for more details.

​
Related Sounds

When viewing a sound detail page, discover similar sounds: 
// Get related sounds in same broad category
const related = getRelatedSounds(
  currentSoundName,
  broadCategory,
  8 // limit
);
Related sounds help you:
  • Find variations of similar effects
  • Discover alternatives with different characteristics
  • Build cohesive sound themes for your UI

​
Filtering Performance

Soundcn uses optimized filtering for instant results: 
import { useDeferredValue } from "react";

// Prevents UI blocking during filtering
const deferredSounds = useDeferredValue(filteredSounds);

​
Batch Operations

Select multiple sounds for batch actions:
1

Enter Select Mode

Hold Shift and click any sound card
2

Select Sounds

Click multiple cards to build your selection
3

Batch Install

Copy CLI commands to install all selected sounds at once

​
Selection State

The selection system tracks: 
interface SelectionState {
  selectMode: boolean;        // Is selection mode active?
  selectedNames: Set<string>; // Which sounds are selected
}

​
Preview on Hover

Hover over sound cards to hear a quick preview: 
<SoundCard
  sound={sound}
  onPreviewStart={(name) => playSound(name)}
  onPreviewStop={() => stopSound()}
/>
Preview automatically stops when you move to a different card or leave the grid.

​
Accessing Sound Data

Retrieve sounds programmatically: 
import { getAllSounds } from "@/lib/sound-data";

const sounds = getAllSounds();
// Returns full catalog, sorted alphabetically

​
Best Practices

Performance: The catalog is cached per request using React’s cache() function. Don’t call getAllSounds() repeatedly in components.
Search UX: Always show the current result count so users know how many sounds match their filters.
Accessibility: Maintain keyboard navigation and ARIA labels when customizing the browsing experience.

​
Next Steps

Now that you know how to browse and find sounds:

Build docs developers (and LLMs) love

Get started for freeTalk to us