איך מוסיפים אפקטים לאודיו

Tony Conway
Tony Conway

הדרך המודרנית

Web Audio API משתמש בממשק AudioContext() כדי לנהל מקורות, מסננים ויעדים. אחרי שיוצרים AudioContext() חדש, יוצרים צומת של מקור אודיו, כמו AudioBufferSourceNode או OscillatorNode. לדוגמה, נניח שיש מתנד בסיסי שמוחל עליו מסנן Low Pass.

תמיכה בדפדפן

  • 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 ליעד של audioCtx, לפני שמפעילים את oscillator ומפסיקים אותו לאחר שתי שניות של הפעלה.

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;

תמיכה בדפדפן

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