Phong cách 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 bạn tạo AudioContext() mới, hãy tạo một nút nguồn âm thanh, như AudioBufferSourceNode hoặc OscillatorNode. Ví dụ: hãy xem xét một bộ tạo dao động cơ bản có áp dụng bộ lọc thông thấp.
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, như AudioBufferSourceNode hoặc OscillatorNode. Trong ví dụ này, bạn sẽ tạo một nút tạo dao động sine có tần số 420 Hz 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 đó, 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, 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 được truyền qua bộ lọc không bị ảnh hưởng và tới đích đến là loa máy tính của bạn. Sau 1 giây phát video, bộ lọc lowpass sẽ có hiệu lực. Sau 2 giây, bộ dao động bị dừng lại.
Các bộ lọc và hiệu ứng có sẵn khá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 biến dạng vào nguồn.createGain()dùng để tăng cường tín hiệu tổng thể của nguồn mà giá trị được áp dụng.createConvolver()thường được dùng để thêm âm vang vào nguồn.createDelay()dùng để thêm độ trễ vào phần đầu của một nguồn.createDynamicsCompressor()dùng để tăng âm lượng của phần yên tĩnh nhất trong nguồn và giảm âm lượng của những phần có âm lượng lớn nhất.createPanner()vàcreateStereoPanner()dùng để thay đổi vị trí không gian của đầu ra âm thanh.
Cách cổ điển
Trước khi API Web âm thanh ra mắt, không có cách nào để thêm hiệu ứng vào âm thanh trong trình duyệt. Có thể có các giải pháp bằng cách sử dụng tính năng 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 phát sinh nhiều chi phí mạng.
Sử dụng phần tử âm thanh
Bạn chỉ có thể điều khiển trực tiếp hiệu ứng âm thanh là 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;
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);
});