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 (() => {
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 (() => {
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 (() => {
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 (() => {
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 (() => {
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
October 4, 2024
February 12, 2024