كيفية إضافة تأثيرات إلى الصوت

Tony Conway
Tony Conway

الطريقة الحديثة

تستخدم Web Audio API واجهة AudioContext() لإدارة المصادر والفلاتر والوجهات. بعد إنشاء AudioContext() جديدة، أنشِئ عقدة مصدر صوت، مثل AudioBufferSourceNode أو OscillatorNode. على سبيل المثال، يمكن استخدام جهاز ذبذب الذبذبات الأساسي مع تطبيق فلتر تمرير منخفض.

التوافق مع المتصفح

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