Sese efekt ekleme

Tony Conway
Tony Conway

Modern yöntem

Web Audio API; kaynakları, filtreleri ve hedefleri yönetmek için AudioContext() arayüzünü kullanır. Yeni bir AudioContext() oluşturduktan sonra AudioBufferSourceNode veya OscillatorNode gibi bir ses kaynağı düğümü oluşturun. Örneğin, düşük geçiş filtresi uygulanmış temel bir osilatör düşünün.

Tarayıcı Desteği

  • Tayland bahtı
  • 12
  • 25
  • 14.1

Kaynak

createBiquadFilter() yöntemini kullanma

Öncelikle yeni bir AudioContext() oluşturun. Ardından, AudioBufferSourceNode veya OscillatorNode gibi bir ses kaynağı düğümü oluşturun. Bu örnekte, çalmaya başladığı andan itibaren 420 hertz frekansa sahip bir sine osilatör düğümü oluşturacaksınız.

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioCtx.createOscillator()
oscillator.type = 'sine';
 // Value is in hertz.
oscillator.frequency.setValueAtTime(420, audioCtx.currentTime);

Ardından, createBiquadFilter() kullanarak bir efekt düğümü oluşturun. Türü lowpass ve sıklığı, oynatma başladıktan bir saniye sonra başlayacak şekilde ayarlayın. Ardından biquadFilter cihazını oscillator cihazına bağlayın.

const biquadFilter = audioCtx.createBiquadFilter();
biquadFilter.type = 'lowpass';
biquadFilter.frequency.setValueAtTime(200, audioCtx.currentTime + 1);
oscillator.connect(biquadFilter);

Son olarak biquadFilter cihazını, oscillator başlatmadan ve iki saniye oynatıldıktan sonra durdurmadan önce audioCtx cihazının hedefine bağlayın.

biquadFilter.connect(audioCtx.destination);
oscillator.start();
oscillator.stop(2);

Osilatörden gelen ses, etkilenmeyen filtreden geçer ve ilgili hedefe, yani bilgisayarınızın hoparlörlerine gider. lowpass filtresi, oynatmadan bir saniye sonra etkinleşir. İki saniye sonra osilatör durur.

Kullanılabilen diğer filtreler ve efektler

Farklı efektler oluşturmak için AudioContext öğesine başka filtre düğümleri eklenebilir:

Klasik yöntem

Web Audio API kullanıma sunulmadan önce tarayıcıda sese efekt eklemek mümkün değildi. Sunucu tarafında oluşturmayı kullanan ve akışlar arasında geçiş yapılan geçici çözümler mümkündür, ancak bu durum, önemli miktarda ağ ek yüküne neden olabilir.

Ses öğesini kullanma

Doğrudan kontrol edilebilen tek ses efekti oynatma ve ses düzeyidir.

const audio = document.querySelector('audio');
 // Sets audio volume to 50%
audio.volume = 0.5;
// Doubles the playback rate.
audio.playbackRate = 2;

Tarayıcı Desteği

  • 3
  • 12
  • 3,5
  • 3.1

Kaynak

Daha fazla bilgi

Demografi

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