ui-audio-theme

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

UI Audio Theme Generator

UI音频主题生成器

Generate cohesive sets of subtle, minimal UI sound effects using ElevenLabs text-to-sound-effects API. Create "audio themes" - coordinated sets of sounds that share a common aesthetic and map to standard UI interaction constants.
通过ElevenLabs文本转音效API生成风格统一、细腻简约的UI音效集合。创建「音频主题」——即风格一致的音效集合,对应标准UI交互场景。

Prerequisites

前置条件

bash
undefined
bash
undefined

Verify ElevenLabs API key is configured

Verify ElevenLabs API key is configured

echo $ELEVENLABS_API_KEY
echo $ELEVENLABS_API_KEY

If not set, get key from https://elevenlabs.io (Profile -> API Keys)

If not set, get key from https://elevenlabs.io (Profile -> API Keys)

Add to shell profile: export ELEVENLABS_API_KEY="your-key"

Add to shell profile: export ELEVENLABS_API_KEY="your-key"

undefined
undefined

Workflow

工作流程

Step 1: Discover the UI Vibe

步骤1:明确UI风格基调

Before generating sounds, understand the application's aesthetic:
Application Context:
  • What type of app? (wallet, dashboard, social, productivity)
  • Primary user emotion? (trust, delight, focus, calm)
  • Professional or playful interface?
Audio Direction:
  • Preferred tone? (warm/organic, clean/digital, retro/nostalgic, futuristic)
  • Reference sounds? (Apple-like clicks, game bleeps, banking chimes)
生成音效前,先确定应用的美学风格:
应用场景:
  • 应用类型?(钱包、仪表盘、社交、生产力工具)
  • 核心用户情感?(信任、愉悦、专注、平静)
  • 界面风格是专业风还是活泼风?
音频方向:
  • 偏好的音调?(温暖/自然、简洁/数字化、复古/怀旧、未来感)
  • 参考音效?(类似苹果的点击声、游戏提示音、银行提示音)

Step 2: Select a Vibe Preset

步骤2:选择风格预设

Available presets in
assets/vibe-presets.json
:
PresetToneBest For
corporate-trust
Warm, professionalBanking, finance
crypto-modern
Digital, cleanWallet apps, trading
playful-delight
Bright, friendlySocial, consumer
minimal-focus
Ultra-subtleProductivity, tools
retro-digital
8-bit inspiredGames, nostalgic
premium-luxury
Rich, refinedHigh-end apps
assets/vibe-presets.json
中提供以下预设:
预设名称音调风格适用场景
corporate-trust
温暖、专业银行、金融类应用
crypto-modern
数字化、简洁钱包应用、交易平台
playful-delight
明亮、友好社交、消费类应用
minimal-focus
极致简约生产力工具、办公应用
retro-digital
8-bit复古风游戏、怀旧类应用
premium-luxury
饱满、精致高端应用

Step 3: Generate the Audio Theme

步骤3:生成音频主题

bash
undefined
bash
undefined

Using preset vibe

Using preset vibe

python scripts/generate_theme.py
--vibe "crypto-modern"
--output-dir "./audio-theme"
python scripts/generate_theme.py
--vibe "crypto-modern"
--output-dir "./audio-theme"

Using custom vibe description

Using custom vibe description

python scripts/generate_theme.py
--vibe-custom "warm organic subtle wooden interface sounds"
--output-dir "./audio-theme"
python scripts/generate_theme.py
--vibe-custom "warm organic subtle wooden interface sounds"
--output-dir "./audio-theme"

Generate specific categories only

Generate specific categories only

python scripts/generate_theme.py
--vibe "crypto-modern"
--categories buttons feedback transactions
--output-dir "./audio-theme"
python scripts/generate_theme.py
--vibe "crypto-modern"
--categories buttons feedback transactions
--output-dir "./audio-theme"

List available presets

List available presets

python scripts/generate_theme.py --list-vibes
python scripts/generate_theme.py --list-vibes

List all sound names

List all sound names

python scripts/generate_theme.py --list-sounds
undefined
python scripts/generate_theme.py --list-sounds
undefined

Step 4: Regenerate Individual Sounds

步骤4:重新生成单个音效

bash
python scripts/generate_theme.py \
  --regenerate "button-click-primary,notification-success" \
  --vibe "crypto-modern" \
  --output-dir "./audio-theme"
bash
python scripts/generate_theme.py \
  --regenerate "button-click-primary,notification-success" \
  --vibe "crypto-modern" \
  --output-dir "./audio-theme"

