Sese efekt ekleme

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, alçak geçiren filtre uygulanmış temel bir osilatörü ele alalım.

Browser Support

  • Chrome: 35.
  • Edge: 12.
  • Firefox: 25.
  • Safari: 14.1.

Source

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 frekansına 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, sıklığı ise oynatma başladıktan bir saniye sonra başlayacak şekilde ayarlayın. Ardından biquadFilter'yı oscillator'ye bağlayın.

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

Son olarak, biquadFilter öğesini audioCtx hedefiyle bağlayın. Ardından oscillator öğesini başlatıp iki saniye oynattıktan sonra durdurun.

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

Osilatörden gelen ses, etkilenmemiş filtreden ve bilgisayarınızın hoparlörleri olan hedefe iletilir. Bir saniye oynatıldıktan sonra lowpass filtresi etkinleşir. İki saniye sonra osilatör durdurulur.

Diğer kullanılabilir 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 seslere efekt eklemenin bir yolu yoktu. Sunucu tarafı oluşturma ve akışlar arasında geçiş yapma kullanılarak geçici çözümler bulunabilir ancak bu durum, ağda çok fazla ek yük oluşturabilir.

Ses öğesini kullanma

Doğrudan kontrol edilebilen tek ses efektleri oynatma ve ses seviyesidir.

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

Browser Support

  • Chrome: 3.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

Daha fazla bilgi

Demo

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