慣性聚合 高效追讀感興趣之博客、新聞、科技資訊
閱原文 以慣性聚合開啟

推薦訂閱源

博客园 - 司徒正美
V
V2EX
T
Tailwind CSS Blog
有赞技术团队
有赞技术团队
aimingoo的专栏
aimingoo的专栏
Apple Machine Learning Research
Apple Machine Learning Research
IT之家
IT之家
Blog — PlanetScale
Blog — PlanetScale
A
About on SuperTechFans
月光博客
月光博客
T
The Blog of Author Tim Ferriss
宝玉的分享
宝玉的分享
Martin Fowler
Martin Fowler
博客园 - 聂微东
The GitHub Blog
The GitHub Blog
V
Visual Studio Blog
WordPress大学
WordPress大学
酷 壳 – CoolShell
酷 壳 – CoolShell
Engineering at Meta
Engineering at Meta
GbyAI
GbyAI

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant Common SOC 2 Failures (Real World) Stop Vibe-Checking Your AI App: A Practical Guide to Evals How to Use SonarQube and SonarScanner Locally to Level Up Your Code Quality Your Next To-Do App Is Dead — I Replaced Mine with an OpenClaw AI Sign a Nostr event in 60 lines of Python using coincurve — no nostr-sdk, no nbxplorer, no rust toolchain ITGC Audit Explained Like You’re in Big 4 Patch Tuesday abril 2026: Microsoft parcha 163 vulnerabilidades y un zero-day en SharePoint Stop scraping everything: a better way to track competitor price changes Listing on MCPize + the Official MCP Registry while routing payments OUTSIDE the marketplace — how I kept 100% of my x402 revenue Building an AI-Powered Risk Intelligence System Using Serverless Architecture Why We Ripped Function Overloading Out of Our AI Toolchain Testing AI-Generated Code: How to Actually Know If It Works SaaS Churn Is Killing Your Business. Here Is What to Do About It (Without a Support Team) The Speed of AI Is No Longer Linear - And Self-Improving Models Are Why How to Implement RBAC for MCP Tools: A Practical Guide for Engineering Teams From Standard Quote to Persuasive Proposal: AI Automation for Arborists I built a CLI that scaffolds complete multi-tenant SaaS apps Axios CVE-2025–62718: The Silent SSRF Bug That Could Be Hiding in Your Node.js App Right Now The dashboard that ended our friendship Data Pipelines Explained Simply (and How to Build Them with Python)
吾于单HTML文件中,筑一混译之器。
Christian Ch · 2026-05-24 · via DEV Community

此乃吾以 Web Audio API 模拟八种播放环境之法,运行频谱分析,并生成可操作混音反馈之术——皆在浏览器中完成,无任何依赖。

每调音师皆知此仪。混音既成,导出之,移于手机。步至车前,于厨中蓝牙音箱播放之。试廉价耳塞一副。每循环需时十分钟。至第三次,则失其参照,而会之气势亦消矣。
世有众插件,可辨混音之状——频域平衡、响度、立体声宽度。然能试音于众听之器者,实寥寥矣。
此乃CX Mix Translator所解之题也。投一立体回响,切换八种监听模拟,配级相合之A/B,从容离去,得六项结构化诊断与三项排序行动项。音频永驻浏览器之中。
此篇所述,乃其工程之决断也。
何故浏览器?
吾欲无碍。不须插件之装,不须录音棚之合,不须账户之立,不须上传于服务器。夜半之时,混音之士当能启一URL,拽入一文件,得解其惑。
网络音频之API,予尔所需:解码、二阶滤波、声道分离、增益控制,及离线渲染之境以供分析。然权衡之处在于,浏览器音频非如原生DSP插件般精准至样本——然于翻译校验之器,感知之精准重于样本之精准。尔所问者,非“声韵于手机将隐”耶?非“此滤波器是否恰在3.2 kHz?”也。
整器一HTML文件,自足其用。无框架,无构建,无npm安装。启之,即功成.
拟八播放之境
每监测之式,皆轻便之拟,非硬器之仿。其旨非模iPhone 14之音器——乃揭境所生之译险。
此八式所向者何:

单声——左右相加。显相位谐和之弊,及宽度相关之要素而溃。
手机——频带受限,约三百八十赫至六千八百赫,中高音稍重,单声稍显。试音之能否存于微驱动。
笔记本电脑——低频减损,立体声宽度收窄,中音稍增。最常见之初听环境。
小音箱——方盒低音突出,声场提升,频带窄。厨房蓝牙之域.
车——低音夸张,中频微挖,高频提升。试低音能否在低音炮辅助环境中传达.
俱乐部——低频能量厚重,高频存在宽广。试持续高响下混音之态。
音量低 — 寂静监听之逆等响曲线。试音,以观人轻奏时,音律是否可辨.
旁通 — 平直基准。A/B参照.

由二阶滤波链构建之模拟
诸式皆由层叠之Web Audio BiquadFilterNode所构。譬如电话之模拟,则联高切滤波器(截380赫兹以下)、低切滤波器(截6.8千赫以上),及峰化滤波器以增2至4千赫之频段:
javascript// 电话模拟——简略
const hp = audioCtx.createBiquadFilter();
hp.type = 'highpass';
hp.frequency.value = 380;
hp.Q.value = 0.7;