Sound Categories

音效分类

Buttons

按钮音效

ConstantDescription
button-click-primary
Main action buttons
button-click-secondary
Secondary/ghost buttons
button-click-destructive
Delete/cancel actions
常量名称描述
button-click-primary
主要操作按钮
button-click-secondary
次要/幽灵按钮
button-click-destructive
删除/取消操作

Navigation

导航音效

ConstantDescription
nav-tab-switch
Tab navigation
nav-back
Back button/gesture
nav-forward
Forward navigation
nav-menu-open
Menu drawer open
nav-menu-close
Menu dismiss
常量名称描述
nav-tab-switch
标签页切换
nav-back
返回按钮/手势
nav-forward
前进导航
nav-menu-open
菜单抽屉打开
nav-menu-close
菜单收起

Feedback

反馈音效

ConstantDescription
notification-success
Success confirmation
notification-error
Error alert
notification-warning
Warning indicator
notification-info
Information notice
notification-badge
Badge/counter update
常量名称描述
notification-success
成功确认
notification-error
错误提示
notification-warning
警告提示
notification-info
信息通知
notification-badge
徽章/计数器更新

States

状态音效

ConstantDescription
toggle-on
Switch enabled
toggle-off
Switch disabled
checkbox-check
Checkbox selected
checkbox-uncheck
Checkbox deselected
loading-start
Loading initiated
loading-complete
Loading finished
常量名称描述
toggle-on
开关启用
toggle-off
开关禁用
checkbox-check
复选框选中
checkbox-uncheck
复选框取消选中
loading-start
加载开始
loading-complete
加载完成

Modals

弹窗音效

ConstantDescription
modal-open
Modal appearance
modal-close
Modal dismissal
tooltip-show
Tooltip reveal
dropdown-open
Dropdown expand
dropdown-close
Dropdown collapse
常量名称描述
modal-open
弹窗出现
modal-close
弹窗关闭
tooltip-show
提示框显示
dropdown-open
下拉菜单展开
dropdown-close
下拉菜单收起

Transactions (Wallet-specific)

交易音效(钱包专属)

ConstantDescription
tx-sent
Transaction sent
tx-received
Payment received
tx-pending
Transaction waiting
tx-confirmed
Confirmation success
常量名称描述
tx-sent
交易已发出
tx-received
收款到账
tx-pending
交易待处理
tx-confirmed
交易已确认

Output Structure

输出结构

audio-theme/
├── theme.json              # Theme manifest
├── constants.ts            # TypeScript constants
├── buttons/
│   ├── button-click-primary.mp3
│   ├── button-click-secondary.mp3
│   └── button-click-destructive.mp3
├── navigation/
├── feedback/
├── states/
├── modals/
└── transactions/
audio-theme/
├── theme.json              # Theme manifest
├── constants.ts            # TypeScript constants
├── buttons/
│   ├── button-click-primary.mp3
│   ├── button-click-secondary.mp3
│   └── button-click-destructive.mp3
├── navigation/
├── feedback/
├── states/
├── modals/
└── transactions/

Integration

集成方法

TypeScript Usage

TypeScript使用示例

The generated
constants.ts
exports ready-to-use constants:
typescript
import { UI_SOUNDS } from './audio-theme/constants';

const audio = new Audio(UI_SOUNDS.BUTTON_CLICK_PRIMARY);
audio.volume = 0.3;
audio.play();
生成的
constants.ts
文件导出了可直接使用的常量:
typescript
import { UI_SOUNDS } from './audio-theme/constants';

const audio = new Audio(UI_SOUNDS.BUTTON_CLICK_PRIMARY);
audio.volume = 0.3;
audio.play();

React Hook

React Hook示例

typescript
import { useCallback, useEffect, useRef } from 'react';

export function useUISound(soundUrl: string, volume = 0.3) {
  const audioRef = useRef<HTMLAudioElement | null>(null);

  useEffect(() => {
    audioRef.current = new Audio(soundUrl);
    audioRef.current.volume = volume;
    audioRef.current.preload = 'auto';
    return () => { audioRef.current = null; };
  }, [soundUrl, volume]);

  const play = useCallback(() => {
    if (audioRef.current) {
      audioRef.current.currentTime = 0;
      audioRef.current.play().catch(() => {});
    }
  }, []);

  return play;
}

