Cuelume 14个交互声音逐个详解：tap、type、select到底怎么选

Cuelume 14个交互声音逐个详解：tap、type、select到底怎么选

【免费下载链接】cuelumeCuelume is a curated sound palette, not an audio engine. It gives buttons, links, toggles, and completed actions clear feedback without asking developers to design sounds themselves. Add an attribute, call bind(), done.项目地址: https://gitcode.com/gh_mirrors/cu/cuelume

Cuelume 是一个精选的 Web 交互声音库（curated sound palette），内置 14 个交互音效：按钮点击、文字输入、下拉选择、开关切换、成功提示等，每个界面任务各配一种声音。它不是音频引擎，不用音频文件——所有声音都由 Web Audio 实时合成，零运行时依赖。给元素加一个属性，调用一次bind()，反馈声就到位了。

先懂一个原则：按"任务"选声音，不按"音色"

很多人挑声音靠耳朵：这个好听、那个可爱。Cuelume 的设计反过来——每个声音对应一类界面任务，你只需要问自己"这个操作是什么性质的"，声音自然就有了。

这 14 个声音在 src/sounds/recipes.ts 中以"配方"形式定义，可以按材质家族分成 4 组，听感上天然分门别类：

材质	负责的任务	包含的声音
🪵 木与键	输入操作	tap、type、select、toggle
💨 气流	运动与过渡	open、close、navigate、count
🥁 软木琴（mallet）	结果反馈	success、warning、error
🔮 玻璃	存在与状态	ready、attention、loading

好处是：用户在听到具体声音之前，材质就已经告诉他"这是一次输入"还是"一个结果落地了"。同一族的声音彼此协调，换主题时含义不变（主题定义见 src/sounds/themes.ts）。

输入组：tap、type、select、toggle 详解

1️⃣ tap —— 按钮、链接、直接激活

配方：recipes.ts#L161-L173。

一小声玻璃质感的敲击：先是钉子般的轻"嗒"，紧接着玻璃短促震颤。适用于保存、发送、提交等主按钮，以及所有链接点击。

• 它会自动感知输入方式：触屏比鼠标更柔和浑圆，键盘激活更短促，手写笔更清脆
• 连续快速点击时自动变轻，不会吵

2️⃣ type —— 文字输入

配方：recipes.ts#L179-L188。

一次真实的键盘击键：开关的"咔"、键帽的碰撞、触底的闷响，合在同一击里。每一下键音的音高和重量都略有不同，像真的在不同键上打字。

细节很讲究（规则实现在 src/interactions/bind.ts）：

• 只在打了字的那个输入框上响；密码框永远不响
• 快速打字时最多每 40ms 响一次
• 空格键更响、回车最重、退格更低；退格长按会持续删除出声，删空自动停

3️⃣ select —— 下拉、菜单、列表

配方：recipes.ts#L190-L197。

清脆的木质卡位声，像拨码开关"嗒"地卡进一个槽：上方是一记利落的棘轮声，下面是小木敲击垫底。

适用面比名字宽：下拉菜单、列表选项、选项卡、分段控件、单选/复选框组、滑块步进、自动补全接受，都归它。

• 原生<select>在值改变时才响（不是打开菜单时）
• 选择靠后的选项音高微微上扬，选靠前的微微下落，方向一听便知

4️⃣ toggle —— 开关切换状态

配方：recipes.ts#L199-L207。

清脆的"啪"一声，带一点木质身体——像小开关被啪地拨过去。点赞、收藏、星号、开关、复选框都用它。

有个巧思：关闭时滑动方向会反过来（"嗒"朝上），所以打开和关闭一听就能区分。

运动组：open、close、navigate、count 详解

5️⃣ open —— 菜单、抽屉、弹窗展开

配方：recipes.ts#L209-L217。

空气被向上吸起，中间夹着一个渐渐浮起的小音：一次"呼吸"，面板随之打开。菜单、抽屉、对话框、折叠面板展开时用它。

6️⃣ close —— 关闭与取消

配方：recipes.ts#L219-L227。

与 open 相反：空气向下落拢，压在一个低沉、被阻尼的木琴音上。关闭、取消、拖拽放弃都用它。需要"郑重"的删除确认？close加重音即可。

7️⃣ navigate —— 路由、翻页、轮播

配方：recipes.ts#L251-L258。

一段柔和的"呼"声，气流向上扬起；传direction: "back"时气流向下落，正好用于返回键和轮播回退。页面切换、路由跳转、画廊翻页都归它。

8️⃣ count —— 数字滚动到新值

配方：recipes.ts#L314-L323。

一口气随数字升起，垫着柔和的玻璃音，声音持续时间和数字动画一样长。数字从 0 滚到 1,284？播放一次count并把duration设为动画时长（毫秒，300–2000 之间）。倒计时传direction: "back"，气流会落下来。

⚠️ 一个数字只在开始滚动时响一次，绝不要每个数字响一次；每秒更新多次的实时价格，干脆别响。

结果组：success、warning、error、loading 详解

结果类声音全部是软木琴材质，而且每次听起来都一样——这是刻意的：结果的语义不能模糊。

