无需音频文件,为你的网站添加UI音效

📅 2026/6/16 5:25:06
无需音频文件,为你的网站添加UI音效
一个让我纠结了半天的需求之前给自己做的小工具网站加交互反馈总觉得按钮点下去没啥感觉想配点音效又嫌麻烦——找音效文件、处理版权、加载一堆 mp3 拖慢页面速度。后来看到 tiks 这个库2KB 不到一个音频文件都不用全靠代码实时合成声音试了一下发现还真挺好使的。声音是算出来的不是播文件tiks 的思路跟传统音效库完全不一样。别的库要加载 mp3、wav它直接拿 Web Audio API 的振荡器和噪声缓冲来算声音。浏览器播完自动回收没有下载、没有解码、没有缓存。内置十种即开即用的音效从按钮点击的短促敲击、开关切换的音调升降、操作成功的悦耳铃铛到鼠标悬停的轻响、页面切换的过渡声日常交互场景基本都盖住了。所有声音都统一在一个主题下听着协调不会乱。默认 soft 主题温暖圆润有点苹果那股子精致劲切到 crisp 就变的锐利带感像机械键盘的反馈。不满意还能用 defineTheme 自己调基础频率、波形类型、滤波器参数都能改。接入成本非常低npm 装完 import 进来第一次用户交互时调个 init然后 click、success、toggle 随便调。React 有 useTiks hookVue 有 useTiks composable各加 300 字节自动初始化不用担心重渲染的性能问题。想极致瘦身的话按需引入没用的音效不会打包。连 npm 都懒得装也行CDN 直接引入一个 script 标签就完事了。默认音量只有30%不会吓人一跳。不过有些地方得注意合成的声音毕竞不是真实录音追求拟真音效的话这个库满足不了你它更适合那种简洁的 UI 反馈声。浏览器自动播放策略限制比较严必须在用户第一次交互之后才能 init不然会被静默拦截。另外目前只有十种预设复杂场景可能不够用得自己拿 defineTheme 去搓。下载链接https://pan.quark.cn/s/e2380fdaf5a4