// Usage
function SendButton() {
  const playClick = useUISound(UI_SOUNDS.BUTTON_CLICK_PRIMARY);
  return <button onClick={() => { playClick(); sendTransaction(); }}>Send</button>;
}
typescript
import { useCallback, useEffect, useRef } from 'react';

export function useUISound(soundUrl: string, volume = 0.3) {
  const audioRef = useRef<HTMLAudioElement | null>(null);

  useEffect(() => {
    audioRef.current = new Audio(soundUrl);
    audioRef.current.volume = volume;
    audioRef.current.preload = 'auto';
    return () => { audioRef.current = null; };
  }, [soundUrl, volume]);

  const play = useCallback(() => {
    if (audioRef.current) {
      audioRef.current.currentTime = 0;
      audioRef.current.play().catch(() => {});
    }
  }, []);

  return play;
}

// Usage
function SendButton() {
  const playClick = useUISound(UI_SOUNDS.BUTTON_CLICK_PRIMARY);
  return <button onClick={() => { playClick(); sendTransaction(); }}>Send</button>;
}

Howler.js

Howler.js使用示例

typescript
import { Howl } from 'howler';

const sounds = {
  click: new Howl({ src: [UI_SOUNDS.BUTTON_CLICK_PRIMARY], volume: 0.3 }),
  success: new Howl({ src: [UI_SOUNDS.NOTIFICATION_SUCCESS], volume: 0.4 }),
};

// Play on interaction
sounds.click.play();
typescript
import { Howl } from 'howler';

const sounds = {
  click: new Howl({ src: [UI_SOUNDS.BUTTON_CLICK_PRIMARY], volume: 0.3 }),
  success: new Howl({ src: [UI_SOUNDS.NOTIFICATION_SUCCESS], volume: 0.4 }),
};

// Play on interaction
sounds.click.play();

Best Practices

最佳实践

Volume Recommendations

音量建议

UI sounds should be mixed at 20-40% to remain unobtrusive.
UI音效的音量应设置在20-40%之间,避免干扰用户。

Accessibility

无障碍设计

  • Never rely solely on audio for critical information
  • Provide visual alternatives for all audio feedback
  • Allow users to disable sounds in settings
  • 切勿仅依赖音频传递关键信息
  • 为所有音频反馈提供视觉替代方案
  • 允许用户在设置中关闭音效

Subtlety Principle

简约性原则

The more frequently a sound occurs, the subtler it should be. Button clicks should be nearly imperceptible; transaction confirmations can be more noticeable.
音效出现的频率越高,就应该越低调。按钮点击声应几乎难以察觉;交易确认声可以相对明显一些。

Script Options

脚本参数选项

--vibe NAME           Preset vibe name
--vibe-custom DESC    Custom vibe description
--output-dir PATH     Output directory (default: ./audio-theme)
--format FORMAT       mp3 or wav (default: mp3)
--categories CATS     Specific categories to generate
--regenerate SOUNDS   Comma-separated sounds to regenerate
--prompt-influence N  0-1, higher = stricter prompt adherence (default: 0.5)
--list-vibes          Show available presets
--list-sounds         Show all sound names
--vibe NAME           Preset vibe name
--vibe-custom DESC    Custom vibe description
--output-dir PATH     Output directory (default: ./audio-theme)
--format FORMAT       mp3 or wav (default: mp3)
--categories CATS     Specific categories to generate
--regenerate SOUNDS   Comma-separated sounds to regenerate
--prompt-influence N  0-1, higher = stricter prompt adherence (default: 0.5)
--list-vibes          Show available presets
--list-sounds         Show all sound names

Resources

相关资源

  • scripts/generate_theme.py
    - CLI tool for generating themes
  • references/sound-design-guide.md
    - Detailed sound design best practices
  • assets/vibe-presets.json
    - Predefined vibe configurations
  • assets/theme-template.json
    - Example output manifest
  • scripts/generate_theme.py
    - 用于生成主题的CLI工具
  • references/sound-design-guide.md
    - 详细的音效设计最佳实践文档
  • assets/vibe-presets.json
    - 预定义的风格配置文件
  • assets/theme-template.json
    - 输出清单示例

Content-Specialist Integration

内容专家Agent集成

For custom sound generation beyond standard categories, use the content-specialist agent which has full ElevenLabs API integration for sound effects, music, and voice generation.
如果需要生成标准分类之外的自定义音效,可使用内容专家Agent,它完全集成了ElevenLabs API,支持音效、音乐和语音生成。