오디오에 효과를 추가하는 방법

Tony Conway

최신 방식

Web Audio API는 AudioContext() 인터페이스를 사용하여 소스, 필터, 대상을 관리합니다. 새 AudioContext()를 만든 후 AudioBufferSourceNode 또는 OscillatorNode와 같은 오디오 소스 노드를 만듭니다. 예를 들어 로우 패스 필터가 적용된 기본 발진기를 고려해 보겠습니다.

Browser Support

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

Source

createBiquadFilter() 메서드 사용

먼저 새 AudioContext()를 만듭니다. 그런 다음 AudioBufferSourceNode 또는 OscillatorNode와 같은 오디오 소스 노드를 만듭니다. 이 예에서는 재생을 시작하는 순간부터 420Hz의 주파수를 갖는 sine 발진기 노드를 만듭니다.

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()를 사용하여 효과 노드를 만듭니다. 재생 시작 후 1초 후에 시작하도록 유형을 lowpass로, 주파수를 설정합니다. 그런 다음 biquadFilter를 oscillator에 연결합니다.

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

마지막으로 oscillator를 시작하고 재생 2초 후에 중지하기 전에 biquadFilter를 audioCtx의 대상에 연결합니다.

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

발진기의 소리는 영향을 받지 않는 필터를 통과하여 컴퓨터의 스피커인 대상으로 전달됩니다. 재생 1초 후 lowpass 필터가 적용됩니다. 2초 후 발진기가 중지됩니다.

사용 가능한 기타 필터 및 효과

다른 필터 노드를 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

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

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