9️⃣ success —— 确认完成

配方：recipes.ts#L229-L239。

一个柔和的木琴和弦（C–G–E），音与音之间刻意拉开，互不打架，落在一个小小的"房间"里。保存成功、支付确认、部署完成都用它；支付和发布这种大事，加重音。

🔟 warning —— 做完了，但要你过目

配方：recipes.ts#L260-L268。

一个木琴五度音（A 和 E），不亮也不沉，卡在 success 和 error 中间：部分失败、接口弃用提醒、连接重试中。

11️⃣ error —— 可恢复的失败

配方：recipes.ts#L241-L249。

一段压低的、短的木琴和弦：安静的、可挽回的拒绝。表单被拒、权限不足、AI 调用模型失败都用它，不会吓人。

12️⃣ loading —— 慢任务刚开始

配方：recipes.ts#L270-L278。

一个低沉的音缓缓浮起又消散（约一秒），全程"不被敲击"——含义很明确：活开始了，但什么都没落地。上传、导出、构建、AI 生成开始时用它。

状态组：ready、attention 详解

13️⃣ ready —— 结果已经在那了

配方：recipes.ts#L284-L293。

一个温暖的玻璃音，带着小小的房间混响：和 success 一样会"落进空间"，但没有"确认"的含义。导出文件可以下载了、AI 回复流式输出完成、打开的会话来了新消息，都归它。

14️⃣ attention —— 需要你回应才会继续

配方：recipes.ts#L299-L308。

一个高音玻璃铃，响得最久：A 和 E 一起敲出，铃声中藏着一个慢速的微颤，像"在等你"。提醒到点、权限请求卡住了、AI 工具调用要你批准——都是它。

tap、type、select 到底怎么选？一张表说清

这是最常被问的三兄弟，判断标准只有一个：这个元素接收的是哪种输入？

你的元素	用户在做什么	选谁
按钮、链接、点击触发的操作	点一下，动作立即发生	tap
文本框、搜索框、富文本	连续敲字	type
下拉、选项卡、单选、菜单项	从一组里挑一个	select
复选框、开关、点赞	在两种状态间切换	toggle

边界情况也有官方答案（README 的 "Which cue?" 大表，README.md 第 88–140 行）：

• 滑块/步进器 →select+ 轻音 + 方向
• 拖拽拿起 →select；放下 →tap重音；取消 →close轻音
• AI 回复流式完成 →ready轻音；生成被停止 →close
• 次要/幽灵按钮 →tap轻音；主按钮 →tap正常音

14 个声音 × 3 档强度 × 4 种主题 = 56 种搭配

同一个声音不是音量旋钮的变体，而是三档各自的编配：

• subtle（轻）：去掉装饰层——玻璃敲击少了那声钉响，打字变成安静的笔记本键盘
• normal（正常）：默认编配
• strong（重）：只在这档才出现的一层——更大的玻璃、更深的触底闷响

强度通过属性data-cuelume-emphasis或代码选项设置。四个主题则换"材质"：default（温暖）、mech（干爽机械）、bubble（俏皮，见 src/sounds/bubble.ts）、press（精密硬件手感，见 src/sounds/press.ts）。四套主题音量已对齐，切换只改变质感不改变响度，实现见 src/sounds/themes.ts。

三步接入：加属性、调 bind、按需 play

第 1 步，安装（ESM，现代浏览器）：

npm install cuelume

第 2 步，给元素加data-cuelume-*属性，值留空即用默认声音：

<button>import { bind, play } from "cuelume"; bind(); play("loading"); // 结果类声音跟业务逻辑走，用代码触发 play("success", { emphasis: "strong" });

属性适合"跟着元素走"的输入类声音；success、error、loading这类结果声音应该跟着应用实际状态走，由代码play()触发。

避开这些常见坑

• ❌不要 hover 就响：悬停一触发就是一串，任何声音都会被磨没
• ❌不要逐字响：流式输出的每个 token、数字滚动的每一位，都不响；结束时响一次
• ✅给频繁播放的应用加一个可见的"声音"开关，接到setEnabled()上；音量用setVolume()控制
• ✅ 事件永远最多响一个声音，嵌套标记元素以里层为准，不会叠爆
• ✅ Web Audio 被浏览器挡住时play()静默降级，不会抛错

小结

Cuelume 把"设计声音"这件事收编成了"认领任务"：14 个交互声音，一个界面任务一个——tap管点击、type管敲字、select管挑选、toggle管切换，运动交给气流，结果交给木琴，等待交给玻璃。声音配方全部集中在 src/sounds/recipes.ts，主题在 src/sounds/ 目录下各占一个文件，想深入了解"专业音色是如何调出来的"，可以读设计文档 docs/superpowers/specs/2026-09-23-professional-palette-design.md 和 docs/superpowers/specs/2026-09-23-bubble-and-count-design.md。

【免费下载链接】cuelumeCuelume is a curated sound palette, not an audio engine. It gives buttons, links, toggles, and completed actions clear feedback without asking developers to design sounds themselves. Add an attribute, call bind(), done.项目地址: https://gitcode.com/gh_mirrors/cu/cuelume