«یک پنجره مرورگر و یک وبکم، اکنون یک ساز موسیقی کاملاً کاربردی هستند.» این واقعیتِ Gesture Synth است؛ ابزاری که توسط اریک وی (Eric Wei) ساخته شده و در آدرس gesture-synth-weld.vercel.app مستقر گشته است. این برنامه به کاربران اجازه میدهد تا تنها با استفاده از حرکات دست و بدون نیاز به نصب هرگونه نرمافزاری، آکوردهای پیچیده سینتیسایزر را بنوازند.
این پروژه در زمانی عرضه شده که قابلیتهای مرورگر در حال تغییر از صفحات ایستا به اپلیکیشنهایی با عملکرد بالا (High-Performance Applications) هستند. در حالی که پیش از این ابزارهای صوتی مبتنی بر هوش مصنوعی را دیدهایم، اما مانع اصلی همیشه سختافزار بوده است؛ کاربر یا به یک کیبورد MIDI نیاز داشت و یا به یک کنترلر تخصصی. Gesture Synth این اصطکاک را حذف میکند و بدن انسان را به عنوان رابط کاربری (Interface) در نظر میگیرد.
تصور کنید دنیایی را که در آن هر دستگاه دارای دوربین، به یک ابزار خلاقانه تبدیل شود. برای توسعهدهندگان، این پروژه صرفاً یک اسباببازی نیست؛ بلکه نقشهای (Blueprint) است برای اینکه چگونه میتوان بینایی ماشین (Computer Vision) و سنتز صوتی در لحظه (Real-time Audio Synthesis) را در یک محیط سمت کلاینت ترکیب کرد. این پروژه یک مورد مطالعاتی کامل برای الگوی «gesture synth weld vercel app» است: یک برنامه تکصفحهای ساخته شده با Vite که با استفاده از MediaPipe و Web Audio روی Vercel مستقر شده است.
پدیده «Weld Vercel App» و زمینه ظهور
عبارت «weld vercel app» به دلیل ساختار خاص URL استقرار این پروژه به یک عبارت جستوجوی رایج تبدیل شده است. در واقع، این اپلیکیشن ترکیبی از «gesture-synth» و «weld» در آدرس پروژه Vercel است. این ترکیب (gesture synth weld vercel) روشی است که کاربران معمولاً پس از مشاهده ویدئوهای ویروسی این ابزار در شبکههای اجتماعی، از طریق آن به ابزار دست مییابند.
موفقیت ویروسی این برنامه از فوریت و دسترسی سریع آن نشأت میگیرد. یک آموزش در اینستاگرام توسط سازنده نشان داد که مانع ورود کاربر تقریباً صفر است: کافی است URL را باز کنید، اجازه دسترسی به دوربین را بدهید و شروع به نواختن کنید. با حذف نیاز به ساخت حساب کاربری، دانلود نرمافزار یا تهیه سختافزارهای MIDI، این اپلیکیشن مرورگر را به یک پلتفرم ساز موسیقی تبدیل کرده است.
در لایههای زیرین، برنامه محیطی تاریک را نمایش میدهد که شامل یک نمایشگر آکورد و ۱۲ کلید (از A تا G#/Ab) برای انتخاب نت پایه (Root Note) است. اگرچه ظاهر آن ساده به نظر میرسد، اما در واقع یک خط لوله (Pipeline) مهندسیشده از ردیابی دست، طبقهبندی ژستها و سنتز صوتی Web Audio است که با دقت طراحی شده است.
مکانیزم ردیابی و تشخیص فنی
این اپلیکیشن برای پردازش ورودی ویدیو با رزولوشن ۶۴۰ در ۴۸۰، بر MediaPipe Hand Landmarker (نسخه ۰.۱۰.۳۵) از کتابخانه @mediapipe/tasks-vision تکیه دارد. سیستم بهگونهای پیکربندی شده است که numHands: 2 باشد، یعنی دو دست را بهطور همزمان ردیابی کرده و ۲۱ نقطه شاخص (Landmark) مجزا را در هر دست شناسایی کند. این نقاط شامل مچ دست، مفاصل MCP/PIP/DIP چهار انگشت و نوک انگشتها است.
توسعهدهنده بهجای استفاده از یک طبقهبندیکننده هوش مصنوعی «جعبه سیاه» (Black-box AI)، از منطق قطعی (Deterministic Logic) برای تفسیر این نقاط استفاده کرده است. این رویکرد باعث میشود منطق برنامه شفاف، قابل عیبیابی و بسیار سریع باشد، زیرا هر فریم بدون هیچ ابهامی به یک تصمیم منجر میشود.
- بسط شست (Thumb Extension): تابع
isThumbExtended()مختصات x نوک شست را با مفصل IP شست مقایسه میکند. این منطق «آگاه به جهت دست» (Handedness-aware) است؛ به این معنا که شست دست راست به سمت راست و شست دست چپ به سمت چپ بسط مییابد. - بسط انگشتان (Finger Extension): تابع
isFingerExtended()وضعیت هر یک از انگشتان را بهطور مجزا بررسی میکند تا تعداد انگشتان باز را شمارش کند. - کیفیت آکورد (Chord Quality): تابع
getChordQuality()موقعیت مفصل MCP انگشت وسط را نسبت به مچ میسنجد. اگر مفصل MCP در سمت راست مچ باشد، سینتیسایزر یک آکورد مینور را فعال میکند؛ در غیر این صورت، یک آکورد ماژور نواخته میشود.
منطق نقشهبرداری موسیقی و تئوری
واژگان حرکتی این ابزار بر اساس تئوری موسیقی طراحی شدهاند و نه بر اساس شکلهای تصادفی. دست چپ درجه گام (از I تا VII) را بر اساس تعداد انگشتان و شکلهای خاص از طریق تابع classifyChord() تعیین میکند:
- ۱ انگشت: درجه I (آکورد پایه/Root)
- ۲ انگشت: درجه II
- ۳ انگشت: درجه III
- ۴ انگشت: درجه IV
- ۵ انگشت: درجه V
- ترکیب اشاره و کوچک (🤘): درجه VI
- ترکیب اشاره، کوچک و شست (🤟): درجه VII
دست راست وظیفه مدیریت «ویسینگ» (Voicing) و اکسپرسیون را بر عهده دارد. سازنده جزئیات دقیقی از تئوری موسیقی را در کد گنجانده است؛ برای مثال، برای آکوردهای Diminished 7th از یک «ترایتون» (پنجم کاهش یافته) استفاده شده تا ساز از نظر موسیقایی منسجم و درست به نظر برسد. علاوه بر این، حالت کج کردن (Tilt) دست چپ میتواند کل گام را بین ماژور و مینور تغییر دهد که اساساً بافت موسیقایی همان ژستها را دگرگون میکند.
زنجیره سیگنال صوتی (Audio Signal Chain)
بر اساس تحلیل فنی، صدا از طریق یک زنجیره سیگنال در Web Audio API تولید میشود. کلاس SynthEngine این زنجیره را بهصورت تنبل (Lazy) در متد ensureContext() ایجاد میکند تا با سیاستهای سختگیرانه پخش خودکار (Autoplay) مرورگرها سازگار باشد. جریان سیگنال به ترتیب زیر است:
نوسانسازها $\rightarrow$ شکلدهنده موج (اعوجاج/Distortion) $\rightarrow$ فیلتر Biquad (پاسکمگذر) $\rightarrow$ گین اصلی $\rightarrow$ خروجی (Destination)
جزئیات فنی کلیدی این زنجیره عبارتند از:
- WaveShaperNode: با تنظیم
oversample: "4x"پیکربندی شده تا نویزهای تیز (Aliasing) در مرحله اعوجاج کاهش یابد. - BiquadFilterNode: یک فیلتر پاسکمگذر (Lowpass) با فرکانس پایه ۱۲۰۰ هرتز و مقدار Q برابر با ۰.۷.
- GainNode: کنترل حجم کلی که از مقدار صفر شروع شده و بهصورت نرم (Ramp) افزایش مییابد.
برای جلوگیری از صدای «کلیک» و «نویز زیپری» (Zipper Noise) که در صوتیات مرورگر رایج است، موتور برنامه از متد setTargetAtTime برای تمام بهروزرسانیهای پارامتر استفاده میکند. تغییرات حجم از ثابت زمانی ۰.۰۳ و تغییرات فیلتر از ۰.۰۴ استفاده میکنند. هنگامی که playNotes() فراخوانی میشود، سیستم نوسانسازهای قبلی را متوقف کرده و برای هر فرکانس نت، یک OscillatorNode ایجاد میکند و با استفاده از کلید فرکانس، از تکرار نوسانسازها در فریمهای متوالی جلوگیری میکند.
پیشتنظیمات سینت و طنین صدا
کاربران میتوانند از سه پیشتنظیم (Preset) متمایز انتخاب کنند که شکل موج نوسانساز مورد استفاده در playNotes() را تغییر میدهد. از آنجایی که مراحل اعوجاج، فیلتر و گین مشترک هستند، طنین صدا تغییر میکند اما کنترلهای حرکتی ثابت میمانند:
- Warm Synth: موجهای نرم و گرد، شبیه به صداهای Pad و ملایم.
- Bright Synth: موجهای شفاف و برنده، مناسب برای صداهای Lead.
- Retro Synth: موجهای مربعی (Square-ish) برای ایجاد حس کلاسیک بازیهای ویدئویی و Chiptune.
کنترلهای اکسپرسیو و تعاملی
کج کردن دست، محرک اصلی برای تغییرات فیلتر (Filter Sweeps) است که توسط تابع getHandHorizontalTilt() محاسبه میشود. این تابع موقعیت مچ را نسبت به مفاصل MCP انگشتان وسط و حلقه میسنجد و از یک «منطقه مرده» (Dead Zone) و مقدار MAX_TRAVEL برابر با ۰.۱۲ استفاده میکند تا مقدار نهایی بین $\pm 1.0$ اشباع شود.
- کج کردن به داخل (منفی): فرکانس فیلتر از ۱۲۰۰ هرتز به ۲۵۰ هرتز کاهش مییابد و مقدار Q به ۲.۲ میرسد که گرمای صوتی شبیه به سازهای آکوستیک ایجاد میکند.
- کج کردن به خارج (مثبت): فرکانس فیلتر تا ۵۰۰۰ هرتز بالا میرود و Q به ۵.۲ میپرد که صدای رزونانسی «Squelch» را تولید میکند که در موسیقی EDM بسیار رایج است.
این برنامه حتی «لرزش دست» (Tilt Shakiness) را ردیابی میکند. این لرزش به نویز تصادفی تبدیل میشود تا انرژی یا اضطراب فیزیکی نوازنده به بافت صدا اضافه شود. بازخورد بصری نیز با این مود هماهنگ است؛ آکوردهای ماژور با شفافیت کامل میدرخشند، در حالی که آکوردهای مینور به شفافیت ۴۵٪ کاهش مییابند تا حس غمانگیزتری منتقل کنند.
معماری اجرا و بهینهسازی
برای حفظ پاسخدهی در لحظه (Real-time Responsiveness)، برنامه با Vite ساخته و روی Vercel مستقر شده است. تمام پردازشها در سمت کلاینت و از طریق WebAssembly انجام میشود؛ به این معنی که هیچ فریم ویدیویی از دستگاه کاربر خارج نمیشود و حریم خصوصی و تأخیر (Latency) بهینه میماند.
بهینهسازیهای خاص شامل موارد زیر است:
- برش ویدیو (Cover-Crop): برنامه یک مستطیل برش «Cover» را در فضای پیکسلهای ویدیو محاسبه میکند تا تصویر بدون تغییر ابعاد (Distortion) کل صحنه را پر کند، که این امر ردیابی نقاط را پایدارتر میکند.
- نرمسازی فریم به فریم: هر بهروزرسانی پارامتر صوتی از
setTargetAtTimeیاlinearRampToValueAtTimeاستفاده میکند تا از ایجاد صدای پاپ (Pop) در هنگام تغییرات سریع فیلتر جلوگیری شود. - راهاندازی تنبل (Lazy Initialization): شیء
AudioContextتنها پس از اولین تعامل کاربر با صفحه ایجاد میشود.
برای نظارت بر میزان استفاده، سازنده از Vercel Analytics، Speed Insights و Microsoft Clarity برای ردیابی نحوه تعامل کاربران با ساز استفاده کرده است.
دسترسی متنباز و جمعبندی
این پروژه در گیتهاب (ericwei97-cloud/gesture-synth) بهصورت متنباز منتشر شده و در حال حاضر بیش از ۸۸ ستاره دارد. این ابزار برای مصارف آموزشی و غیرتجاری (با ذکر نام سازنده) رایگان است.
این پیادهسازی ثابت میکند که مرورگر اکنون پلتفرمی مناسب برای ساخت سازهای موسیقی با کیفیت تولیدی (Production-quality) است. با جداسازی لایه کنترل (MediaPipe) از لایه سنتز (Web Audio API)، توسعهدهنده سیستمی ساخته است که هم منعطف و هم پرقدرت است.
برای کاربر عادی، فاصله بین یک ایده و شنیدن صدا از بین رفته است. برای توسعهدهنده، این یک الگوی قابل استفاده برای هر ابزار مبتنی بر دوربین است که به ورودی با دقت بالا نیاز دارد. اگر میخواهید با این الگو آزمایش کنید، میتوانید مخزن گیتهاب را فورک کرده و نوسانسازهای صوتی را با موتورهای سنتز دیگر جایگزین کنید یا نقاط ردیابی دست را به مجموعهای از تریگرهای API دیگر متصل نمایید.
گام بعدی شما
- مخزن گیتهاب پروژه را فورک کنید و سعی کنید نوسانسازهای صوتی را با موتورهای سنتز دیگر جایگزین کنید.
- نقاط ردیابی دست (Landmarks) را به جای تولید صدا، به دستورات API دیگر (مثلاً کنترل خانه هوشمند) متصل کنید.
- از ترکیب این مدل با ابزارهای تولید موسیقی مبتنی بر هوش مصنوعی برای خلق قطعات زنده استفاده کنید.
اما داستان سختافزاری این تحول حتی شگفتانگیزتر است — به تحلیل ما دربارهی تراشههای پردازشی لبه مراجعه کنید.
گفتگو