Soundcn

项目概述

Soundcn 是专为现代 React 与 shadcn/ui 生态打造的微交互音效注册表。它精选了 800 余款高质量 UI 反馈声效，通过轻量级 Web Audio 封装让开发者能够轻松为按钮点击、开关切换、弹窗确认、点赞收藏及 Toast 通知等操作注入生动的听觉反馈。

核心特性

• 🔊 800+ 精选高品质音效：涵盖清脆点击（Clicks）、机械开关（Switches）、提示铃声（Chimes）、赛博科幻（Sci-Fi）与游戏交互等丰富分类。
• ⚡ 轻量级零延迟 Web Audio 引擎：自动进行音频预加载与内存缓存，保证即点即响的高性能响应，支持动态音量调节与多声道并发。
• 📋 shadcn CLI 极速分发：支持直接通过 npx shadcn add 命令将音效文件与 useSound Hook 一键添加到项目工程中。
• 🔇 无障碍与静音控制集成：开箱即用支持全局静音状态管理、用户音量偏好持久化存储与系统级辅助偏好检测。

快速上手与示例代码

npx shadcn@latest add https://soundcn.xyz/r/use-sound
# 或安装特定音效资源包
npx shadcn@latest add https://soundcn.xyz/r/click-pack

import React from 'react';
import { Button } from '@/components/ui/button';
import { useSound } from '@/hooks/use-sound';

export function InteractiveButton() {
  const { play } = useSound('/sounds/pop.mp3', { volume: 0.5 });

  return (
    <Button onClick={() => play()}>
      点击体验触觉级声音反馈
    </Button>
  );
}

技术选型建议与适用场景

• 非常适合：高品质精细化交互体验的 Web 独立产品、设计工具、数字工作台、休闲网页游戏以及注重微交互细节的 SaaS 应用。
• 与自行寻找音频对比：Soundcn 经过专业音频压缩与网页端体积优化，兼具极小体积（平均几 KB）与高频音质表现，免去音源授权和格式转码困扰。