无需音频文件,为你的网站添加UI音效
一个让我纠结了半天的需求
之前给自己做的小工具网站加交互反馈,总觉得按钮点下去没啥感觉,想配点音效又嫌麻烦——找音效文件、处理版权、加载一堆 mp3 拖慢页面速度。后来看到 tiks 这个库,2KB 不到,一个音频文件都不用,全靠代码实时合成声音,试了一下发现还真挺好使的。

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