‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

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

Tony Conway

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

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

Browser Support

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

לבסוף, מחברים את 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;

Browser Support

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

איך מוסיפים אפקטים לאודיו קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.