Cara modern
Web Audio API menggunakan antarmuka AudioContext() untuk mengelola sumber, filter, dan tujuan. Setelah membuat AudioContext() baru, buat node sumber audio, seperti AudioBufferSourceNode atau OscillatorNode. Sebagai contoh, pertimbangkan osilator dasar dengan filter low pass yang diterapkan.
Menggunakan metode createBiquadFilter()
Pertama, buat AudioContext() baru. Lalu, buat node sumber audio, seperti AudioBufferSourceNode atau OscillatorNode. Anda akan membuat node osilator sine, untuk contoh ini, yang memiliki frekuensi 420 hertz sejak mulai diputar.
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioCtx.createOscillator()
oscillator.type = 'sine';
// Value is in hertz.
oscillator.frequency.setValueAtTime(420, audioCtx.currentTime);
Selanjutnya, buat node efek menggunakan createBiquadFilter(). Setel jenis ke lowpass dan frekuensi yang akan dimulai satu detik setelah pemutaran dimulai. Kemudian, hubungkan biquadFilter ke oscillator.
const biquadFilter = audioCtx.createBiquadFilter();
biquadFilter.type = 'lowpass';
biquadFilter.frequency.setValueAtTime(200, audioCtx.currentTime + 1);
oscillator.connect(biquadFilter);
Terakhir, hubungkan biquadFilter ke tujuan audioCtx, sebelum memulai oscillator dan menghentikannya setelah pemutaran dua detik.
biquadFilter.connect(audioCtx.destination);
oscillator.start();
oscillator.stop(2);
Suara dari osilator diteruskan melalui filter yang tidak terpengaruh, dan diteruskan ke tujuan, yaitu speaker komputer. Setelah pemutaran satu detik, filter lowpass akan berlaku. Setelah dua detik, osilator akan dihentikan.
Filter dan efek lain yang tersedia
Node filter lainnya dapat ditambahkan ke AudioContext untuk membuat efek yang berbeda:
createWaveShaper()digunakan untuk menambahkan distorsi ke sumber.createGain()digunakan untuk meningkatkan sinyal keseluruhan dari sumber tempatnya diterapkan.createConvolver()paling sering digunakan untuk menambahkan gema ke sumber.createDelay()digunakan untuk menambahkan penundaan ke awal sumber.createDynamicsCompressor()digunakan untuk menaikkan volume bagian sumber yang paling tenang, dan menurunkan volume bagian yang paling keras.createPanner()dancreateStereoPanner()digunakan untuk mengubah posisi spasial output suara.
Cara klasik
Sebelum Web Audio API tersedia, belum ada cara untuk menambahkan efek ke audio di browser. Solusi yang menggunakan rendering sisi server dan peralihan antar-streaming dapat dilakukan, tetapi hal ini dapat menimbulkan banyak overhead jaringan.
Menggunakan elemen audio
Satu-satunya efek audio yang dapat dikontrol secara langsung adalah pemutaran dan volume.
const audio = document.querySelector('audio');
// Sets audio volume to 50%
audio.volume = 0.5;
// Doubles the playback rate.
audio.playbackRate = 2;
Bacaan lebih lanjut
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);
});