Skip to content

Web Audio

Scripts in this category are only for fun. They are meant to be pasted into the DevTools console. Pasting multiple into one tab isn't supported (yet).

I originally had them in a Gist.

Bass Boost

This script bass boosts the playing audio/video. It's a highshelf filter that lowers frequencies greater than opts.FREQUENCY by opts.SIDECHAIN_LEVEL and a gain filter that boosts all frequencies by opts.POST_GAIN.

See category documentation for more info.

webaudio/bass-boost.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
(() => {
  const opts = {
    FREQUENCY: 70,
    SIDECHANNEL_LEVEL: -12,
    POST_GAIN: 2,
  };
  const ctx = new AudioContext();
  const audio =
    document.querySelector("video") ?? document.querySelector("audio");
  const src = ctx.createMediaElementSource(audio);
  const bi = ctx.createBiquadFilter();
  const gain = ctx.createGain();

  bi.type = "highshelf";
  bi.frequency.setValueAtTime(opts.FREQUENCY, ctx.currentTime);
  bi.gain.setValueAtTime(opts.SIDECHANNEL_LEVEL, ctx.currentTime);
  gain.gain.setValueAtTime(opts.POST_GAIN, ctx.currentTime);

  src.connect(bi);
  bi.connect(gain);
  gain.connect(ctx.destination);
})();

Source

Delay Channel

This script delays the left (first) channel by opts.DELAY seconds.

See category documentation for more info.

webaudio/delay-channel.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
(() => {
  const opts = {
    DELAY: 1,
  };

  const ctx = new AudioContext();
  const audio =
    document.querySelector("video") ?? document.querySelector("audio");
  const src = ctx.createMediaElementSource(audio);
  const splitter = ctx.createChannelSplitter(2);
  const merger = ctx.createChannelMerger(2);
  const delay = ctx.createDelay(opts.DELAY);

  delay.delayTime.setValueAtTime(opts.DELAY, ctx.currentTime);

  src.connect(splitter);
  splitter.connect(delay, 0);

  delay.connect(merger, 0, 0);
  splitter.connect(merger, 1, 1);

  merger.connect(ctx.destination);
})();

Source

Preserve Pitch

This script disables the pitch preserving algorithm that's enabled by default in browsers, which tries to preserve the pitch when adjusting the speed of the audio/video.

See category documentation for more info.

webaudio/disable-preserve-pitch.js
1
2
3
4
(() => {
  const _ = document.querySelector("video") ?? document.querySelector("audio");
  _.mozPreservesPitch = _.preservesPitch = false;
})();

Source

One Channel

This script turns stereo audio into mono audio by routing the right (second) channel of the input to both the left and right channel of the output. You might want something like this if someone from the production team messed up the levels on the channels (e.g. only one channel has audio).

See category documentation for more info.

webaudio/one-channel.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
(() => {
  const v = document.querySelector("video") ?? document.querySelector("audio");
  const ctx = new AudioContext();
  const splitter = ctx.createChannelSplitter(2);
  const merger = ctx.createChannelMerger(2);
  const src = ctx.createMediaElementSource(v);
  src.connect(splitter);
  splitter.connect(merger, 1, 0);
  splitter.connect(merger, 1, 1);
  merger.connect(ctx.destination);
})();

Source

Turntable Losing Power

This script emulates the Turntable Losing Power effect from Adobe Audition.

See category documentation for more info.

webaudio/turntable-losing-power.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
(() => {
  const opts = { FINAL_SPEED: 0.5 };
  function mapping(time) {
    return (1 - time) * (1 - opts.FINAL_SPEED) + opts.FINAL_SPEED;
  }
  const makeHandler =
    (fn) =>
    ({ target }) => {
      target.playbackRate = fn(target.currentTime / target.duration || 0);
    };
  globalThis.__opts = opts;
  globalThis.__handler = makeHandler(mapping);
  const vid =
    document.querySelector("video") ?? document.querySelector("audio");
  vid.addEventListener("timeupdate", globalThis.__handler);
  vid.preservesPitch = false;
})();

Source