تستخدم Google تكنولوجيا الذكاء الاصطناعي لترجمة المحتوى إلى لغتك المفضّلة، وقد تتضمّن بعض الأخطاء.

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

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

كيفية إضافة تأثيرات إلى الصوت تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.