Cara menambahkan efek ke audio

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.

Browser Support

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

Source

Menggunakan metode createBiquadFilter()

Pertama, buat AudioContext() baru. Kemudian, 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(). Tetapkan jenis ke lowpass dan frekuensi untuk memulai satu detik setelah awal pemutaran. 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 dua detik pemutaran.

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

Suara dari osilator diteruskan melalui filter yang tidak terpengaruh, dan ke tujuan, yaitu speaker komputer Anda. Setelah satu detik pemutaran, filter lowpass akan berlaku. Setelah dua detik, osilator akan berhenti.

Filter dan efek lain yang tersedia

Node filter lain dapat ditambahkan ke AudioContext untuk membuat efek yang berbeda:

Cara klasik

Sebelum Web Audio API tersedia, tidak ada cara untuk menambahkan efek ke audio di browser. Solusi menggunakan rendering sisi server dan beralih 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;

Browser Support

  • Chrome: 3.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

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