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

Tony Conway
Tony Conway

현대적인 방식

Web Audio API는 AudioContext() 인터페이스를 사용하여 소스, 필터, 대상을 관리합니다. 새 AudioContext()를 만들었으면 AudioBufferSourceNode 또는 OscillatorNode와 같은 오디오 소스 노드를 만듭니다. 저역 통과 필터가 적용된 기본 오실레이터를 예로 들어 보겠습니다.

브라우저 지원

  • 35
  • 12
  • 25
  • 14.1

소스

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

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

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

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;

브라우저 지원

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