‏موسیقی رو با جاوااسکریپت از صفر یاد بگیر

لوک هاس، نویسنده این پست تو بلاگ رانجی‌اس، می‌گه هیچ‌وقت نتونسته ساز بزنه؛ هر بار که سعی کرده، فقط یاد گرفته نُت درست رو بزنه، بدون اینکه بفهمه چرا اون نُت درسته. به گفته‌ی خودش، آموزش‌های رایج موسیقی معمولاً می‌گن «این گام مینوره، الگوشو حفظ کن» بدون اینکه بگن چرا این الگو و نه یه الگوی دیگه. برای همین تصمیم گرفته موسیقی رو از اول، با نوشتن کد، از قوانین فیزیک و ریاضی بازسازی کنه.

نقطه‌ی شروع اینه که صدا فقط یه عدده که در طول زمان عوض می‌شه؛ بلندگو با جلو و عقب رفتن مخروطش صدا می‌سازه و کامپیوتر هم فقط یه لیست از عددهاست که می‌گه مخروط کجا باشه، چهل و چهار هزار بار در ثانیه. با Web Audio API مرورگر می‌شه یه اسیلاتور (oscillator) ساخت که یه موج سینوسی با فرکانس مشخص تولید می‌کنه؛ فرکانس همون چیزیه که پیچ نُت رو تعیین می‌کنه:

const osc = ctx.createOscillator();
osc.frequency.value = 440;
osc.connect(out);
osc.start();
osc.stop(ctx.currentTime + 1);

عدد ۴۴۰ همون فرکانسیه که قرارداد بهش می‌گن نُت «لا» (A) و بقیه‌ی سیستم بر همون تنظیم شده؛ اگه عوضش کنی، فقط پیچ صدا عوض می‌شه و چیزی خراب نمی‌شه.

وقتی این صدای ساده قطع می‌شه، یه کلیک ناخوشایند می‌شنوی. دلیلش اینه که اسیلاتور وسط موج متوقف شده و مخروط بلندگو یهو به جای اولش برمی‌گرده؛ یه پرش ناگهانی در فشار هوا، همون کلیکه. راه‌حلش یه عدد دیگه‌ست که بلندی صدا رو در طول زمان کنترل می‌کنه، یعنی envelope. موزیسین‌ها به نسخه‌ی کامل envelope می‌گن ADSR: attack یعنی چقدر طول می‌کشه صدا اوج بگیره، decay یعنی افت اولیه، sustain یعنی سطحی که صدا تا وقتی کلید پایینه نگه می‌داره، و release یعنی چقدر طول می‌کشه بعد از ول کردن کلید صدا محو بشه.

یه سیم گیتار وقتی می‌زنی، فقط یه فرکانس تولید نمی‌کنه؛ هم‌زمان با نصف طولش، یک‌سومش و یک‌چهارمش هم می‌لرزه و فرکانس‌های اضافه‌ای مثل دو برابر، سه برابر و چهار برابر فرکانس اصلی تولید می‌کنه. به این مجموعه سری هارمونیک می‌گن و نسبت بلندی هر کدوم از این فرکانس‌ها به هم، همون چیزیه که موزیسین‌ها بهش می‌گن «تیمبر» و باعث می‌شه یه ویولن با یه ترومپت با همون نُت، فرق داشته باشه. مرورگر چهار شکل موج آماده داره: sine، triangle، square و sawtooth که هر کدوم ترکیب هارمونیک متفاوتی دارن و همون نُت رو با تیمبر متفاوت پخش می‌کنن.

نویسنده می‌گه این فقط شروع مقاله‌ست؛ اگه دنبالش کنی، از همین جمع‌بندی‌ها ۱۲ نُت، گام‌ها و آکوردها رو با آرایه در کد می‌سازی و یه پروگرشن آکورد (یعنی دنباله‌ای از آکوردها که پشت سر هم میان و حس یه قطعه‌ی واقعی موسیقی رو می‌سازن) تولید می‌کنی که واقعاً شبیه موسیقیه، بدون اینکه لازم باشه چیزی رو صرفاً حفظ کنی. نت‌نویسی کلاسیک هم فقط آخر مقاله میاد، وقتی که دیگه یه چیزی برای نمایش دادن داری.

نکات کلیدی:

• بلندگو صدا رو با تغییر عدد فشار هوا در طول زمان تولید می‌کنه؛ فرکانس oscillator مساوی پیچ نُته.
• envelope (نسخه‌ی کاملش ADSR: attack/decay/sustain/release) از کلیک ناخواسته جلوگیری می‌کنه و به صدا شخصیت می‌ده.
• سری هارمونیک (فرکانس اصلی ضرب در ۱، ۲، ۳ و بیشتر) و نسبت بلندی هر هارمونیک، تیمبر رو می‌سازه؛ چهار موج آماده‌ی مرورگر (sine، triangle، square، sawtooth) تیمبرهای متفاوتی دارن.
• کل مقاله فقط با Web Audio API و بدون هیچ سازی، از فیزیک و ریاضی به ۱۲ نُت، گام و پروگرشن آکورد واقعی می‌رسه.