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/cuelumeCuelume 是一个精选的 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考