কীভাবে অডিওতে প্রভাব যুক্ত করবেন

টনি কনওয়ে

আধুনিক উপায়

ওয়েব অডিও এপিআই সোর্স, ফিল্টার এবং ডেস্টিনেশন পরিচালনা করার জন্য 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);
});