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

تونی کانوی
Tony Conway

روش مدرن

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

پشتیبانی مرورگر

  • 35
  • 12
  • 25
  • 14.1

منبع

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

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

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);

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

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

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

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

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

  • createWaveShaper() برای اضافه کردن اعوجاج به یک منبع استفاده می شود.
  • createGain() برای تقویت سیگنال کلی منبعی که روی آن اعمال می شود استفاده می شود.
  • createConvolver() بیشتر برای افزودن Reverb به یک منبع استفاده می شود.
  • 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;

پشتیبانی مرورگر

  • 3
  • 12
  • 3.5
  • 3.1

منبع

بیشتر خواندن

نسخه ی نمایشی

HTML

<!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>

CSS


        :root {
  color-scheme: dark light;
}

html {
  box-sizing: border-box;
}

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

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

JS


        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);
});