आधुनिक तरीका
Web Audio 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 को शुरू करने और दो सेकंड तक वीडियो चलाने के बाद बंद करने से पहले, आखिर में 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;
इसके बारे में और पढ़ें
डेमो
एचटीएमएल
<!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;
}
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);
});