Cách thêm hiệu ứng vào âm thanh

Tony Conway

Cách làm hiện đại

Web Audio API sử dụng giao diện AudioContext() để quản lý các nguồn, bộ lọc và đích đến. Sau khi tạo một AudioContext() mới, hãy tạo một nút nguồn âm thanh, chẳng hạn như AudioBufferSourceNode hoặc OscillatorNode. Ví dụ: hãy xem xét một bộ dao động cơ bản có áp dụng bộ lọc thông thấp.

Browser Support

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

Source

Sử dụng phương thức createBiquadFilter()

Trước tiên, hãy tạo một AudioContext() mới. Sau đó, hãy tạo một nút nguồn âm thanh, chẳng hạn như AudioBufferSourceNode hoặc OscillatorNode. Bạn sẽ tạo một nút dao động sine. Trong ví dụ này, nút này có tần số 420 hertz kể từ thời điểm bắt đầu phát.

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

Tiếp theo, hãy tạo một nút hiệu ứng bằng createBiquadFilter(). Đặt loại thành lowpass và tần suất bắt đầu một giây sau khi bắt đầu phát. Sau đó, hãy kết nối biquadFilter với oscillator.

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

Cuối cùng, hãy kết nối biquadFilter với đích đến của audioCtx, trước khi bắt đầu oscillator và dừng sau 2 giây phát.

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

Âm thanh từ bộ dao động sẽ đi qua bộ lọc không bị ảnh hưởng và đến đích là loa máy tính của bạn. Sau một giây phát, bộ lọc lowpass sẽ có hiệu lực. Sau 2 giây, bộ dao động sẽ dừng.

Các bộ lọc và hiệu ứng khác hiện có

Bạn có thể thêm các nút bộ lọc khác vào AudioContext để tạo các hiệu ứng khác nhau:

  • createWaveShaper() được dùng để thêm hiệu ứng méo hình vào một nguồn.
  • createGain() được dùng để tăng cường tín hiệu tổng thể của nguồn mà bạn áp dụng.
  • createConvolver() thường được dùng để thêm hiệu ứng vang vào một nguồn.
  • createDelay() được dùng để thêm độ trễ vào thời điểm bắt đầu của một nguồn.
  • createDynamicsCompressor() được dùng để tăng âm lượng của phần yên tĩnh nhất trong một nguồn và giảm âm lượng của các phần lớn nhất.
  • createPanner() và createStereoPanner() được dùng để thay đổi vị trí không gian của đầu ra âm thanh.

Cách cổ điển

Trước khi có API Web Audio, không có cách nào để thêm hiệu ứng vào âm thanh trong trình duyệt. Bạn có thể sử dụng giải pháp tạm thời bằng cách kết xuất phía máy chủ và chuyển đổi giữa các luồng, nhưng điều này có thể làm tăng đáng kể chi phí mạng.

Sử dụng phần tử âm thanh

Hiệu ứng âm thanh duy nhất có thể điều khiển trực tiếp là chế độ phát và âm lượng.

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

Tài liệu đọc thêm

Bản minh hoạ

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