ui-audio-theme
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseUI 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
undefinedbash
undefinedVerify 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"
undefinedundefinedWorkflow
工作流程
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| Preset | Tone | Best For |
|---|---|---|
| Warm, professional | Banking, finance |
| Digital, clean | Wallet apps, trading |
| Bright, friendly | Social, consumer |
| Ultra-subtle | Productivity, tools |
| 8-bit inspired | Games, nostalgic |
| Rich, refined | High-end apps |
assets/vibe-presets.json| 预设名称 | 音调风格 | 适用场景 |
|---|---|---|
| 温暖、专业 | 银行、金融类应用 |
| 数字化、简洁 | 钱包应用、交易平台 |
| 明亮、友好 | 社交、消费类应用 |
| 极致简约 | 生产力工具、办公应用 |
| 8-bit复古风 | 游戏、怀旧类应用 |
| 饱满、精致 | 高端应用 |
Step 3: Generate the Audio Theme
步骤3:生成音频主题
bash
undefinedbash
undefinedUsing preset vibe
Using preset vibe
python scripts/generate_theme.py
--vibe "crypto-modern"
--output-dir "./audio-theme"
--vibe "crypto-modern"
--output-dir "./audio-theme"
python scripts/generate_theme.py
--vibe "crypto-modern"
--output-dir "./audio-theme"
--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"
--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"
--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"
--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"
--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
undefinedpython scripts/generate_theme.py --list-sounds
undefinedStep 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
按钮音效
| Constant | Description |
|---|---|
| Main action buttons |
| Secondary/ghost buttons |
| Delete/cancel actions |
| 常量名称 | 描述 |
|---|---|
| 主要操作按钮 |
| 次要/幽灵按钮 |
| 删除/取消操作 |
Navigation
导航音效
| Constant | Description |
|---|---|
| Tab navigation |
| Back button/gesture |
| Forward navigation |
| Menu drawer open |
| Menu dismiss |
| 常量名称 | 描述 |
|---|---|
| 标签页切换 |
| 返回按钮/手势 |
| 前进导航 |
| 菜单抽屉打开 |
| 菜单收起 |
Feedback
反馈音效
| Constant | Description |
|---|---|
| Success confirmation |
| Error alert |
| Warning indicator |
| Information notice |
| Badge/counter update |
| 常量名称 | 描述 |
|---|---|
| 成功确认 |
| 错误提示 |
| 警告提示 |
| 信息通知 |
| 徽章/计数器更新 |
States
状态音效
| Constant | Description |
|---|---|
| Switch enabled |
| Switch disabled |
| Checkbox selected |
| Checkbox deselected |
| Loading initiated |
| Loading finished |
| 常量名称 | 描述 |
|---|---|
| 开关启用 |
| 开关禁用 |
| 复选框选中 |
| 复选框取消选中 |
| 加载开始 |
| 加载完成 |
Modals
弹窗音效
| Constant | Description |
|---|---|
| Modal appearance |
| Modal dismissal |
| Tooltip reveal |
| Dropdown expand |
| Dropdown collapse |
| 常量名称 | 描述 |
|---|---|
| 弹窗出现 |
| 弹窗关闭 |
| 提示框显示 |
| 下拉菜单展开 |
| 下拉菜单收起 |
Transactions (Wallet-specific)
交易音效(钱包专属)
| Constant | Description |
|---|---|
| Transaction sent |
| Payment received |
| Transaction waiting |
| Confirmation success |
| 常量名称 | 描述 |
|---|---|
| 交易已发出 |
| 收款到账 |
| 交易待处理 |
| 交易已确认 |
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 exports ready-to-use constants:
constants.tstypescript
import { UI_SOUNDS } from './audio-theme/constants';
const audio = new Audio(UI_SOUNDS.BUTTON_CLICK_PRIMARY);
audio.volume = 0.3;
audio.play();生成的文件导出了可直接使用的常量:
constants.tstypescript
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 namesResources
相关资源
- - CLI tool for generating themes
scripts/generate_theme.py - - Detailed sound design best practices
references/sound-design-guide.md - - Predefined vibe configurations
assets/vibe-presets.json - - Example output manifest
assets/theme-template.json
- - 用于生成主题的CLI工具
scripts/generate_theme.py - - 详细的音效设计最佳实践文档
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,支持音效、音乐和语音生成。