const lp = audioCtx.createBiquadFilter();
lp.type = 'lowpass';
lp.frequency.value = 6800;
lp.Q.value = 0.7;

const presence = audioCtx.createBiquadFilter();
presence.type = 'peaking';
presence.frequency.value = 3000;
在值上增三有半;
在Q值上增一有二;

源接于高音,接于低音,接于在值上增三有半者,接于目的地;
车与俱乐部模式增低架之助。低音量模式施弗莱彻-蒙森式补偿——助低音与高音,以拟静放时之感知损失;
立体宽度之操纵
数种模式使立体图像狭窄或坍缩。此乃利用M/S(中/侧)矩阵,由通道分合器所构建:
javascript// 控制M/S宽度
有分音器者,乃音频之器也,以二分之。
有合并者,乃音频之境所创,能合二声道。
音域之中增益之器,由音域之造器者所创。
侧增益者,音频上下文所创增益也。

// 宽度自0.0(单声道)至1.0(全立体声)
midGain.gain.value = 1.0;
sideGain.gain.value = width; // 如"laptop"则为0.3

// 分左右,得中声道(左右相加)与侧声道(左右相减),缩放,再合并
单式之境,侧增益归零。膝上机与掌中器之境,减至0.2–0.4。此可捕侧部独存之素——广袤之混响尾音,移位之合成音,立体拓宽之人声——并标为翻译之险.
等量对比之A/B
此乃使器可信之妙。每试皆施感观增益之调,俾通Bypass与诸式,所现者译异,非响异也。无此,则响大者必觉佳,较之无益。
调值以耳校之于粉红之噪,经诸滤链,复以诸调之参考混音细调之。
光譜分析
此器運行六種診斷類別:

單音兼容——總和時能量是否顯著減落?
人聲存在——1–5千赫範圍是否足夠穿透?
低音翻譯——次/低音平衡是否跨情境維持?
刺耳風險——2.5–6千赫範圍是否有過度能量?
立体宽—混音是否过度依赖侧信息?
动态/限制—峰值因子是否危险偏低?

离线频带分析
非实时运行分析器(其结果与播放位置相关),我通过并行离线音频上下文实例渲染完整文件——每频带一实例:
javascriptasync function analyseBand(buffer, lowFreq, highFreq) {
const offline = new OfflineAudioContext(
1, buffer.length, buffer.sampleRate
);
const source = offline.createBufferSource();
source.buffer = buffer;

const bp = offline.createBiquadFilter();
bp.type = 'bandpass';
bp.frequency.value = Math.sqrt(lowFreq * highFreq);
bp.Q.value = /* calculated from bandwidth */;

source.connect(bp).connect(offline.destination);
source.start();

const rendered = await offline.startRendering();
return computeRMS(rendered.getChannelData(0));
}
六频段——次低频、低频、低中频、中频、临场感、空气——各离线渲染,其均方根值输入启发式警示系统。此法得全文件平均,不倚播放头所在。
启发性警示
每项诊断,皆合频段均方根值与时域统计,动态之峰均比、单声道之左右相干、宽域之侧中比是也。简阈值验,得状(合/慎/警),一言诊断,一语建议.
此等见闻,汇为速较行,示各模态之译险,列三要行,依译效次第。
設計之決
三原則成其界面:
每分鐘之決,非每屏之特。凡控,皆隸主手之下。鍵盤捷徑處無所不辦:一二至八換式,B翻A/B,空格奏,O開檔,箭尋之。其旨,在於六十秒內審八式。
诊断与听诊共一帧。所见之结果位于波形右侧,非藏于标签之后。无钻取之操作,无次页之切换,无设置之面板。工程师所需,尽现眼前。
匠心所造,非仪表盘也。体式精简,细线分隔,四像素圆角,追踪大写标签。其视觉语言,取法于广播监听与计量之器,非SaaS仪表盘。宜若工坊之器,偶居于浏览器标签中。
输出
会话表导出为 JPG,绘于 2× DPR 画布——非截图也。此有深意,盖因浏览器截图 API 未能可靠摄录自造字体或精密间距。故导出乃逐元素编程绘制,于画布上下文尤然,为品牌字体(IBM Plex Mono)之手动字距后备亦在列。
吾次所营

LUFS-I 与 LRA 测量面板
匹配A/B对比之参考轨迹加载
波形感知之分析——合唱检测,使警示可明确标识最响亮之段落
保存与召回模式之快照比较

堆栈
HTML,CSS,纯JavaScript,Web音频API,Canvas 2D。一文件。无依赖。无构建步骤。
此工具有效于 cx-mix-translator.vercel.app。乃 CX Sonic Analyzer 之伴侣,于混音之际,实时谱分析由其掌之。二者相辅,覆盖工程师最需反馈之二阶段:混音之时(Sonic Analyzer)与预输出之前(Mix Translator)。

吾乃克里斯蒂安·奥孔库沃,独力构筑人工智能金融科技之器、音乐科技之软、体育分析之品。详察吾之作品集,或于GitHub得见。