আধুনিক উপায়
ওয়েব অডিও API উত্স, ফিল্টার এবং গন্তব্যগুলি পরিচালনা করতে AudioContext() ইন্টারফেস ব্যবহার করে। একবার আপনি একটি নতুন AudioContext() তৈরি করলে, একটি অডিও সোর্স নোড তৈরি করুন, যেমন একটি AudioBufferSourceNode বা OscillatorNode । একটি উদাহরণ হিসাবে, একটি কম পাস ফিল্টার প্রয়োগ করা একটি মৌলিক অসিলেটর বিবেচনা করুন।
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);
অবশেষে oscillator শুরু করার আগে এবং প্লেব্যাকের দুই সেকেন্ড পরে এটি বন্ধ করার আগে, audioCtx এর গন্তব্যে biquadFilter সংযোগ করুন।
biquadFilter.connect(audioCtx.destination);
oscillator.start();
oscillator.stop(2);
অসিলেটর থেকে শব্দটি অপ্রভাবিত ফিল্টারের মধ্য দিয়ে যায় এবং গন্তব্যে যায়, যা আপনার কম্পিউটারের স্পিকার। প্লেব্যাকের এক সেকেন্ড পরে, lowpass ফিল্টার কার্যকর হয়। দুই সেকেন্ড পর, অসিলেটর বন্ধ হয়ে যায়।
অন্যান্য উপলব্ধ ফিল্টার এবং প্রভাব
অন্যান্য ফিল্টার নোড বিভিন্ন প্রভাব তৈরি করতে একটি AudioContext যোগ করা যেতে পারে:
-
createWaveShaper()একটি উৎসে বিকৃতি যোগ করতে ব্যবহৃত হয়। -
createGain()সোর্সের সামগ্রিক সিগন্যালকে বুস্ট করতে ব্যবহৃত হয় যা এটি প্রয়োগ করা হয়েছে। -
createConvolver()সাধারণত একটি উৎসে reverb যোগ করতে ব্যবহৃত হয়। -
createDelay()একটি উৎসের শুরুতে বিলম্ব যোগ করতে ব্যবহৃত হয়। -
createDynamicsCompressor()একটি উৎসের সবচেয়ে শান্ত অংশের ভলিউম বাড়াতে এবং সবচেয়ে জোরে অংশের ভলিউম কমাতে ব্যবহৃত হয়। -
createPanner()এবংcreateStereoPanner()শব্দ আউটপুটের স্থানিক অবস্থান পরিবর্তনের জন্য ব্যবহৃত হয়।
ক্লাসিক উপায়
ওয়েব অডিও API এর প্রাপ্যতার আগে, ব্রাউজারে অডিওতে প্রভাব যুক্ত করার কোন উপায় ছিল না। সার্ভার-সাইড রেন্ডারিং এবং স্ট্রীমগুলির মধ্যে স্যুইচিং ব্যবহার করে ওয়ার্কঅ্যারাউন্ডগুলি সম্ভব, তবে এটি অনেক বেশি নেটওয়ার্ক ওভারহেড বহন করতে পারে।
অডিও উপাদান ব্যবহার করে
একমাত্র অডিও প্রভাব যা সরাসরি নিয়ন্ত্রণ করা যায় তা হল প্লেব্যাক এবং ভলিউম।
const audio = document.querySelector('audio');
// Sets audio volume to 50%
audio.volume = 0.5;
// Doubles the playback rate.
audio.playbackRate = 2;
আরও পড়া
ডেমো
এইচটিএমএল
<!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);
});