Cara menambahkan efek ke audio

Tony Conway
Tony Conway

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.

Dukungan Browser

  • 35
  • 12
  • 25
  • 14.1

Sumber

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:

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;

Dukungan Browser

  • 3
  • 12
  • 3,5
  • 3.1

Sumber

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