【免费下载链接】tab-outKeep tabs on your tabs. Turn your New tabs page into a mission control, so you can close them easily. Built for people who open too many tabs and never close them.项目地址https://gitcode.com/gh_mirrors/ta/tab-out点击查看免费下载Tab Out 是一个 Chrome 浏览器插件把新标签页变成所有已打开标签页的管控台按域名分组、一键清理关闭标签时还会播放一声清脆的 Swoosh 音效并炸出彩纸粒子。这篇文章带你拆透这两个爽点背后的技术——它不依赖任何音频文件也不依赖任何动画库音效由Web Audio API 实时合成彩纸由纯 JavaScript 手写粒子物理驱动。全部实现都集中在 extension/app.js 里代码量极小非常适合新手学习。 文中所有代码链接都指向仓库内的真实源码你可以边读边对照全程无需复制粘贴任何代码。先看效果再看源码在哪在 Tab Out 里点一次Close all N tabs你会经历这么一套连招 一声短促的嗖——Swoosh 卡片中心炸开 17 片彩纸先抛起、后下落、渐渐淡出✨ 卡片整体缩小淡出屏幕下方弹出 Toast 提示这三件事都由 extension/app.js 里的三个核心函数完成行号可以直接跳转查看功能函数源码位置Swoosh 合成音效playCloseSound()app.js#L298-L338彩纸粒子系统shootConfetti(x, y)app.js#L347-L412卡片关闭动画animateCardOut(card)app.js#L420-L431为什么不用现成的 mp3 文件和彩纸库因为这是一个零服务端、零依赖的纯插件见 extension/manifest.json作者坚持能用几十行原生 API 解决的绝不引入一个文件。下面逐个拆解。Swoosh 关闭音效Web Audio API 四步合成法很多人以为嗖的音效一定来自音频文件其实它完全可以用数学公式算出来。playCloseSound() 的做法可以概括为四步合成第 1 步用随机数制造白噪声白噪声听起来像沙沙声——它就是把每秒几万个随机数直接当声音样本播放。代码先用AudioContext创建一个 0.25 秒的缓冲ctx.createBuffer然后循环填充随机样本。第 2 步给噪声画上包络让它像风掠过裸白噪声又响又硬难听。代码给每个样本乘上一个包络envelope前 10% 的时间音量快速爬升快起音剩下 90% 按 1.5 次方的曲线平滑衰减。这一步让噪声从白噪音变成了空气流动。第 3 步带通滤波器扫频制造嗖的感觉 这是整个音效的灵魂。噪声通过一个BiquadFilter 带通滤波器而滤波器的中心频率在 0.25 秒内从4000Hz 指数下滑到 400HzexponentialRampToValueAtTime。高频→低频的滑动正是你听到嗖——时那种音调下滑的听感来源Q 值 2.0则让滤波曲线足够聚焦声音干净不浑浊。第 4 步增益控制音量用完即释放最后用一个GainNode把整体音量压在 0.15不吵人再指数衰减到接近零随后把噪声源 → 滤波器 → 增益 → 扬声器四个节点串成一条流水线播放。播放完 500ms代码还会主动ctx.close()释放音频上下文——对插件这种随时可能被调用的场景避免资源泄漏是个好习惯。整段调用外裹了一层try/catch如果浏览器不支持 Web Audio就静默失败绝不影响关闭功能本身。 小结playCloseSound的配方 白噪声 包络 扫频带通 音量衰减。把这四条曲线叠在一起嗖就诞生了。同样的思路可以合成门轴声、翻页声、雨声——都是 Web Audio API 的基本功。彩纸粒子物理requestAnimationFrame 手写积分器关掉标签时炸开的彩纸由 shootConfetti(x, y) 实现。它没有用任何库就是一个 60 帧/秒的手写粒子模拟拆开看一共五个要素要素实现方式粒子数量固定 17 片保证爆炸感又不卡顿外观8 色暖色调琥珀 / 鼠尾草 / 石板 / 玫瑰圆形与 2px 圆角方块各占一半尺寸随机 5–11px初始速度随机角度 0–360° × 随机速率 60–180纵向额外向上偏置 -80先抛起再落下重力恒定 200位置公式y vy·t ½·g·t²——中学物理的匀加速运动直接照搬生命周期随机 700–900ms后半程透明度线性归零时间到直接el.remove()几个值得偷师的小细节方块会自旋圆片不会。只有方形粒子叠加了rotate(elapsed × 200deg)因为圆旋转根本看不出来——写粒子特效时只画看得见的运动是省性能的关键。用transform移动而不是left/top。粒子用position: fixed钉在屏幕坐标每帧只改transform和opacity浏览器可以走合成器层动画更顺滑。闭包保存每个粒子的物理状态。角度、速度、重力都定义在粒子自己的作用域里requestAnimationFrame回调里就地更新粒子寿命结束即从 DOM 移除没有全局数组要维护天然无内存泄漏。️pointer-events: none让彩纸飘过按钮时完全不干扰点击体验细节很加分。一次关闭动作的完整编排音效和彩纸不是各自为政的它们被统一编排进插件的事件委托体系里——整个 app.js 只有一个挂在document上的点击监听器用data-action属性分发所有按钮行为。几个触发点对照关闭单个标签close-single-tab先调 playCloseSound()再在标签条中心调 shootConfetti()标签条缩小淡出整组关闭close-domain-tabs音效 animateCardOut() 在卡片中心炸彩纸卡片 300ms 内缩小消失一键清空全部标签close-all-open-tabs一次音效每张卡片都各炸一簇彩纸app.js#L1423-L1429像多米诺骨牌一样依次倒下场面最壮观卡片淡出的.closing样式由 extension/style.css 里的 CSS transition 完成见 style.css#L263关闭后若页面已无标签还会弹出Inbox zero, but for tabs的空状态彩蛋app.js#L450-L471。给新手的学习价值这套效果组合拳最值得借鉴的不是某个炫酷技巧而是**零依赖的工程取舍**声音不用文件——Web Audio API 四步合成一个 mp3 都不带动画不用库——一个requestAnimationFrame闭包就是完整的粒子物理引擎资源用完即走——音频上下文 500ms 后关闭粒子到期即删 DOM插件长时间挂着也不漏内存优雅降级——try/catch包住音频不支持就静默跳过核心功能不受影响。如果你想在自己的项目里复刻关闭/删除/完成这类交互的爽感直接对照 extension/app.js#L298-L412 这段 115 行的源码就够了先学会用噪声扫频合成 Swoosh再把初速度 重力 生命周期三件套搬进你的粒子系统就能得到一套体积几乎为零、手感却很精致的交互反馈。赞分享【免费下载链接】tab-outKeep tabs on your tabs. Turn your New tabs page into a mission control, so you can close them easily. Built for people who open too many tabs and never close them.项目地址https://gitcode.com/gh_mirrors/ta/tab-out点击查看免费下载相关推荐突破浏览器限制code-server音频输出全方案与Web Audio API实战指南突破浏览器限制code server音频输出全方案与Web Audio API实战指南 引言云端编码的无声痛点 你是否曾在使用code server进行远程后端开发工具Web通达信缠论指标插件K线结构快速可视化通达信缠论指标插件K线结构快速可视化 这款开源的通达信缠论指标插件是一个加载到通达信行情软件的动态库组件把一段K线序列加工成顶底分型、线段连线、中枢区间框和金融科技如何用Web Audio API打造专业音频效果从入门到精通的滤波器实战指南如何用Web Audio API打造专业音频效果从入门到精通的滤波器实战指南 Web Audio API是现代前端开发中处理音频的强大工具它允许开发者在浏览前端文档创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考