ऑडियो में इफ़ेक्ट जोड़ने का तरीका

Tony Conway

आधुनिक तरीका

Web Audio API, सोर्स, फ़िल्टर, और डेस्टिनेशन मैनेज करने के लिए, AudioContext() इंटरफ़ेस का इस्तेमाल करता है. AudioContext() का नया इंटरफ़ेस बनाने के बाद, कोई ऑडियो सोर्स नोड बनाएं. जैसे, AudioBufferSourceNode या OscillatorNode. उदाहरण के लिए, लागू किए गए किसी बेसिक ऑसिलेटर को देखें जिसमें कम पास फ़िल्टर है.

Browser Support

  • Chrome: 35.
  • Edge: 12.
  • Firefox: 25.
  • Safari: 14.1.

Source

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 को शुरू करने से पहले, 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

  • Chrome: 3.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

इस बारे में और पढ़ें

डेमो

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