نحوه افزودن افکت به صدا

تونی کانوی

روش مدرن

API صوتی وب از رابط AudioContext() برای مدیریت منابع، فیلترها و مقصدها استفاده می‌کند. پس از ایجاد یک AudioContext() جدید، یک گره منبع صوتی مانند AudioBufferSourceNode یا OscillatorNode ایجاد کنید. به عنوان مثال، یک نوسان‌ساز ساده با یک فیلتر پایین‌گذر اعمال شده را در نظر بگیرید.

Browser Support

  • کروم: ۳۵.
  • لبه: ۱۲.
  • فایرفاکس: ۲۵.
  • سافاری: ۱۴.۱.

Source

استفاده از متد createBiquadFilter()

ابتدا، یک AudioContext() جدید ایجاد کنید. سپس یک گره منبع صدا، مانند AudioBufferSourceNode یا OscillatorNode ایجاد کنید. برای این مثال، یک گره نوسانگر sine ایجاد خواهید کرد که از لحظه شروع پخش، فرکانس ۴۲۰ هرتز دارد.

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioCtx.createOscillator()
oscillator.type = 'sine';
 // Value is in hertz.
oscillator.frequency.setValueAtTime(420, audioCtx.currentTime);

سپس، با استفاده از createBiquadFilter() یک گره افکت ایجاد کنید. نوع را روی lowpass و فرکانس را طوری تنظیم کنید که یک ثانیه پس از شروع پخش شروع شود. سپس biquadFilter را به oscillator وصل کنید.

const biquadFilter = audioCtx.createBiquadFilter();
biquadFilter.type = 'lowpass';
biquadFilter.frequency.setValueAtTime(200, audioCtx.currentTime + 1);
oscillator.connect(biquadFilter);

در نهایت، قبل از شروع oscillator و متوقف کردن آن پس از دو ثانیه پخش، biquadFilter به مقصد audioCtx وصل کنید.

biquadFilter.connect(audioCtx.destination);
oscillator.start();
oscillator.stop(2);

صدای نوسان‌ساز از فیلتر بی‌تأثیر عبور می‌کند و به مقصد، که بلندگوهای رایانه شما است، می‌رسد. پس از یک ثانیه پخش، فیلتر lowpass فعال می‌شود. پس از دو ثانیه، نوسان‌ساز متوقف می‌شود.

سایر فیلترها و جلوه‌های موجود

گره‌های فیلتر دیگری را می‌توان به AudioContext اضافه کرد تا جلوه‌های متفاوتی ایجاد شود:

  • createWaveShaper() برای افزودن اعوجاج به یک منبع استفاده می‌شود.
  • createGain() برای تقویت سیگنال کلی منبعی که به آن اعمال می‌شود، استفاده می‌شود.
  • createConvolver() معمولاً برای اضافه کردن ریورب به یک منبع استفاده می‌شود.
  • createDelay() برای اضافه کردن تأخیر به شروع یک منبع استفاده می‌شود.
  • createDynamicsCompressor() برای افزایش صدای آرام‌ترین بخش یک منبع و کاهش صدای بلندترین بخش‌های آن استفاده می‌شود.
  • createPanner() و createStereoPanner() برای تغییر موقعیت مکانی خروجی صدا استفاده می‌شوند.

روش کلاسیک

قبل از در دسترس قرار گرفتن Web Audio API، هیچ راهی برای افزودن جلوه‌های صوتی به صدا در مرورگر وجود نداشت. راه‌حل‌هایی با استفاده از رندر سمت سرور و جابجایی بین جریان‌ها امکان‌پذیر است، اما این می‌تواند سربار شبکه زیادی را متحمل شود.

استفاده از عنصر صوتی

تنها جلوه‌های صوتی که می‌توانند مستقیماً کنترل شوند، پخش و میزان صدا هستند.

const audio = document.querySelector('audio');
 // Sets audio volume to 50%
audio.volume = 0.5;
// Doubles the playback rate.
audio.playbackRate = 2;

Browser Support

  • کروم: ۳.
  • لبه: ۱۲.
  • فایرفاکس: ۳.۵
  • سافاری: ۳.۱

Source

مطالعه بیشتر

نسخه آزمایشی

اچ‌تی‌ام‌ال 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="icon"
      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔉</text></svg>"
    />
    <title>How to add effects to audio</title>
  </head>
  <body>
    <h1>How to add effects to audio</h1>
    <button type="button">Press to hear audio effect</button>
  </body>
</html>

سی‌اس‌اس 


        :root {
  color-scheme: dark light;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 1rem;
  font-family: system-ui, sans-serif;
}

جی‌اس 


        const button = document.querySelector('button');

button.addEventListener('click', () => {
  const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  const oscillator = audioCtx.createOscillator();
  oscillator.type = 'sine';
  // Value is in hertz.
  oscillator.frequency.setValueAtTime(420, audioCtx.currentTime);

  const biquadFilter = audioCtx.createBiquadFilter();
  biquadFilter.type = 'lowpass';
  biquadFilter.frequency.setValueAtTime(200, audioCtx.currentTime + 1);
  oscillator.connect(biquadFilter);

  biquadFilter.connect(audioCtx.destination);
  oscillator.start();
  oscillator.stop(2);
});